GUI Builder

GUI Builder is the part of AggreGate Client that is used to edit widget templates or build widgets from scratch.

Main Window

GUI Builder always opens in a separate window:

The main window has several primary components:

Most components in GUI Builder are implemented as dockable panes and may be removed, resized, docked/undocked, put into tabs etc. For more information, see Customizing Dockable Panes.

Main Menu

There are two menus in GUI Builder: File and View.

File Menu

View Menu

Items in this menu may be enabled or disabled. They are used to show or hide different parts of GUI Builder.

Help Menu

Toolbar

Provides quick access to commonly used operations:

Work Form

The work form is used to preview widget layout during construction and editing. This is the main part of the GUI Builder window.

The work form always displays the core container of a widget - its root panel. If is contains any child components or containers, the entire hierarchy is shown in the work form. In other words, when cell decorations are disabled, the widget in the work form closely resembles what it'll look like when actually running in AggreGate Client.

You can put new components on the work form, move components within current container or to other containers, resize components and change their margins, create new bindings etc. See editing widget layout for details.

Here is what the work form looks like when editing a widget template:

Components in GUI Builder look similar to what they'll look like when the widget is executed in AggreGate Client, with some differences:

1. Most user input is ignored (e.g. buttons are not visually "pressed" when user clicks on them).

2. If Toggle Decorations button (see below) is pressed all containers have borders showing their titles:

3. Empty cells in a Grid Layout are visually represented by white bordered rectangles.

Cell Decorations

When a cell of a Grid Layout is shown in a work form, it may have additional decorations. These decoration make it easier to edit the layout, but make the widget appear different then what it looks like during normal execution. You can toggle them using the Toggle Decorations button in GUI Builder toolbar.

Additional visible elements shown when decorations are enabled:

Here is what the same panel with grid layout looks like, with and without decorations:

Without decorations:

With decorations:

In the Absolute Layout, every component is decorated by a border helping to view its margins:

Resource Window

The resource window contains a tree of widget components and other objects (i.e. Button Groups). The root panel forms the root node of the tree. Normal components and containers are shown as nodes with different icons. Components held by a container or a pane (i.e. in the case of a Layered Panel) are shown as its child nodes.

The resource tree may be used for selecting components and panes of multi-pane containers. When a component or pane is selected in the resource window, it is also selected in the work form. Its properties are shown in the Component Properties Window.

Context Menu Of A Resource Tree Node

The context menu for a resource has the following operations:

Copy. Copy the reference to the widget component to the clipboard as a string. This reference may later be inserted in the binding.

Rename. This is the only way to change the name of a component, container or pane. The name is used to refer to the component in bindings.

Delete. Permanently delete the selected node (container, component or pane). The context menu for a node may also contain some component-specific operations. For example, the context menu for a Tabbed Panel node contains an Add Tab item. Similarly, the Button Groups node has an Add Button Group operation.

Clone. Make a copy of the component.

If selected node is a container, its context menu also has a Create submenu used to create a new widget component in this container.

Drag-and-Drop Operations

The resource tree supports the following Drag-and-Drop operations:

Entity Selector Window

The entity selector window lets you browse the LinkServer context tree and see all available variables and functions with their fields. The default context defined during widget editing and all its children are marked in bold.

The entity selector is mostly used for creating new bindings. See creating bindings for details.

Component Palette

The component palette is used to add new components to the widget layout by dragging and dropping them on the work form or on a container in the resource window. The palette has two tabs:

See the editing widget layout section for more information on how to use component palette to add new components to the widget layout.

Component Properties Window

This window contains a properties editor used to change the properties of the currently selected component.

When properties are changed, changes are saved immediately. There's usually no need to click the Save button in the Properties Editor toolbar.

Properties Editor article has more information on using the Properties Editor. Component properties are described in the component reference.

Editing Widget Layout

Editing Grid Layout

You can use Drag-and-Drop to add new components from the component palette or to move and resize components already laid out on the work form.

A component may be dropped...

1. Dropping on an empty cell

When a component is dragged onto the work form and the mouse hovers over an empty cell (one marked with a white background, if decorations are enabled), the cell is highlighted in blue:

Dropped here, the component will occupy the empty cell.

2. Dropping over an existing component

You can drag an existing component from its location on the form and drop it onto another component. The two will swap places, even if they are located in different containers. This obviously doesn't work with new components dragged from the palette.

The third and fourth aforementioned methods work similarly. The component being dragged is dropped inside a cell already occupied by some component, but not directly over the component. Each cell occupied by some component (label1 in the following picture) has 16 available drop locations:

