2.5 GUI Design

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

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.

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

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.

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:

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

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'.

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:

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'

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

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

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.

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.

Now use the top edge in the Align menu

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

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.