- 1 Introduction
- 2 Installation
- 3 Quick start
- 4 Tips
- 4.1 MSEide
- 4.2 MSEgui
- 4.2.1 Tabbed control
- 4.2.2 Splitter
- 4.2.3 Switch-off auto-scrolling of the form(widget)
- 4.2.4 Read/write data in the twidgetgrid
- 4.2.5 First events
- 4.2.6 MDI
- 4.2.7 Drawing
- 5 Tutorial
- 6 Screenshots
The MSE IDE is a Cross Platform GUI Development System for Pascal programmers, completely written in Pascal. The MSE GUI does not feature VCL compatibility. The graphics library provides an interface to win32 and X11. Despite being a single person (Martin Schreiber) effort for the moment, the IDE and GUI has already an amazing feature list:
- Internal character encoding is UCS2.
- Internationalization tool included.
- Docking forms.
- Embedded forms (similar to TFrame).
- Visual form inheritance.
- Links to xlib and gdi32, no external widget library needed.
- Database access components and data edit widgets.
- Integrated debugging.
- Integrated report designer.
- Flexible and handy build system with switchable macros.
- and more...
But what about Lazarus?
Lazarus is an IDE that aims to provide a high degree of compatibility with VCL code, while providing a native look on many platforms. The native look is very important for many developers, but combined with the VCL compatibility necessitates many complex interfaces to the different native widget sets (Gtk,Win32,Carbon,Qt). The continuous evolution of these native widget sets (gtk1->gtk2, win32->?, qt) provokes endless catching up.
MSEide+MSEgui neither features (or suffers :-) VCL compatibility, nor provides a real native look on target platforms. The graphics library provides an interface to win32 and X11. The advantage of the X11 layer is the immediate availability of a large and stable (in time) target platform.
These different goals of both projects make them both fulfill different needs.
Why this wiki
The design of the MSE GUI is a fresh approach to GUI design patterns. It features many innovative solutions for typical GUI tasks. Being innovative, the MSE GUI library differs substantially from VCL/LCL/CLX. Switching from VCL to MSE may be more challenging than switching from VCL to LCL. These wiki pages aim to ease the first steps with this promising alternative IDE and GUI library.
See home page.
Launch the IDE and use Project->Open to open the provide demo msegui/apps/demo/demo.prj. The title of the IDE reflects the opened project. Hit F9 and (if you followed the installation instructions :-), be amazed by the speed of FPC+MSE.
First RAD steps
Close the running project. Use Project->Source to open the project source demo.pas. Ctrl-click on the parameter mainfo in the line
to navigate to main.pas. Click on F12 to toggle between unit and form. Not everything will feel that familiar, because of that, these pages are written. Click on the button, this will auto raise the property editor (unusual but usefull). Let us add another button. Make the component palette visible if necessary (View->Toolbar->Component Palette). Select the tbutton on the widget page. Click on the form to create the button. Give it a caption in the usual way. Creating an event handler does not work with the usual double clicking on the onexecute property. Instead, you must select the onexecute property in the property editor, type the name of an event handler and press enter. The MSE RAD will create the handler and position the pointer on the definition. Use ctrl-shift-down arrow (or up) to navigate between implementation and definition. Just add some code like writeln('Hello world'); Hit F9. The writeln will end up in the target console window of MSE (not the console in which you started MSE).
Adding a Main Menu
Add Main Menu
Add a tmainmenu component from the Widget Component tab to your main form. Click on your mainform (mainfo) so that the Object Inspector show the properties of the mainform. Use the arrow next to the mainmenu property of the mainform, to select tmainmenu1 as the mainmenu of mainfo.
Add Menu Items
In the object inspector click on the cross to open the mainmenu treeview branch. Open the menu property of mainmenu. Change the submenu.count of menu to 1 (or higher). Now open the submenu.count property, it will show "Item 0". Open "Item 0" and set the caption to "File". Change the submenu.count property of "Item 0" to 1. Open this last submenu.count property and set the caption of the new "Item 0" to Quit. Hit F9 and your program should have a menu File with the entry Quit in it.
Once there is one submenu, you can add more by right clicking on a "Item X". This will reveal a context sensitive menu with "Insert, Append, Delete".
Once you have more than one submenu, you can use drag and drop to move the "Item X"s. Start the drag mouse move on the "Item X" line.
Some may find the standard menu font a bit small. The standard font for the main menu of an msegui application is the font defined by the stf_menu stock font. You can change a stock font value with a startup parameter.
So if you start the mseide like this, you can get a larger font:
- Ctrl+F4 - Close
- Ctrl+S - Save
- Ctrl+E - Select page
- F11 - Toggle Form/Inspector
- F12 - Toggle Form/Unit
- Shift+Ctrl+[0..9] - Bookmark 0..9
- Ctrl+[0..9] - Go to bookmark 0..9
- Ctrl+LeftClick - Go to var(class, method, unit) declaration
- Shift+Ctrl+Up - Go to method declaration
- Shift+Ctrl+Down - Go to method implementation
- Shift+Ctrl+Space - Show procedure header
- F7 - Step
- F8 - Next
- F9 - Continue
- Shift+F7 - Finish
- Shift+Ctrl+F8 - Next instruction
- Shift+Ctrl+F7 - Step instruction
- F5 - Toggle breakpoint
- Shift+F5 - Toggle breakpoint enabled/disabled
- Ctrl+B - Breakpoints on/off
- Ctrl+W - Watches on/off
- Ctrl+Z - Undo
- Ctrl+X - Cut
- Ctrl+C - Copy
- Ctrl+V - Paste
- Ctrl+F - Find
- F3 - Search again
- Ctrl+L - Go to line.
- Ctrl+I - Indent block
- Ctrl+U - Unindent
Print from IDE
You need the ghostscript
Recent opened files or projects
The last opened projects are in the dropdown list of 'Project'-'Open'-'Name'. The last opened files are in the dropdown list of 'File'-'Open'-'Name'.
- Use submenu.count to add the first submenu entry.
- Right click on a menu item "Item X" to display a context-sensitive menu that allows to insert,append or delete a submenu entry
- Use drag and drop on a submenu entry to move the different submenu entries.
New Panels in the IDE
Example, you want to have the watch, stack and cpu window in a window:
- select the menu item View-Panels-New Panel.
- select the menu item View-Watches.
- drag the Watches window by the grip (not the window title!) in the new panel.
- same with Stack and CPU window.
- to split horizontal drag one of the grip of the inserted widgets to the left border of the panel.
- to split vertical drag one of the grip of the inserted widgets to the bottom border of the panel.
- to use tabs drag one of the grip of the inserted widgets to the centre of the panel.
Main way in MSEide is set the tab order after all widgets are placed in the form with the popup menu function "Set Tab Order". Select a widget in the container where you wish to set the tab oder, click right, click "Set Tab Order", click row 0, click "Start", click the widget in the container which should get tab order 0, click the widget which should get tab order 1..
An alternative is to drag and drop the rows to the desired position. The first row corresponds to the tab order 0 the second to the 1 and so on.
Creating a new event handler
Select the event you want in the Object Inspector, then type name of the new event handler. IDE create a new procedure(declaration and implementation) in the source code. If you double-click the name of the event handler in the Object Inspector, source editor opens with the cursor at begin of your handler implementation.
- Put ttabwidget control on the form. Now you have container (ttabwidget1) for pages.
- Put as many ttabpage controls on the ttabwidget1 as tabs you want.
We have two widgets (widgetLeft, widgetRight) and we need horizontal splitter between them.
- Add TSplitter to form and resize it as you want.
- Change the linkleft of tsplitter1 to widgetLeft and linkright to widgetRight. At this step our widgets stick to splitter.
- Change the spo_hmove to True. That's all.
- If you want to save a proportion between width of widgetLeft and width of widgetRight when the main form is resized then change the so_hprop to True.
- If you need the vertical splitter then use other properties linktop, linkbottom, spo_vmove, spo_vprop.
Switch-off auto-scrolling of the form(widget)
Change the container - frame - sbhorz - options - sbo_showauto property of the form to False.
Read/write data in the twidgetgrid
- editwidget.value -> value of the actual row
- editwidget[rowindex] or editwidget.gridvalue[rowindex] -> value of the addressed row
- editwidget.gridvalues the whole column as a dynamic array.
OnCreate is called before loaded procedures of the components of the form are called, OnLoaded is called after loaded procedures of the components of the form are called. Many components do initializations in loaded procedures, event properties are inactive before procedure loaded of the component is called.
MDI - application can be created using TDockFormWidget or TDockPanel (as MDI-area) and TDockForm (as ancestor for you MDI-child window). There are examples:
- How to use TDockForm with custom MDI-buttons http://brefi.narod.ru/mdi_example2.tar.gz or in $MSESOURCES/contributed/ivankob/examples
- Simple MDI-controller (create, switch, ... the child windows) http://mihafpc.narod.ru/MDISample.tar.gz or in $MSESOURCES/contributed/miha
Redraw form the additional thread
Use a tthreadcomp (tab Gui) to do the long time procedure. If you need to access widgets and other gui variables from the additional thread, call application.lock before and aplication.unlock after accessing the main event thread elements.
- twidget.invalidate to invalidate an individual widget
- twidget.rootwidget.invalidate to invalidate the window
- application.invalidate to invalidate all windows (=forms) in the application
There are two methods to draw texts in MSEgui:
- Simple text positioning by baseline position of start of the first character with tcanvas.drawstring.
- With the drawtext procedures of msedrawstring.pas.
No twidget has a canvas. The canvas used for painting is normally one of the canvas of twindow, it can also be an canvas of a tbitmap or a tprinter or... MSEgui uses one canvas to paint a whole window with all widgets. tcanvas.font is initialized by twidget.getfont, canvas.color by twidget.actualcolor before calling twidget.dopaint, see twidget.paint procedure in msegui.pas.
Theming (Frames & Faces)
Every twidget has a property frame and face. If they are deactivated (<disabled> in object inspector) they are only an nil pointer and need no more resources. Activate them by clicking on the ellipse button in the right object inspector column in the row face respective frame.
The face property defines the background of the client area of the widget.
It is a combination of a fade and a bitmap. Both of them can be semitransparent. The bitmap can be stretched and/or tiled. Example: you want to create a button with a fade as face.
- place a tbutton on the form.
- in object inspector activate property face.
- set face.fade.color.count to 2.
- click on the + at color.count.
- in item 0 select cl_gray.
- in item 1 select cl_ltgray, now you have a left to write fade from gray to light gray.
- change face.fade.direction to gd_up or gd_down, you get a convex resp. concave fade.
If you want, you can blend an additional structure over the fade:
- select the wanted pattern image in face.image.
- activate face.image.alignment al_tiled.
- adjust face.image.transparency to your needs, $000000 = opaque, $ffffff = fully transparent. The number defines the transparency of the three color channels ($RRGGBB).
To centralise the face look use an tfacecomp (tab Gui) and select the facecomp in template of the face properties.
The frame property defines the look of an additional frame around the component and shows a possible caption at the widget. Example: you want an lowered frame around and a caption right of the button.
- activate property frame.
- set frame.levelo to -1.
- set frame.leveli to 1.
- enter the caption text in frame.caption.
- set frame.captionpos to cp_right.
To centralise the frame look use an tframecomp (tab Gui) and select the framecomp in template of the frame properties.
Desktop colors in the MSE application
Default values of the mapped colors stored in the array msegraphics.defaultmapped. For change it's values you can use function msegraphics.setcolormapvalue Win32 and KDE example ($MSESOURCES/contributed/miha/GuiStyle.pas)
Unofficial incomplete help pages started from Z505 at: http://z505.com/cgi-bin/mse/idx.cgi?file=generalindex
Read the beginner's tutorial (in Russian) at: http://freepascal.ru/article//mse/20060108181639/
Also: "MSEide+MSEgui. Draw lesson." (in Russian) http://freepascal.ru/article//mse/20060205191314/
You can also find an English translation here: http://www.geocities.com/yetanothergeek/mseide-tutorial-en/
This page in Russian: http://freepascal.ru/wiki/index.php/MSEide%26MSEgui
The following screen shots are taken from an MSEgui Firebird database application. The programmer writes he has customized the look and feel of his application in about 30 minutes with a tfacecomp and two tframecomp. He states that the look and feel is identical on Linux and Windows.
The report is designed and rendered with the built-in MSEide+MSEgui report designer and report generator.
Two MDI forms with fade and flat frame.
HMI on an embedded system
An embedded system for medical applications, in this case steam sterilizers,
was realized with MSE-IDE & MSE-GUI for the control unit, nowadays also
commonly called the "human machine interface", HMI.
The control unit uses a touch panel a its display, therefore all active controls
have to be made rather large to enable the personnel to handle them easily.
The main screen consists of a few informational display fields and allows to
select the implemented sterilizing processes by means of a menu consisting of several
button components showing the process names along with a short description in a
separate panel. The visibility of the buttons and their captions are defined during
program loading by means of a configuration file.
The informational fields display the devices' operating values in real time using a
MSE system timer to collect the information from the PLC.
After processing has been started, the display is switched to a different format
showing the operating values in large digits on some numeric display field components
on the left and a graphical representation of the process history on the right, again
both as real time "live displays". If the diagram curves would reach the right panel
border, the diagram would change to a scrolling mode, always showing the current state
at the extreme right.
For diagnostic purposes, also a schematic state display is available. This shows a
simplified schematic of the apparatus, along with real time animated symbols of the
control elements, as there are valves and pumps, each displayed in a derived version
of a timage component, created and placed dynamically on program load. Also shown are
the most important process values as numerical displays, also dynamically placed.
The schematic field really is the output of a separate program, running in parallel
to the process display which provides the upper and lower parts of the screen display.
There is also a mode for setting several control and function parameters and to
recall previous operational and diagnostic data. It is organised as a tabbed screen
containing several run time parametrized menu pages and a couple of display field pages.
Some of the pages allow access only after entering a pass code to prevent missuse of
This is a screen displaying a graphical protocol of a previous process. The protocol
is usually printed out immediately after termination, as required by the regulations.
The printer output is generated as a postscript file, processed by ghostscript both for
print out and for the on screen display shown, which uses the png format for loading
into the display field.
Of course, there is also an attribution display, showing program version, creator information and the tools used for the creation of the system, Free Pascal and MSE-IDE & MSE-GUI. As background, it uses a photography of one such apparatus as it is used in clinics displayed in an image component carrying several label fields used for the text. Above all of that sits a transparent button to close the picture.