Komodo Tour

 

Table of Contents

Part 6: GUI Builder

If you have Komodo Professional, you can create dialogs using the GUI Builder.

In the sixth part of the tutorial you will:

Adding a New Dialog to the Projects Tab

The first step in creating an application using the GUI Builder is adding a new dialog (.ui) file.

  1. On the Projects tab, click the plus sign next to the "Web Services" folder to expand it.
  2. View Example

  3. Right-click the Web Services folder, and select Add|New Dialog.

    View Example

    A dialog box will be displayed, prompting you to name the file.
  4. Name the file "Get_Quote.ui", and save it in the same directory as the Komodo Tour project file. A dialog box will appear, prompting you to choose a language for the new dialog. Select Perl/Tk (8.0), and click OK.

    View Example

    The new file will be added to the Web Services folder, and the GUI Builder application will launch.
  5. View Example

Top

Creating and Testing a New Dialog with the GUI Builder

The ActiveState GUI Builder is comprised of a central workspace, a widget bar, a properties toolbar, and drop-down menus. It is tightly integrated with Komodo to permit round-trip development; once you have created the interface, you can use Komodo's editor to add functionality in the form of code. Next, you will use the GUI Builder to create a basic user interface for the Stock Quote application. A widget is added to the workspace by clicking it on the widget bar, and then dragging it onto the desired workspace pane.

  1. Add an entry widget to the top left pane, a label widget to the bottom left pane, and a button widget to the top right pane.
  2. View Example

  3. In the workspace, click to select the label widget. Then delete "label" from the Text field on the toolbar. Select "14" from the font size drop-down list, and click the "B" button to set the font style as bold.
  4. View Example

  5. Click the toolbar button that determines the widget's position in a pane, and select the cell in the bottom right corner (click the link below for visual guidance).
  6. View Example

  7. Position the mouse pointer at the right edge of the pane containing the label widget. The mouse pointer will change to an arrow pointing toward a vertical line. Click and drag the edge of that pane to the right until the two bottom frames merge.
  8. View Example

  9. Click the button in the top right pane to select it, then double-click the button. A Properties dialog box will be displayed.
  10. View Example

  11. In the Text field, change the entry to "Get Quote".
  12. In the Command field, enter:

    \&GetQuote

    Note: Because the above function is predefined in the Stock Quote Code snippet created earlier in this tour, it is essential that you enter it exactly as shown above.


  13. Click OK to save the new settings.
  14. Test the new dialog by selecting Commands|Start Test. Although you have yet to add any functionality, you will be able to preview the interface elements.
  15. View Example

  16. Click "x" to close the dialog and end the test.
Top

Add Code to the Dialog

Double-click the Get_Quote.pl file, located beneath the Get_Quote.ui GUI Builder project. This file stores the functional code for the program.

The user code section is indicated by a comment on line 18 ("# BEGIN USER CODE"). Regardless of whether or not you subsequently edit the dialog using the GUI Builder, code in this section will be preserved.

Position the editing cursor on line 20 and press Alt + S (this was the key binding assigned to the Stock Quote Code snippet in the Toolbox section of the tutorial). The code contained in the snippet will be inserted into Get_Quote.pl.

View Example


Top Previous Next