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:
The first step in creating an application using the
GUI Builder is adding
a new dialog (.ui) file.
- On the Projects tab, click the plus sign next to the "Web Services" folder to
expand it.
View
Example
- 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.
- 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.
View
Example
Top
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.
- 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.
View
Example
- 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.
View
Example
- 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).
View
Example
- 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.
View
Example
- Click the button in the top right pane to select it, then double-click the
button. A Properties dialog box will be displayed.
View
Example
- In the Text field, change the entry to "Get Quote".
- 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.
- Click OK to save the new settings.
- 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.
View
Example
- Click "x" to close the dialog and end the test.
Top
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
|