Categories | Alphabetical | Classes | All Contents | [ < ] | [ > ]

IDL GUIBuilder Tools

You will use the following tools to design and construct a graphical interface using the IDL GUIBuilder:

Using the IDL GUIBuilder Toolbar

The IDL GUIBuilder has its own toolbar in the IDE, which you use to create the widgets for your user interface. The following figure shows the toolbar.

These are the widget types you can create using the IDL GUIBuilder toolbar:

Widget
Description
Base
Creates a container for a group of widgets within a top-level base container. A top-level base is contained in the IDL GUIBuilder window, and you build your interface in it. Use base widgets within the top-level base to set up the widget hierarchy, layout, and to organize the application. For example, you can use a base widget to group a set of buttons. For information on base properties, see Base Widget Properties.
Button
Creates a push button. The easiest way to allow a user to interact with your application is through a button click. You can have button widgets display labels, menus, or bitmaps. For information on button properties, see Button Widget Properties.
Radio Button
Creates a toggle button that is always grouped within a base container. Use radio buttons to present a set of choices from which the user can pick only one. For information on radio button properties, see Button Widget Properties.
Checkbox
Creates a checkbox, which you can use either as a single toggle button to indicate a particular state is on or off or as a list of choices from which the user can select none to all choices. Checkboxes are created within a base container. For information on checkbox properties, see Button Widget Properties.
Text
Creates a text widget. Use text widgets to get input from users or to display multiple lines of text. For information on text widget properties, see Text Widget Properties.
Label
Creates a label. Use label widgets to identify areas of your application or to label widgets that do not have their own label property. Use labels when you have only a single line of text and you do not want the user to be able to change the text. For information on label widget properties, see Label Widget Properties.
Horizontal and Vertical Sliders
Creates a slider with a horizontal or vertical layout. Use slider widgets to allow the user to control program input, such as adjust the speed of movement for a rotating image. For information on slider properties, see Slider Widget Properties.
Droplist
Creates a droplist widget, which you can use to present a scrollable list of items for the user to select from. The droplist is an effective way to present a lot of choices without using too much interface space. For information on droplist properties, see Droplist Widget Properties.
Listbox
Creates a list widget, which you can use to present a scrollable list of items for the user to select from. For information on listbox properties, see Listbox Widget Properties.
Draw Area
Creates a draw area, which you can use to display graphics in your application. The draw area can display IDL Direct Graphics or IDL Object Graphics, depending on how you set its properties. For information on the draw area properties, see Draw Widget Properties.
Table
Creates a table widget, which you can use to display data in a row and column format. You can allow users to edit the contents of the table. For information on the table widget properties, see Table Widget Properties.
Tab
Creates a tab widget on which different "pages" (base widgets and their children) can be displayed by selecting the appropriate tab. For information on the tab widget properties, see Tab Widget Properties.
Tree
Creates a tree widget, which presents a hierarchical view that can be used to organize a wide variety of data structures and information. For information on the tree widget properties, see Tree Widget Properties.

Note
The Select Cursor button returns the cursor to its standard state, and it indicates that the cursor is in that state. After you click on another button and create the selected widget, the cursor returns to the selection state.

Creating Widgets

All widgets for a user interface must be descendents of a top-level base; in the IDL GUIBuilder window, all widgets must be contained in a top-level base widget. When you open an IDL GUIBuilder window, it contains a top-level base. You can add base widgets to that top-level widget to form a widget hierarchy. The added bases can act as containers for groups of widgets.

To create a widget, do one of the following:

After you add widgets to a top-level base, you can resize, move, and delete them, and you can change their parent base. You can also set properties for each widget. For information on how to operate on widgets, see Widget Operations, and for information on setting properties, see Using the Properties Dialog.

Using the Properties Dialog

For each widget, you can define attribute and event procedure properties. A widget's attributes define how it will display on the screen and its basic behaviors. The attributes you can set for a selected widget are displayed on the Attributes tab of the Properties dialog. These attributes are initially set to default values.

Event procedures are the predefined set of events a widget can recognize. When you write an application, you decide if and how the widget will respond to each of the possible events. The events that a selected widget recognizes are displayed on the Events tab of the Properties dialog. The event values are initially undefined. Supply event routine names for only those events to which you want the application to respond.

Opening the Properties dialog

To open the Properties dialog for a widget, do one of the following:

These actions open a Properties dialog similar to the one shown in the following figure.

The status area at the bottom of the Properties dialog contains a description of the currently selected attribute or event. In addition, for each property that maps directly to an IDL keyword, there is a tool-tip that provides the name of the IDL keyword.

To display a tool-tip, place the cursor over the property name. The tool-tips are displayed only for properties that map to IDL keywords.

Note
If you have multiple widgets selected in the IDL GUIBuilder window, the Properties dialog displays the properties for the primary selection, which is indicated by the darker, filled-in sizing handles around the widget. When you select multiple widgets, only one is marked as the primary selection.

