GUI Builder User Guide

Welcome to GUI Builder

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.

Invoking the GUI Builder

The GUI Builder is invoked from within Komodo by using one of the following methods:

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

GUI Builder Overview

Quick Overview

Top

Workspace

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

Top

Toolbar

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

Widgets

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

Widget Properties

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.

Property Reference

Top

Status Bar

Usage

Top

GUI Builder Preferences

General Preferences

Appearance Preferences

Language Preferences

Specify the language that should be generated by the GUI Builder.

Top

Testing the GUI

Usage



Top

Using the GUI

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:

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