DriveWorks Pro 22

What's New Form Designer

Introduction

Form design has several new features for DriveWorks 10. Some of the new features provide additional functionality that give greater control when designing your user interface.

1. Control Tree - See all controls on all user forms in one place. Lock controls, drag controls to other forms, view z-order, view control type and more.
2. Label Formatting - Format individual strings of text applied to a label control.
3. Data Table Control - New control which pulls data from a data source and allows selection of a row on the user form.
4. Tooltips - Apply formatted text to appear as text on each control that requires tips for the user to see.

Control Tree

All controls that have been added to a project can now be seen in the new Control Tree in the Form Designer.

The Control Tree provides a single place for finding form controls and easily navigating to the form the control exists on.

Each control is listed under the form on which they appear, the list can be ordered by:

• Z-Index (Default order)
• Name
• Type

Order by Z-Index

The Z-Index specifies the stack order of a control on a user form.

Controls that appear higher in the list appear further back (behind) on the user form.

The Z-Index order allows easier organization of controls that overlap or that are placed over each other.

Click the Order by Z-Index button  to order the controls by the Z-Index.

Changing the Z-Index of a control

There are two methods by which the Z-Index of a control can be modified:

• Using the tools available at the top of the control tree window.

1. To do this select the control to be moved from the control tree.
2. Click the Bring Control Forward  or Send Control Back button

• Drag and Drop the control into position in the control tree.

1. To do this click and hold on the control to be moved and drag to its required z order position.

Order by Name

Each control can be ordered by the Name given to the control.

Click the Order By Name button  to order the controls in each form by the Name given to them.

Order by Type

Each control can be ordered by the type of control (Text Box, Combo Box, Label etc.)

Click the Order By Type button  to order the controls by their type.

Toggle design mode visibility

Design Mode Visibility allows a control to be hidden during design mode only. This is useful when controls are positioned on top of others and require to be turned off to allow easier selection of the controls behind.

Lock control position

Once the position of a control is determined its position can be locked to prevent accidental moving during Form Design.

Select the control to be locked and click the Toggle Locking Control Position button .

Collapse All

All forms that exist in the project can be quickly brought back into view by clicking the Collapse All button  to collapse the controls in view on each form.

Filter

Controls can be quickly found by using the filter box above the control tree.

Clearing the Filter

Once a filter has been applied it can be cleared by:

Or

Drag controls from one form to another.

If a control has been placed onto a form and now requires to be on another form it can be dragged from its existing form onto the new form all from within the Control Tree.

1. Expand the forms within the Control Tree so the control to be moved and the controls on the form it is to be moved to are in view.
2. Select the control to be moved and then left click and hold to drag.
3. Drag the control to the required form.

Label Formatting

The Label control now allows formatting to be included in the Text property.

To achieve the above example, prior to DriveWorks 10, multiple label controls would have to be placed next to each other. Each would have to be formatted individually using a mixture of existing control properties.

This can now be done in a single Label control.

The supported tags used for formatting label text are as follows:

• b - defines text that is to be bold.
• i - defines text that is to be italic.
• u - defines text that is to be underlined.
• color - defines text that is to be a specific color (requires the name or hexadecimal value of a color to be specified).

Label Formatting Syntax

Start Tag

To apply formatting the supported tag must be placed within the quotes of the text to display, at the point the formatting is to start and within square [] brackets.

• Bold tag - [b]
• Italic tag - [i]
• Underline tag - [u]

End Tag

An End Tag is only required if the formatting is to end before the end of the text to display. If no End Tag is specified all text from the point at which the Start Tag is placed will be formatted.

An End Tag begins with the forward slash /, followed by the tag all within square brackets [].

• Bold end tag - [/b]
• Italic end tag - [/i]
• Underline end tag - [/u]

Color Start Tag and Color End Tag

The color tag syntax is essentially the same as the above examples, the only difference being the Start Tag only will contain the color to apply to the formatted text, as below.

Start Tag [color green] - End Tag [/color]

Transparency

Transparency is supported for the [color] format tag.

This can be specified by setting an additional two hex characters before the hex color code, for example:

