GRAphical Programming for Eiffel index contents

Chapter XIII. Interface Builder

OVERVIEW


What is Interface Builder

What can Interface Builder do

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.

Interface Builder project

What is a project

Project is the unit of editing in Interface Builder. It contains resources of various types. Interface Builder supports the following resource types:

Saving project

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.

Windows resource file generation

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.


Using Interface Builder

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:


WORKING WITH INTERFACE BUILDER

Managing the project

Create new project

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.

Open project

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.

Edit project contents

In order to list the contents of a project Interface Builder displays a special window.


Figure 1.1 The Project Window.

Create new resource instance

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.

Edit resource

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.

Close resource editor

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.

Delete resource

To delete a selected resource instance you need to press the "Delete" button in the "Project" window.

Save project

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.

Create Windows resource file

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:


Edit resource

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.

Dialog and desktop element editor

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.

Change resource type

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.

Change resource name

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.

Add new element to 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.

Mark element or group of elements

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:

Delete elements

To delete a group of elements you need to:

Edit properties of element or group of elements

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.

Change location and size of element or group of elements

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.

Align group of elements

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

Test resource

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.

Change the editor grid attributes

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.

Additional editor features

Using the "Edit" submenu items in a dialog or desktop element editor menu you can do the following:

Accelerated access to some features

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.


Pulldown menu editor

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

Change menu name

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.

Add item

To add a new item to the menu you should:

Add separator

To add a separator to the menu you should press the "Separator" button in the "Add" group of the menu editor.

Change item

To change an item you should:

Delete item or separator

To delete an item or separator you should:

Change level of the item or separator

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"

Move item or separator

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"

Test menu

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.


Message box editor

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.

Change message box name

To be loaded from an application resource must have unique name. You should change the default name of the message box.

Edit message box

Editing a message box actually consists of changing its attributes:

Test message box

To test a designed message box you should press "Test". The message box editor will create the test message box.


String constant editor

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.

Change string constant name

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.

Edit string constant

Editing a string constant consists of editing its text.


Picture editor

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.

Change picture name

To be loaded from an application resource must have unique name. You should change the default NO_NAME name of the picture if necessary.

Edit picture

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.


Cursor editor

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.

Change cursor name

To be loaded from an application resource must have unique name. You should change the default NO_NAME name of the cursor if necessary.

Edit cursor

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.


Icon editor

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.

Change icon name

To be loaded from an application resource must have unique name. You should change the default NO_NAME name of the icon if necessary.

Edit icon

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.


LOAD RESOURCE FROM WINDOWS DLL

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.


Steps of loading

To load a resource the following steps should be done:

  1. Declare a local variable with type RESOURCE_CONTAINER
  2. Create a instance of the resource container
  3. Open the resource container passing the Windows DLL file path as the parameter and test the validity of the resource container opened.
  4. Load necessary resource(s) using the load creation procedure and passing the resource container and resource name as the parameter
  5. Close the resource container

Example of loading

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

© Object Tools -- info@object-tools.com -- December 1999