6.2 Creating the User interface

6.2.1 Creating the adressbookgui fragmentgroup

[16kb 808x493 GIF]

Here the addressbookGUI file is already created. This was done automatically by the interface builder. The file has ORIGIN in guienv and contains a GUIenvLib fragmentform. The GUIenvLib fragmentform can contain specializations of the window class in Lidskjalv (The Mjølner BETA user interface framework).

6.2.2 Creating the addressbook window

The addressbook window is created as a specialization of window via the UML command in the toolbar:

[13kb 808x496 GIF]

In the create dialog the name of the window are entered.

[3kb 306x135 GIF]

Pressing Create in the dialog the graphical editor window appears:

[11kb 548x446 GIF]

The empty area with a border is the content area of the window. This area has been resized to the desired size by dragging the border.

The palette at the top of the window contains the standard Lidskjalv window items, such as push-button and text field.

6.2.3 Adding items

The first items that will be added to the window, is simple text label and text fields. This is the fourth and the fifth item on the simple item palette. The items are added by dragging the items from the palette to the content area of the window.

[11kb 462x461 GIF]

Here the items are added, and the text in the labels are changed to 'Name:', 'Phone:' and 'CPR:'. These changes are made via the 'Object Inspector' that are invoked by selecting an item and then choosing the Object Inspector in the Edit menu:
 

The items are arranged in the window by using the alignment commands in the 'Align' menu.

6.2.4 Changing the Name

The items are given default names in the source code that looks like 'editText1' and 'staticText2', but since these items needs to be referred to in the application (in order to tie the user interface to the data model) it is a good idea to change the names. This is done by choosing the 'Edit Name' command in the 'Edit' menu:

[8kb 347x355 GIF]

Here the name of one of the text fields are changed to 'nameField', which will be easier to remember later.

6.2.5 Compound items

The address part of the addressbook window are going to be a canvas, which is a compound item. This is the first item from the right on the palette. A canvas contains other items in its local coordinate system. Initially the canvas is empty, and then items can be added to the canvas. These objects move when the canvas are moved.

[13kb 548x460 GIF]

Here the address canvas has been added. The object info dialog has been used to give the canvas an 'etched in' border. The 'Address:' label are not part of the canvas, but are added to the window.

The address fields 'street' and 'city' can now be added to the canvas by dragging from the palette to the canvas.

[13kb 496x463 GIF]

Now the address fields are added. At the bottom of the window three push-buttons are added. They perform the main functions in the addressbook window. The other functions can be put in the menubar.

NOTE: The menubar can not be specified in the graphical editor. It will have to be coded in Sif, see the Lidskjalv manual for information about doing this.

Furthermore a separator is placed between the buttons and the 'address' canvas.

Now the user interface is complete. In the next section one way to tie the user interface and the data model together in an application, will be explained.

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