Interface Builder is a tool to simplify design of an application based on GRAPE. It allows to create and then edit all resources (menus, dialogs, desktop elements, etc.) necessary for such applications. Resources may be organized in one or more projects. Resources, saved in the project, may be converted into the Windows resource file.
Project is the unit of editing in Interface Builder. It contains resources of various types. Interface Builder supports the following resource types:
All resources of a project may be saved in ERC Interface Builder internal format, and then loaded back to edit them again. The ERC file contains descriptions of project resources in the text form. The order of the resource description corresponds to their order in the project. Such text file may be edited manually, if necessary. But as usual, it is not necessary to do it.
During an Interface Builder session the current project may be saved as Windows RC resource file using item "Save as RC" in the "Project" submenu or corresponding tool button from the system tool bar.
If you design an application basing on GRAPE you can essentially simplify your work using Interface Builder. It allows you to create all necessary resources and save them into one or more projects. By generating a Windows resource file (RC) from a project you may create a Window DLL from it. Then you can load necessary resources to your application from this DLL.
Thus, to go from resource generating to its usage in your application you should make the following steps:
There is no active project after Interface Builder starts. If you do not have a project previously saved as an ERC file or if you want to create a new project - do it using the "New" item in the "Project" submenu or pressing the button on the system speed bar.
If there is a previously created project you can load it using the "Open..." item in the "Project" submenu or pressing the button on the system speed bar.
In order to list the contents of a project Interface Builder
displays a special window.
Figure 1.1 The Project Window.
To create a new resource instance you need to start resource editor for the one from the resource types supported by the system. There are two ways to do it. The first way - you should use tool buttons from the "Start Resource editor" window group. The second way - using the "New" item from the "Resource" submenu. Interface Builder displays a special dialog to create a new resource instance as the result:
Figure 1.2 The New Resource Dialog.
To edit resources created earlier you need to either double click the left mouse button on the corresponding line in the "Project Resources" list or press the "Open" button in the "Project" window. Interface Builder starts the appropriate resource editor corresponding to the selected resource type.
There are some ways to close already opened resource editor:
If you want to close all open resource editors you should use the "Close all" item from the "Resource" submenu.
To delete a selected resource instance you need to press the "Delete" button in the "Project" window.
To save project in a ERC file you should use either the "Save" or "Save As..." item in the "Project" submenu.
For saving a project you may also use the button from the system speed bar.
To create a Windows RC resource file you need to choose either the "Save as RC..." item from the "Project" submenu or the button from the system speed bar. Interface Builder creates a Windows resource file with ".RC" extension and user-defined name and a file with the same name but with the ".E" extension. This file contains an Eiffel class with the constants defined in the project resources and has the following types:
To edit resource Interface Builder starts the resource editor corresponding to the type of the resource. System supports the following types of the resources:
Each type of the resource supported by Interface Builder corresponds to the class with the same name in GRAPE.
This resource editor can edit the dialog and desktop element resource types. These resource types correspond to the DIALOG and DESKTOP_ELEMENT classes in GRAPE.
Let's refer to the dialog or desktop element being edited as to the simple resource.
To edit these resources Interface Builder has the following toolbar windows:
All actions which may be executed use these toolbar windows. They may also be executed using items from the editor pulldown menu.
By default the type of the resource to be designed is dialog. If you want to change it you should change the "ObjectType" resource property when there are no selected elements in your resource.
A resource must have a unique name to be loaded from any application. You should change the default NO_NAME name of the resource if necessary. To do it you should change the Name resource property when there are no selected elements in your resource.
Figure 1.3 Controls toolbar.
where:
![]() |
- Text button - corresponds to GRAPE's TEXT_BUTTON class |
![]() |
- Picture button - corresponds to the PICTURE_BUTTON class |
![]() |
- Radio button - corresponds to the RADIO_BUTTON class |
![]() |
- Check button - corresponds to the CHECK_BUTTON class |
![]() |
- Horizontal slider - corresponds to the SLIDER class |
![]() |
- Vertical slider - corresponds to the SLIDER class |
![]() |
- List box - corresponds to the LIST_BOX class |
![]() |
- Combo box - corresponds to the COMBO_BOX class |
![]() |
- Static text - corresponds to the STATIC_TEXT class |
![]() |
- Text line entry - corresponds to the TEXT_LINE_ENTRY class |
![]() |
- History - corresponds to the HISTORY class |
![]() |
- Memo entry - corresponds to the MEMO_ENTRY class |
![]() |
- User control - corresponds to the CONTROL class |
![]() |
Group box - corresponds to the GROUP_BOX class from GRAPE Window library |
![]() |
- User control - corresponds to the CONTROL class |
Having an element activated, you can place the element - using a mouse - in any appropriate position and specify the appropriate size for it.
After an element has been added it will be marked by the special marked border to edit its properties.
To mark an element or group of elements in your resource you should go to the pointer state. A resource editor is in this state if the appropriate button in the "Tools" toolbar windows is shown as being pressed.
To mark only one element you should click the left mouse button on it. After that the selected element is bordered by the special marked border.
If you want to mark a group of elements you should make the following steps:
Then all the elements which intersect the selected area will be marked.
If you get some marked elements you can change the group of the
marked elements in two ways:
To delete a group of elements you need to:
If you want to edit properties of an element or group of elements you should mark all the necessary elements and then go to the "Properties" toolbar window:
Figure 1.4 Properties list dialog.
To edit a property you should first select it and then change its value.
All editing properties may be classified into three types:
Name and type of the selected element are displayed in the upper combo box if you select only one element.
If you want to change the location of a group of elements in the resource to be designed you must select these elements and then move to the desired position using the mouse or keyboard's arrow keys.
If you want to change the size of an element you must select only this element and change its size using either the active areas on the marked border and the left button of your mouse or the arrows with Ctrl key of your keyboard.
You can use alignment features of Interface Builder to align marked elements in some manner. You should use either the corresponding items from the "Alignment" submenu or "Alignment" toolbar:
Figure 1.5 An alignment toolbar.
The system supports the following types of horizontal alignments:
![]() |
- aligns all marked elements on the left side of the marked area |
![]() |
- aligns all marked elements on the right side of the marked area |
![]() |
- aligns all marked elements horizontally into the center of the marked area |
![]() |
- aligns all marked elements horizontally into the center of the window |
![]() |
- aligns all marked elements uniformly horizontally inside the marked area |
![]() |
- aligns all marked elements uniformly horizontally inside the window |
![]() |
- aligns the marked area uniformly horizontally inside the window |
and the following types of vertical alignments:
![]() |
- aligns all marked elements on the top of the marked area |
![]() |
- aligns all marked elements on the bottom of the marked area |
![]() |
- aligns all marked elements vertically in the center of the marked area |
![]() |
- aligns all marked elements vertically in the center of the window |
![]() |
- aligns all marked elements uniformly vertically inside the marked area |
![]() |
- aligns all marked elements uniformly vertically inside the window |
![]() |
- aligns the marked area uniformly vertically inside the window |
To test a designed dialog or desktop element you should use either the "Test" item from "Tools" submenu or the button from the "Tools" toolbar window. Interface Builder displays the test dialog as the result. You should close the test dialog to return to the edit mode.
If you want to change attributes of the resource editor's grid you should use the "Grid ..." item from the "Options" submenu. Interface Builder displays a special dialog to set new grid attributes as the result:
Figure 1.6 Grid settings dialog.
Using the "Edit" submenu items in a dialog or desktop element editor menu you can do the following:
The resource editor supplies an accelerated access to the most frequently used features
of the resource editor by means of special pop-up menus. It may be invoked by pressing the
left button of the mouse inside the editor window:
Figure 1.7 Resource editor popup menu.
If some features are not accessible in some state of the resource editor they are not accessible in the displayed pop-up menu.
The resource editor can edit pulldown menu resource types. These resource types corresponds to the MENU class in GRAPE.
The Menu editor window has the following view:
Figure 1.8 Menu editor
To load a resource from the running application the resource must have unique name. You should change the default NO_NAME name of the resource if necessary.
To add a new item to the menu you should:
To add a separator to the menu you should press the "Separator" button in the "Add" group of the menu editor.
To change an item you should:
To delete an item or separator you should:
All items and separators are usually added to the first menu level. To change level of the item you should use the following buttons:
![]() |
- To decrease level |
![]() |
- To increase level |
If you want to change the level of submenu you should turn on flag "With children"
To move an item or separator you should use the following buttons:
![]() |
- To move up |
![]() |
- To move down |
If you want to move a submenu you should turn on flag "With children"
To test a designed pulldown menu press "Start Menu Test Dialog". The menu editor creates a dialog with the designed menu as the result. You should close the test dialog to return to editing session.
This resource editor can edit message box resources. This resource type corresponds to MESSAGE_BOX class in GRAPE.
The message box editor's window has the following view:
Figure 1.9 Message box editor.
To be loaded from an application resource must have unique name. You should change the default name of the message box.
Editing a message box actually consists of changing its attributes:
To test a designed message box you should press "Test". The message box editor will create the test message box.
This resource editor can edit string constant resource types. These resource types correspond to STRING Eiffel class.
The string constant editor's window has the following view:
Figure 1.10 String resource editor.
To be loaded from an application resource must have unique name. You should change the default NO_NAME name of the string constant if necessary.
Editing a string constant consists of editing its text.
This resource editor can edit picture resources. These resources correspond to PICTURE class in GRAPE.
The picture editor's window has the following view:
Figure 1.11 Picture resource editor.
To be loaded from an application resource must have unique name. You should change the default NO_NAME name of the picture if necessary.
You must define a path to the Windows bitmap (BMP) file. It may be done manually using the "Picture" field or using a browse button (...) to select the path to the picture file.
Resource editor can edit cursor resources. This resource corresponds to GRAPHICS_CURSOR class in GRAPE.
The cursor editor's window has the following view:
Figure 1.12 Cursor resource editor.
To be loaded from an application resource must have unique name. You should change the default NO_NAME name of the cursor if necessary.
You must define a path to the Windows cursor (CUR) file. It may be done manually using the "Cursor" field or using a browse button (...) to select the path to the cursor file.
This resource editor can edit icon resources. These resources correspond to the ICON class in GRAPE.
The icon editor's window has the following view:
Figure 1.13 Icon resource editor.
To be loaded from an application resource must have unique name. You should change the default NO_NAME name of the icon if necessary.
You must define a path to the Windows icon (ICO) file. It may be done manually using the "Icon" field or using a browse button (...) to select the path to the icon file.
Resources designed with Interface Builder may be loaded by an application at run-time from a DLL. To address resources by the name you should use the Eiffel class generated by Interface Builder simultaneously with the Windows resource file. This file has the same name as the Windows resource file with the ".E" extension. To load the resources you may either inherit this class or become a client of it.
The class with constants also contains contexts of the dialog (desktop element) children. The contexts constants are used to access to them.
To load a resource the following steps should be done:
... local ... rc : RESOURCE_CONTAINER dlg: DIALOG ... do ... !!rc.make() -- create resource container rc.open ("MY.DLL") -- open it if rc.is_valid then -- test if everything is OK !!dlg.load (rc, TEST_DIALOG) -- load object from resource rc.close() -- close container end; -- if ...