Tcl Tutorial

 

Table of Contents

Editing the GUI

Once you have created a GUI Builder project, you can make changes by editing the project file. You can use GUI Builder features to add or remove widgets, or to modify the properties of existing widgets.

Opening a GUI Builder Project

GUI builder projects are stored with Komodo Project files and carry a ".ui" file extension. The project file used in this tutorial is dlg_tcl_check.ui. To open the project:

  1. Open the Komodo Sample Project, if it is not already open.
  2. On the Projects tab, right-click dlg_tcl_check.ui, and select Edit Dialog. The GUI Builder application will launch, and the dialog will be displayed in the GUI Builder workspace.
Top

Viewing Project Properties

When you create a new GUI Builder project, you are prompted to specify a target language and version. Different widgets sets are displayed on the Widget Palette, depending on the language and version you select. You can view properties of a project by selecting Project Settings from the GUI Builder's File menu.

View Example

Top

Adding Widgets to a Dialog

Widgets are added to a dialog from the Palette tab or the Menu tab. In this step, you'll add label widgets to the GUI.

  1. On the Palette tab, click the label widget.
  2. Click in the cell in the first column of the fifth row. The label widget will be added.
  3. On the Palette tab, click the label widget again.
  4. Click in the cell in the third column of the fifth row. Another label widget will be added.

View Example

Top

Resizing Widgets

Resizing widgets can involve spanning multiple columns and / or rows, or changing column or row width or height. To resize the label widgets:

  1. Click the label widget in the first column.
  2. Position the mouse pointer at the right of the label such that the pointer changes to an arrow pointing toward a line, and then drag to the right to expand the label widget across two cells.
  3. Repeat for the frame widget in the third column.

View Example

Top

Editing Widget Properties

Widget properties define the display characteristics of individual widgets. Common widget properties are accessible on the GUI Builder toolbar; the complete set of properties is accessible by double-clicking the widget.

  1. Click the label widget that spans the first two columns. In the Text field on the toolbar, enter "Now Playing:", and click the "B" (Bold) button to the right.
  2. Double click the label widget that spans the last two columns. Remove the contents of the -text field. (This is the same as clearing the contents in the Text field on the toolbar.) Notice that the value of the -text field is, by default, the same as the name of the widget (as shown in the field at the top of the properties page). The widget name itself is used in the callback code you will add in the next step.

View Example

Top

Build the GUI

Use the GUI Builder's test feature to generate output. This allows you to preview the user interface you have created to see if it displays as intended.

To build the project, select Commands|Start Test, or click the green button on the GUI Builder toolbar. You will be prompted to save the project before the dialog will be displayed.

View Example


Top Previous Next