 |
GUI Builder User Guide |
 |
|
The GUI Builder is an application used to create user interfaces. The GUI
Builder contains many of the standard user interface widgets, such as buttons,
checkboxes and dialogs. After you create the interface, GUI Builder will
generate the code which can be edited in Komodo.
The GUI Builder is invoked from within Komodo by using one of the following
methods:
- Project Manager pane: right-click a project and select
Add Dialog.
- Project menu: click a project in the Project Manager pane,
then select Project | Add to Project | Add Dialog.
- Toolbox pane: right-click in the Toolbox pane and select
Add Dialog.
You will be prompted to provide a name for the project file. This project
file has the extension ".ui", and will be automatically added to the Komodo
Project or to the Toolbox, depending on the location where the dialog command
was invoked.
Next, you will be prompted to specify the target language. When code is
generated by the GUI Builder and displayed in the Komodo editor pane,
it will be generated in the language specified here.
For more information about using GUI Builder from within Komodo, see "Using
the GUI Builder" in the Komodo User Guide.
Top
Quick Overview
- To open GUI Builder, right-click a project in Komodo and select Add
Dialog.
- Add rows and columns by double-clicking grid lines.
- Resize cells by dragging the grid lines.
- Drag and drop widgets from the Widget Palette to a cell in the workspace.
- Double click widgets in the workspace to configure their properties.
- Click the green arrow on the Toolbar to test the interface.
- Save the GUI to create the files in Komodo.
Top
The Workspace is used to design the GUI. This section discusses manipulation
of the workspace grid; see Widgets for a description
of adding, deleting and configuring widgets.
The selected cell is indicated by the column and row handles at the top
and the left of the workspace (respectively). When a cell is selected, the
column and row handles are displayed in blue. When a single column or row handle
is selected, it will be displayed in red. Use the
Application Preferences to set color and
size preferences for the workspace.
Usage
- Add a Row or Column: click on a grid line and press the
Insert key. Alternatively, double-click the grid line.
- Add a Row and Column: click in a grid cell and press the
Insert key.
- Select a Row or Column: click on a grid line. The grid
line will change color according to the Selection Color
setting in the Preferences.
- Select a Row and Column: click in a grid cell. The
column and row handles will change color according to the
Selection Color setting in the
Preferences.
- Delete a Row or Column: click on a grid line and press the
Delete key. Rows and columns cannot be deleted if they
contain a widget.
- Delete a Row and Column: click in a grid cell and press the
Delete key. Rows and columns cannot be deleted if they
contain a widget.
- Configure Row and Column Size, Weight and Widget Padding:
click in a grid cell and select Edit | Row & Column
Properties. Use this dialog to change size, weight and padding
around widgets.
- Resize Row or Column: click and drag a grid line.
Top
The toolbar contains buttons for the most common widget configuration
options. Select the widget in the grid before changing widget properties.
From left to right, the tools are:
 |
Save file |
 |
Widget text |
 |
Widget text size |
 |
Widget text bold and italic |
 |
Widget text alignment |
 |
Widget foreground and background color |
 |
Widget position in cell |
 |
Widget border and relief |
 |
Widget orientation (for the scrollbar widget) |
 |
Widget delete |
 |
Run or stop running interface |
Top
 |
Usage
- Drag widgets from the palette to a cell in the workspace.
- Use the toolbar buttons to
configure basic properties.
- Double click widgets in the workspace
to configure advanced properties.
- Double click widgets in Widget Palette to set default properties.
- To span rows or columns, point the mouse at the edge of
the widget and drag the widget resize handle when the mouse pointer
changes (grid lines spanned by the widget will disappear).
- To make widgets resizeable, click the column or row handle once to
select, then again to toggle the resizeable setting. When the arrows on
the handle point outwards, the widget will be resizeable. Note that this
characteristic only has an effect if the widget is configured to adhere
to two (or four) sides of the cell. (The scrollbar widget is resizeable
by default.)
- To attach scrollbars to widgets, first insert the desired widget and
scrollbar in the workspace. Then select the widget, and select
Commands | Attach Scrollbars. You will be prompted to
specify which scrollbars you wish to attach. Scrollbars can only be
attached to scrollable widgets.
|
Top
Properties vary according to the selected target language. Refer to the
Language tab in the GUI Builder Properties (Edit | Preferences)
to view the selected target language.
- To change the properties of an individual widget, double click the
widget in the workspace.
- To change the default properties for a widget, double click the widget
in the Widget Palette.
Property Reference
Top
Usage
- Help messages are displayed if Show Statusbar Help is
checked in the Preferences (Edit | Preferences).
- Help messages are displayed for the object under the current cursor
position.
- The status bar displays warnings, progress messages and diagnostics.
- When dragging a widget or resize handle, the status bar displays the
grid position or size.
Top
- Insert on widget dropped on gridline: If this option is
enabled, a row or column will be automatically inserted when you drop a
widget on a grid line. If this option is not enabled, the GUI Builder will
ignore widgets dropped on grid lines.
- Confirm saves before Test: If this option is enabled,
you will be prompted to save changed files before you can
test the application.
- Confirm widget delete: If this option is enabled, you
will be prompted to confirm that you want to delete a widget in the
workspace.
- Autosave on quit: If this option is enabled, changed
files will be automatically saved. Otherwise, you will be prompted to save
changed files.
- Mouse Gravity: This setting determines how far the mouse
pointer must move to invoke the action. Set the value lower to make the mouse
more responsive, and higher to give the mouse more tolerance.
- Show Tooltips: If this option is enabled, yellow pop-up
hints will be displayed when you hover the mouse pointer over an object.
- Show Statusbar Help: If this option is enabled, usage
tips will be displayed in the bottom right corner of the GUI Builder window.
- Selection Color: When a widget or grid line is selected
(by clicking on it), it will be outlined in the color specified here.
- Grid Background: This setting specifies the color of
grid background.
- Active Over Color: When you hover the mouse pointer over
a grid line, the line will change to the color specified here.
- Frame Background: Set the color for the background
of the frame widget.
- Show Grid Lines: If this option is enabled, grid lines
will be displayed. Otherwise they will not.
- Grid Line Thickness: Set the thickness of the grid line.
- Default Grid Spacing: When you create a new GUI, cells
will be created by default with the pixel size specified here.
- Control Points Size: Set the size of the Widget Resize
Handles.
Specify the language that should be generated by the GUI Builder.
Top
Usage
- To run the application, click the green arrow on the
Toolbar, or select
Commands | Start Test.
- To stop a running application, click the red stop box on the
Toolbar, or select
Commands | Stop Test.
Top
When you save the GUI in the GUI Builder, corresponding dialog project and
language files will be created in Komodo, either in the Project or the Toolbox,
depending on where the New Dialog command was invoked. These
files will conform to the following convention:
- Dialog.ui Project File: the name you specified
for the dialog will be suffixed with ".ui". This dialog project file will
contain two files:
- Dialog.language: edit this file to add
functionality to widgets.
- Dialog_ui.language: this file is automatically
generated by the GUI Builder, and should not be modified.
To display the code in the Komodo editor, select Commands | View
Code. Alternatively, in Komodo, open the Dialog.language file
beneath the dialog project.
Refer to "Using the GUI Builder" in the Komodo User Guide for more
information.
Top