For the tag [color #22000000] - the “22” will apply an almost transparent black color to the text.

There is also support for setting a hex color using the shortened hex code, which is the three character version so #FFFFFF will be #FFF.

The three character version also supports transparency through the addition of one extra character before the color code, for example:

[color #22000000] is equivalent to [color #2000]

Unfortunately not all web browsers support transparency. IE7 and IE8 will not support transparency as they require certain CSS properties to be set that would affect text wrapping in the Label. In order to still provide text wrapping the decision was made to not support IE7 and IE8. If a transparency is added into the color tag when in one of these browsers the transparency part will be ignored and the color will be applied as normal.

Examples

Escaping Tags

There may be times where the tags used to format text are actually required to be displayed as text. In these circumstances escaping tags are used.

For example you may require the text “Enter [b] for bold” to be displayed. In this case you need to escape the “[“ character in order for it to be interpreted as a square bracket and not as part of a tag.

It is important to note that the end square bracket “]” is not an escape character and therefore does not need to be escaped in order to display it as text and not as part of the tag.

Whenever two opening square brackets “[[“ are together before a tag these can interpreted as a single opening square bracket as the first one will escape (ignore) the next one.

Text Wrapping Support

The default behavior of the Label is to allow text to wrap and in particular to have the ability to wrap text mid word.

For example:

Fig 1. Text wrapping in all browsers except Opera.

Fig 2. Text wrapping in Opera – with formatting.

Fig 3. Text wrapping in Opera – no formatting.

Data Table

The Data Table is a new control that allows selectable data, from a table or database, to be presented on a user form.

Using DriveWorks tables (Group tables or Define Tables in a project) or the QueryDataValues function an array of data can be passed into the Data Table Control.

This data can be viewed and a single selection made by the user.

Unwanted fields (columns) can be hidden from view using the Hidden Fields property.

Add a Data Table Control

With a project open in DriveWorks Administrator, select Stage 2: User Interface> Form Design and:

1. Select the form the Data Table control is to be added to from the Control Tree
2. Click the More... button from the command bar.



3. Select Data Table from the Controls dialog and click OK.



4. Enter a name for the control in the pop up window that appears and click OK.

Populate the Data Table with Data

The Items property is responsible for passing data into the Data Table control.

To populate the control with data, a direct reference to a Group Table or Project Table (Define Tables) can be made by using the Tables button in the Rule Builder, or the function QueryDataValues can be used.

Return the Selected Row

The Data Table control returns a number that is an index of the row that has been selected from the control on the user form.

The index number returned excludes the header row, so an index of 1 will be the first row after the header row.

The Selected Row Index value is reported to the return value of the control.

For example:

To return the Selected Row Index for a Data Table control named Data subsequent rules should reference the control property DataReturn.

Extract a Value from the Row of the Selected Row Index

As the Data Table reports a Row Index, there will be a need to extract a particular value from a column of that row.

This can be done by using the GetTableValue function.

For example:

The Data Table below is named Data, the data in the table is pulled from a Group Table named Customers.

The project requires the name of the Country, for the selected row, to be returned to a Variable.

For the variable this value is to be returned to the following rule is applied:

GetTableValue(DwLookupCustomers,DataReturn+1,5)

Where:

DwLookupCustomers is the full name for the Group Table Customers, that the Data Table control references.

DataReturn is the Selected Row Index number of the Data Table Control, not including the header row.

DataReturn+1 will give the true index position in the Group Table that the control references, including the header row.

5 is the column reference number for the item of data to be returned (Country column)

See Data Table for more information.

Tooltips

Each user form control, in DriveWorks 10, now has a Tooltip Text property.

This specifies the text to display in a tooltip when hovering over a control.

The text in the message can be formatted to alter the appearance of the text.

For example the following rule applied to the Tooltip Text property of a Text box control:

"Please enter a [i]height[/i] between [b][color red]1500[/b][/color] and [b][color red]3500[/b][/color]"

Will result in the tooltip shown in the image below:

More information on formatting examples can be found in the article Text Formatting.

In addition a Tooltip Duration property has also been implemented.

This controls the duration, in seconds, that the tooltip will remain visible for.

The Tooltip Duration property is a fixed property and cannot be driven by a rule.