To keep the Properties dialog on top, click the push pin button.

The Properties dialog will close as soon as it loses focus, unless you click the push pin button. If you click the push pin button, the Properties dialog stays on top and updates to reflect the properties of the currently selected widget.

To close the Properties dialog when the push pin is being used, do one of the following:

Any changes you make to values in the Properties dialog are automatic; you will see the results of all visual changes immediately. For example, any changes you make to the alignment or column setting will change the layout position of the widget immediately.

All widgets share a common set of properties, and each widget has its own specific properties. These properties are arranged in the following order on the Attributes tab of the Properties dialog:

On the Events tab of the Properties dialog, the properties are displayed in alphabetical order with common and widget-specific events combined.

For information on the properties you can set for each widget, see Widget Properties.

Entering Multiple Strings for a Property

There are several widget properties that you can set to multiple string values. The attribute's Value field contains a popup edit control in which you can enter multiple strings.

To enter more than one string in the edit control, do one of the following:

These actions move you to the next line. When you have entered the necessary string, press Enter to set the values.

Using the Widget Browser

The Widget Browser of the IDL GUIBuilder is a dialog window that presents the current GUI in a tree control. This presents the user with a different view into the GUI they are designing.

To start the Widget Browser, right-click on any component in an IDL GUIBuilder window, then choose Browse from the menu. This opens the Widget Browser, like the one shown in the following figure.

The Widget Browser is helpful when you want to see your widget hierarchy and when you need to operate on overlapping widgets in your interface layout, which can happen when you design an interface to show or hide widgets on specific events. For an example that uses the Widget Browser for this purpose, see Controlling Widget Display.

Note
In the Widget Browser, there is no indication of defined menus.

You can expand the widget tree by clicking on the plus sign, or collapse it by clicking on the minus sign.

When you select a widget in the hierarchy by clicking on it, the widget is selected in the IDL GUIBuilder window, and the Properties dialog updates to display the selected widget's properties.

Right-click on a component to display a context menu from which you can cut, copy, paste, or delete the widget. From the context menu, you can also open the Properties dialog and the Menu Editor, when appropriate. To delete a widget from the Widget Browser, use the context menu, or select a widget and press the Delete key.

To change a widget's Name attribute in the Widget Browser, select the widget name with two single clicks on the name. This changes the name into an editable text box in which you can enter the new name. The Name attribute must be unique to the widget hierarchy.

For more information on other ways to operate on widgets, see Widget Operations.

Using the Menu Editor

You can add menus to top-level bases or to buttons that have the Type attribute set to Menu. To define menus for your interface, use the Menu Editor, which is shown in the following figure with defined menus. This dialog allows you to define menus, menu items, submenu titles, and submenus, and all their associated event procedures.

For instructions on how to define the menus shown in the following figure, see Defining Menus for the Top-level Base.

Adding Menus to Top-Level Bases

To define basic menus, menu items, submenu titles, submenus, and their associated event procedures to top-level bases, follow these general steps:

  1. Open the Menu Editor by doing one of the following:
    • Select the top-level base and select Edit ® Menu from the IDLDE menu.
    • Right-click on the top-level base, then choose Edit Menu.
  2. To define a top-level menu in the Menu Editor, enter a Menu Caption, and click Insert. When you are defining menus for a top-level base, the top-level menus are aligned along the left edge of the menu list, and the indentation indicates the nesting in the menu.

Note
The Menu Caption is the name that appears on the menubar. If you are defining a top-level menu for a base, you do not need to supply a value in the Event Procedure field. On button menus, however, where the button's Label attribute acts as the top-level menu, the first level of menus in the editor serve as menu items, and thus require a value in the Event Procedure field.

  1. To define a menu item on a new line in the editor, click the right arrow, enter a Menu Caption and its associated event procedure, then click Insert. The Menu Caption is the name you want to appear on the menu. The Event Procedure is the name of the routine that will be called when the menu item is selected.

Note
For top-level bases, you must indent a line to make it a menu item and enable the Event Procedure field.

  1. To define a submenu title, enter the Menu Caption, and click Insert. It is not necessary to define an Event Procedure for a submenu title.
  2. To define submenus to a submenu title, enter the Menu Caption and the Event Procedure, indent the item another level by using the right arrow, and click Insert. Enter the submenus you want at this level of indentation.
  3. To define another top-level menu or menu item, enter the information, click the left arrow until the indentation is appropriate, and click Insert.
  4. To define a separator, select a blank line, or select the line you want the separator after, then click the separator button (which has a line on it and is above the arrow buttons).
  5. To save your defined menus, Click OK in the Menu Editor. When you do so, the menu items will appear on the top-level base. To test the display of the menus, click on them.

