Designer

Welcome to the designer. Here you create the pages in your application, giving them their appearance and functionality.

Control panel

On the left hand side of the screen is the control panel. It contains the following:

- Administration button, this will take you to the administration screen

- Application dropdown, use this to select the application you want to work on

- Page dropdown, this will default to the first page alphabetically by page name. Use this to select the page you want to work on

- new page button, add a new page. Note that page names are used to prefix page resource files such as .css files, and produce the order in the drop down, the page title will be shown to users and is the text in the dropdown

- edit page button, view and edit the properties of a page. Should you need to, use this to delete a page

- undo button, undo your most recent actions

- redo button, reinstate changes after an undo

- save page button, saves the current page

- view page button, closes the designer and shows the current page as a running application

- Controls items, drag these controls out from the control panel to place them in your page

New controls are added by dragging them out of the control panel. Existing controls can be selected with a click and then dragged to new positions. In either case you will see a blue border surrounding the current control and the control properties will appear on the right hand side.

As you drag a control around the page you will see left, right, or down arrows. Releasing the mouse when the left arrow is showing will place the currently selected control to the left of the control in which the arrow appears. A right arrow will place the current control to the right. A down arrow will place the currently selected control within the control in which the down appears.

It is worth noting that note all controls can dragged from their current positions. For example table cells cannot be dragged out of table rows, and table rows cannot be dragged out of their parent tables. Controls like the table cell, and panel can have child controls dragged into them. Controls like buttons and inputs cannot have children.

Property panel

Once a control is selected the property panel will appear on the right hand side of the screen.

The first row of buttons consisting of left, up, down, and right arrows is used to navigate around the control structure. As the controls are placed in a hierarchy this is a convenient way of, for example, selecting a child controls parent. This is done by using the up button. The down button will select the first available child control. The left button and right buttons will select the next control which is a peer of the current control. Depending on what control it is, the left button may select a control to the left, or above the current control. The right button may select a control to the right, or below the current control.

The second row of buttons allow you to swap the currently selected control with a peer to the left, add a new control of the same type as the selected control to the left, delete the control, add a new control of the same type as the selected control to the right, swap the currently selected control with a peer to the right.

The copy button will copy the currently selected control to the clipboard. The paste button will insert a new control from what was copied.

The top of the Properties table shows the type of control currently selected. Immediately below that appear the detailed properties available for the current control. These are different depending on the type of control currently selected. The name of the property appears in the left column. In the right column is the value of that property. Some properties, such as a grid's columns, are quite sophisticated. Clicking on the property value can produce a slide-out dialogue in which the property can be specified in detail.

Different types of control also have different events which can be fired based on user activity. For example a button control has a click event, and an input control has a keydown event. The available events appear underneath control property values.

To perform a specific action when a control event fires. Add the new action by selecting it from the "Add action" dropdown. You can specify the details of the action in much the same way as setting the control property values. Actions can be removed from events by using the bin icon.

Finally the Styles grid presents the style classes available for the control and you can add css styling.