Dropping the component over one of the first eight locations (illustrated in yellow in the example above) puts it into a new row and/or column of the layout grid. More on this in the description for method 3, below.

Dropping the component over locations 9-16 (green, above), creates a new Panel container in the cell occupied by label1. This panel will now hold two components: label1 and the component that was dropped. More on this below, in the description of method 4.

3. Dropping on locations 1-8

If the component is dropped on the locations 1-8 (shown in the image above), it will be put in the layout grid of label1's container (the root panel, in our example). A new row and/or column will be created in the layout grid to hold the dropped component. When the mouse hovers over the 1-8 drop locations, "ghost" frames are shown to help visualize where the new row and/or column will be located. Here is what it looks like when the mouse is held over location 5:

If we now drop the new component, a new column will be created to the right of label1:

Hovering over location 8 shows the following "ghost" frames:

In the above case, the new component will be placed on a new row and column created to the bottom and to the right of label1. As a side-effect, two empty cells will be created:

This is what the "ghost" frames look like in a more complicated layout:

This is what this layout looks like once the component is dropped:

4. Dropping on locations 9-16

Dropping on these locations creates new a Panel in the cell. This panel will then contain two components: label1 and the component dropped. Their relative positions in the new panel will depend on where the new component is dropped. "Ghost" frames are also shown when the mouse hovers over these locations while dragging. Here is the "ghost" frame for location 13:

If the component is dropped on this location, a new panel will be created, containing two cells in one row:

For location 16, "ghost" frames show that the new panel will contain four cells. label1 will be placed in row 1, column 1, while the dropped component will be placed in row 2, column 2:

Here is what the new panel will look like:

Resizing COMPONENTS and editing THEIR margins

When a component is selected in the work form, it has a blue dashed border with blue and green dots used to resize it or edit its Grid Layout margins:

To resize the component, drag the blue dots. To change its margins, drag the green dots. When margins are set to non-zero values, they are drawn as green dashed rectangles around the component:

Editing Absolute Layout

Editing an absolute layout is much easier than editing grid layout. Move the components using the mouse, and their X and Y Coordinates will be updated properly. Use keyboard arrow keys for precision moving.

It is possible to resize any selected component using the mouse. Simultaneous moving/resizing of multiple selected components is also supported.

Creating Bindings

GUI Builder helps create widget bindings using intuitive drag and drop operations: You can drag a node from the Entity Selector onto a component or container in the Work Form or in the Resource Window.

PREVIEW OF BINDINGS TO BE CREATED

When a node is dragged from the entity selector onto the work form and the mouse is held over a form component, bindings that will be created if the component is dropped are shown in a red tooltip. The left part of the binding (before the "=" character) is binding target, while the right part is the binding expression:

If the node is then dropped onto the component, the bindings created are shown in the popup window:

Drag and Drop Operations Between Entity Selector and Work Form

1. Dragging a variable field and dropping it on a component

In this case, two bindings are created:

2. Dragging a function input field and dropping it on a component

This operation creates one binding. Its target is a function's input field. Its expression is a reference to the default property of widget component. Its Activator is the root panel's submit event.

3. Dragging a function output field and dropping it on a component

This operation also creates a single binding with a target pointing to a property of the component. The binding expression is a reference pointing to the output field of the function. Activator of this binding is submit event of the root panel.

4. Dragging a variable to the Data Table Editor component

This operation creates three bindings:

5. Dragging a function to a Button component

This operation does not actually create new bindings. Instead, it finds all widget bindings:

and sets their activators to the action event of the button component. This makes them working together within one bindings processing session that is started upon button click (when action event is fired).

If a widget has no bindings related to the input or output fields of the dragged function, this drag and drop operation won't be allowed.

6. Dragging a variable field to a button group

This operation creates three bindings, which let you use the buttons in the group to change the field's value:

If the field has selection values, this operation also changes the Value property of all radio buttons that belong to the group to the available selection values. If you have 5 selection values (for example) yet only 3 radio buttons, only the first 3 values will be used - no error will be shown.

7. Dragging a variable field to Combo Box or List

This creates the same bindings as in 1 above (Dragging A Variable Field And Dropping It On A Component), but adds an extra binding whose purpose is to display the selection values defined by the field format in the combo box or list.

8. Dragging a Device Context and dropping it to any container

This drag and drop operation created a new Device component in the target container. The new component will have labels showing basic status of the dropped Device. It will also have a pre-defined Status Table configured to indicate current device connection status (Online, Offline or Suspended).

A binding linking server-side device status to the Status parameter of device component is also created.