IDL GUIBuilder Tools

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

The IDL GUIBuilder Toolbar, which you use to create the widgets that make up your interface. See Using the IDL GUIBuilder Toolbar and Widget Operations.

The Widget Properties dialog, which you use to set widget attributes and event properties. See Using the Properties Dialog and Widget Properties.

The Widget Browser, which you can use to see the widget hierarchy and to modify certain aspects of the widgets in your application. See Using the Widget Browser.

The Menu Editor, which you use to define menus to top-level bases and buttons. See Using the Menu Editor.

The Bitmap Editor, which you use to create or modify bitmap images to be displayed on button widgets. See Using the Bitmap Editor.

The IDLDE to modify, compile, and run the generated code (see The IDL Development Environment.

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.


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.

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.

Click on the appropriate button on the toolbar, then drag out an area within the top-level base widget. When you release the mouse button, a widget the size of the dragged-out area is created.

Click on the appropriate button on the toolbar, then click within the top-level base area. This creates a widget of the default size.

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

Right-click on the widget in the IDL GUIBuilder window, and choose Properties from the menu.

Select the widget, and choose Properties from the Edit menu.

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.

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:

Click the push pin again, and the dialog will close when it loses focus.

Press Escape while the dialog has focus.

Click the X in the upper right corner of the dialog.

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:

The Name attribute

An alphabetical list of common and widget-specific properties, combined

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.

Type in a string, then press Control+Enter at the end of each line.

Type in a string, then press Control+j at the end of each line.

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.

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.

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:

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.

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

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

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.

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.

To define another top-level menu or menu item, enter the information, click the left arrow until the indentation is appropriate, and click Insert.

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

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

To move a menu item to a new position: Select the menu item, click the up or down arrow on the right side of the dialog until the menu item is in the desired position, then click OK.

To add a menu item in the middle of existing menu items: Select the line you want the new item to follow, then click Insert. This adds a new line, for which you can enter a Menu Caption and Event Procedure.

To make a menu item display disabled initially: Click the Enabled checkbox (to uncheck it). All menu items are enabled by default.

To enable the ability to place a check or selection box next to the menu item: Click the Checked checkbox. (Checkmarks are placed next to menu items via the SET_BUTTON keyword to WIDGET_CONTROL in the event handling routine.)

To delete a menu item: Select the item, then click Delete.

To delete a menu: Delete each contained menu item, then delete the top-level menu.

Adding Menus to Buttons

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

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.

Right-click on the button and choose Properties to open the Properties dialog.

In the Properties dialog, change the value of the Type attribute to Menu.

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

Label

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.

Immediately after creating the menu (after clicking OK in the Menu Editor), click on the button, and the button menus will be displayed.

At any other time, right-click on the button, and then choose Show Menu.

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:

Placing a Color Bitmap on a Button

Right-click on the button widget, and choose Properties from the menu, which opens the Properties dialog for this button.

In the Type field, select Bitmap from the droplist.

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

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.

To select the left mouse button color: Left-click on the color in the color selection area.

To select a right mouse button color: Right-click on the color in the color selection area.

To use the left color: With a tool selected, click or press and drag the right mouse button on the bitmap canvas.

To use the right color: With a tool selected, click or press and drag the left mouse button on the bitmap canvas.

To change the size of the bitmap: Drag the bitmap canvas to the desired size.

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.

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.

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.

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.

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.

Expand and collapse nodes within the editor by clicking on the plus and minus symbols to the left of the branch nodes.

Rearrange the nodes and branches as desired by dragging and dropping the nodes' captions or icons.

Click OK to save your changes to the tree widget hierarchy, or Cancel to abandon your changes.