2.5 GUI Design

From the code editor, you can start up the graphical user interface (GUI) editor. This can be done by using GUI command in the toolbar. Make sure the content of the Form pane is empty before you select the GUI command, e.g. by clicking on a folder in the treeview. In this way a new library file will be created for the GUI elements.

[13kb 808x496 GIF]


Now the skeleton source code of a window is shown and the graphical editor activated. The start window should look like:

[10kb 548x446 GIF]

The source code generated in code editor, is a subpattern of a general window pattern, and it thereby inherits the properties of the window pattern.
To start making your GUI first resize the window to the desirable size (it is of course possible to adjust the size of the window later), This is done by clicking inside the window, this will activate the window object, and you can now resize the window by dragging one of the small black boxes.

[1kb 149x102 GIF]

Another way of doing it is by double clicking on the window, and thereby evoking the object inspector. which looks like

[6kb 347x193 GIF]

With the Object inspector, it is possible to insert the exact height and with of the window. The text field in the top of the inspector, is used to edit the name of the sub pattern which generates the window. I will get back to the 'Events' option button later.
the x and y rows, is used to position the object relative to the upper left corner, which is not relevant for the actual window.
The title is used to give the window a name, which in the picture above is 'untitled'.
Now to design the window, again take a quick look at our model To make it easy for the common user, use one of the basic OOD criteria and try and make the concepts of the referent system (the real world) visible in the graphical user interface (GUI).

The main concepts from the model are 'stockroom', 'product' and' shoppingCart'. For each of these concepts, make a closed area, this can either be done by a canvas, or a groupbox, which is a subpattern of a canvas. basically they are the same, except the groupbox, have a title in the upper left corner, and the canvas have not.
By placing the mouse arrow above one of the icons placed, the name of the object the icon represents will be posted. Like shown bellow, where the pointer i placed on the 'groupbox' icon.

[3kb 288x119 GIF]

The groupbox icon is placed under the AUX tab, by pressing the left mouse button, it's possible to drag a groupbox onto to window.
After resizing the window and dragging three groupboxes into the window, the window should now look like the one illustrated:

[5kb 552x451 GIF]

Now it is time to use the object inspector again, this time launch it on the leftmost groupbox, by double clicking inside the it.

[10kb 473x429 GIF]

Compared to the object inspector shown earlier this has more tupels. Again the 'name' field in the top is the name of the object in the source code, the x and y are coordinates with (0,0) in the upper left corner, x gets bigger downward, and y to the right. The width and height the dimensions of the object. The title, is the title of the groupbox.
When a window is resized, the objects in the window can be bound to one or more of the sides of the window. This is controlled with the next four tupels. Border.style and border.visible help you define the looks of the border of the groupbox.
To make the GUI, and the source code more understandable, both the name and the title should be changed, to something more meaningful, and usually its a good idea to make the names close to each other, this will make it easier to make the connection between the code and the actual window, to the programmer.

The illustration below, shows how it looks, after changing the titles on all three groupbox (to Products, Details and Shopping Cart) and the title of the window has been changed to 'My BookStore'.

[5kb 546x441 GIF]

It is now time to insert the edittext fields, buttons etc....
Inserting new objects are done like shown above, as an example it will now be shown how to insert a pushbutton, and giving it an event.
First drag and drop a pushbutton into the window:

[1kb 129x66 GIF]

Again double click on the object to invoke the object inspector (se bellow), The name of the object is changed to 'InToCartpb' (pb short for pushbutton), and the label on the button to 'Put into Cart'

[8kb 347x355 GIF]

It is now possible to associate an event to this button, by using the Event menu in the object inspector,

[8kb 465x269 GIF]

When an event is chosen (here the event chosen is onMouseUp) a sub-editor will appear.

[7kb 508x196 GIF]

In this window, it is now possible to connect the event of pushing the button, to some BETA code.

To make the rest of the window like the one in the beginning of this tutorial, is by drag and drop the items as just shown with the push button.

A feature in the interface builder, to help the engineer, is the align function. Look at the two buttons in the image bellow, they are not aligned.

[2kb 215x74 GIF]

To align the two buttons, first select, the button which the other shall be aligned with. then press <SHIFT> and the select the other button.

[2kb 205x59 GIF]

Now use the top edge in the Align menu

[5kb 222x219 GIF]

The buttons will now be aligned with the object first selected. The  alignment is made with the top edge of the button

[2kb 209x61 GIF]

When the sales window is finished, close down the GUI-editor. To start the administration window it is not necessary to make more window library files, simply use the Create window in the GUI menu, and a new empty window, is ready.

The administration window, also shown in the getting started section is made the same way.


Mjolner Integrated Development Tool - Tutorial
© 1991-2002 Mjølner Informatics
[Modified: Friday October 27th 2000 at 14:56]