Design mode

Introduction
Adding a Widget to a Form
Binding the Widget to the required Field(s)
Positioning the Widget
Adding new Fields
Customising Widget display settings
Saving a Form

Introduction

Design mode is where you add the required Widgets to the Form, bind the Widgets to the required Fields and define the layout of the Form. You do not see live data in Design Mode.

A Form, like a painting, starts with a blank canvas. You make your Form beautiful by adding Widgets to it just like the artist adds paint to his canvas. A Widget occupies a rectangular portion of the Form, and has complete control over how its data is displayed within that rectangle. Design mode is the place where this is done. In contrast in Browse mode you view your actual data with the results of your handicraft, but have much less abilty to change the design aspects of the Form. You switch between Design and Browse modes by using the toggle buttons on the left hand side of the Form toolbar.

In Design Mode the main activity is to do these 3 steps for each Widget:

Add the Widget to the Form.
Bind a Field or some Fields to the Widget so it knows what data to display.
Position the Widget on the Form to align with other Widgets.

This needs to be done for each Widget you want to use. You can quickly switch betweeen Design and Browse mode to see the fruits of you labour as you progress.

Adding a Widget to a Form

In the toolbar:

you will find icons for each of the Widget types (consult the Widget documentation for details about each Widget). Add the required Widget to its approximate location on the Form using one of these methods:

Dragging the icon from the toolbar to the location on the form.
Selecting the appropriate widget and clicking on the location on the form. You can de-select the widget by clicking on the Select tool to the left of the widget icons.
Right click on the location on the form and selecting the appropriate widget from the popup menu.

Once placed on the form the bind step will commence.

Hint: You can drop a new widget onto an existing one and the new one will be added in the next available space under the target, and will have the same width as the target. This provides a quick way to create a set of widgets that are "stacked" as a column.

Hint: If you use the "select and point" approach then you can hold down the Shift key when you click and the current widget will remain selected as the current tool allowing you to immediately add another of the same type.

Binding the Widget to the required Field(s)

The bind dialog is invoked by adding and Widget onto a Form.

The bind dialog lets you specify the Field(s) that the Widget uses to display its data. Some Widgets require a single Field, others can take multiple Fields.

To bind a single Field: Select the Field from the list and click on the 'Bind' Button. The field can be from any Entity in the Data Tree, but see the section in the Browse mode documentation for how this Field/Widget combination will respond to navigation and selection. The Fields that are presented in the Bind Dialog are limited to those compatible with the Widget type. If there is only a single Field that is compatible with the Widget it will be automatically bound, but you will be notified of this. If no Fields are compatible then you will be presented with a warning message. A Field can be bound to mulitple Widgets. Usually this has little purpose, but it can be useful in some circumstances e.g. to present a structure in 2D and 3D represenations.

To bind multiple Fields: Widgets can display data from multiple fields. Currently the only Widget that does so is the Table Widget, but it is expected that many new Widget types will evolve that use multiple Fields. The same bind dialog is displayed but multiple Fields can be selected (use Shift-click and Ctrl-click to multi-select) and all the Fields from a single Entity can be selected by selecting the Entity.

Positioning the Widget

A Widget can be re-sized by selecting it and then dragging on its 'handles', the small squares that define its outline. It can be re-sized north, south, east, west, north-east, south-east, south-west and north-west by dragging on the appropriate handle. When the mouse is over one of the design handles the cursor changes to indicate that it will be re-sized.

A Widget can be re-positioned by selecting it and then dragging it to its new location.

When re-sizing or re-positioning a Widget the re-sizing or re-positioning can use the 'snap to edge' feature of the Form builder. This means that whenever the edge of an existing Widget (or the west or north edge of the Form) is encountered the re-sizing or re-positioning offers to snap to that location. This is indicated by the dashed blue 'snap lines'. If you release the mouse when the 'snap lines' are showing the Widget will be re-sized or re-positioned to that exact location. This lets you very precisely design Forms that have all their Widgets aligned horizontally or vertically, and allows truly beautiful Forms to be designed!

Adding new Fields

The previous sections have covered how to add a Widget for an existing Field to a Form. Sometimes you might need to create a new field that can be added to a Form. This could either be a Standard Field into which you enter data, or a Chemical Terms Field which will automatically calculate or predict a property for all the structures in a JChem table.

Adding a new Field to a Form is currently a 2 stage process. To add a new Field to a Form:

Click in the new Field icons in the Design mode toolbar. The new Field wizard for the type of Field will open. See the Adding New Fields or the Adding Chemical Terms Fields documentation for more details.
Once the Field has been added to the database you can add and bind a Widget to the Form as you would normally.

Customising Widget display setings

Many Widgets have display settings that can be customised. You can do this in design mode by double clicking on the Widget to open the settings editor.

Saving a Form

All changes are automaticaly saved to the Database. You need do nothing to save your changes.