Note
Under Microsoft Windows, including the ampersand character (&) in the Menu Caption causes the window manager to underline the character following the ampersand, which is the keyboard accelerator. This functionality is supported in the Menu Editor. If you are designing an application to run on other platforms, however, avoid the use of the ampersand in the Menu Caption.

Adding Menus to Buttons

You can also create buttons that contain menus. To add a menu to a button, follow these basic steps:

  1. Click on the Button widget tool on the toolbar, then click on the top-level base area. This creates a button of the default size.
  2. Right-click on the button and choose Properties to open the Properties dialog.
  3. In the Properties dialog, change the value of the Type attribute to Menu.
  4. Right-click on the button, then choose Edit Menu to open the Menu Editor. You can define the menu items and submenus with the Menu Editor, using the general steps described in Using the Menu Editor.

Note
For buttons, the Label attribute acts as the top-level menu, and the first level of menus in the Menu Editor serve as menu items. Therefore, the first level requires a value in the Event Procedures field (unlike top-level menu items for bases).

  1. After you have defined all the necessary menus, click OK. When you do so, the menus are saved, and the button Label attribute is displayed as the top-level menu.

To view menus on buttons, do one of the following:

Using the Bitmap Editor

Use the Bitmap Editor to create 16 color bitmaps to be displayed on push buttons. The Bitmap Editor can read and write bitmap files (*.bmp). Using the editor, you can create your own bitmaps, or you can open existing bitmap files and modify them.

IDL supplies a set of bitmap files you can use in the buttons of your applications. The files are always available for loading. The bitmaps are located in the following directory: 

IDL_DIR\resource\bitmaps

Placing a Color Bitmap on a Button

To display a bitmap on a button, follow these steps:

  1. Right-click on the button widget, and choose Properties from the menu, which opens the Properties dialog for this button.
  2. In the Type field, select Bitmap from the droplist.
  3. In the Properties dialog, click on the arrow to the right of the Bitmap attribute, and do one of the following:
    • To place an existing bitmap on the button: Choose Select Bitmap, and select a bitmap file from the Open dialog. Note that when Bitmap type is selected, the Label attribute value changes to Bitmap.
    • To edit an existing bitmap and place it on the button: Choose Edit Bitmap, then select the bitmap file from the Open dialog. This opens the bitmap in the Bitmap Editor. The bitmap is displayed on the button when you save the file.
    • To create a new bitmap and place it on a button: Choose New Bitmap. This opens the Bitmap Editor, which you can use to create the new bitmap. When you save the *.bmp file, it is placed on the button.

      • When you complete one of these processes, the filename of the selected bitmap appears in the Bitmap field of the Properties dialog, and the bitmap is displayed on the button.

Note
For 16- and 256-color bitmaps, IDL uses the color of the pixel in the lower left corner as the transparent color. All pixels of this color become transparent, allowing the button color to show through. This allows you to use bitmaps that are not rectangular. If you have a rectangular bitmap that you want to use as a button label, you must either draw a border of a different color around the bitmap or save the bitmap as 24-bit (TrueColor). If your bitmap also contains text, make sure the border you draw is a different color than the text, otherwise the text color will become transparent.

Using the Bitmap Editor Tools

The Bitmap Editor tools allow you to select from the color palette, and then use the Pencil (pixel fill), the Flood fill (fill clear area), or the Eraser (clear or color areas). The Bitmap Editor tools are shown in the following figure.

You can select a color by clicking on it in the color selection tool, or you can select your primary colors, the left-button and right-button colors, and then click on a tool and draw on the bitmap canvas. You can change the primary color selections at any time.

Using the Tree Editor

To define a tree widget hierarchy for your interface, use the Tree Editor, shown in the following figure. This dialog allows you to define tree nodes and folders, menus, menu items, submenu titles, and submenus, and all their associated event procedures.

To create a tree hierarchy, do the following:

  1. Add a tree widget to your interface, right-click on the widget, and choose Edit Tree. A new tree widget is created, beginning with the root node of the tree.
  2. Click Insert to add a node to the tree. Nodes are added as leaf nodes below whichever node is currently selected. Inserting a node below an existing leaf node turns the existing leaf node into a branch node (that is, a folder). You can also turn a leaf node into a branch node by selecting the node and clicking the Folder checkbox.
  3. Modify the Caption and Name fields for each node as desired. The value of the Caption field will be come the VALUE of the tree widget; this string is used as the text label when the widget is displayed. The value of the Name field will become the variable name of the variable that holds the tree widget's widget ID.
  4. To delete a node from the hierarchy, select the node and click Delete. Any nodes or that have the selected node as their parent will also be deleted.
  5. Expand and collapse nodes within the editor by clicking on the plus and minus symbols to the left of the branch nodes.
  6. Rearrange the nodes and branches as desired by dragging and dropping the nodes' captions or icons.
  7. Click OK to save your changes to the tree widget hierarchy, or Cancel to abandon your changes.
Categories | Alphabetical | Classes | All Contents | [ < ] | [ > ]