Designer - Revision history

Administrator at 12:41, 22 February 2014

2014-02-22T12:41:05Z

Gareth: 6 revisions

2014-02-22T12:30:36Z

6 revisions

Administrator: /* Property panel */

2014-02-21T08:09:12Z

‎Property panel

Administrator: /* Property panel */

2014-02-21T07:53:16Z

‎Property panel

Administrator at 07:52, 21 February 2014

2014-02-21T07:52:02Z

Administrator at 07:43, 21 February 2014

2014-02-21T07:43:53Z

Administrator at 07:31, 21 February 2014

2014-02-21T07:31:18Z

Administrator: Created page with "Welcome to the designer. Here you create the pages in your application, giving them their appearance and functionality. On the left hand side of the screen is the control pa..."

2014-02-21T07:30:45Z

Created page with "Welcome to the designer. Here you create the pages in your application, giving them their appearance and functionality. On the left hand side of the screen is the control pa..."

New page

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

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''' saves the current page
- '''view page''' closes the designer and shows the current page as a running application
- '''Controls'''

@@ Line 1: / Line 1: @@
 Welcome to the designer. Here you create the pages in your application, giving them their appearance and functionality.
-=Control panel=
+==Control panel==
 On the left hand side of the screen is the control panel. It contains the following:

← Older revision		Revision as of 08:09, 21 February 2014
Line 36:		Line 36:

	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 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.

← Older revision		Revision as of 07:53, 21 February 2014
Line 35:		Line 35:
	Once a control is selected the property panel will appear on the right hand side of the screen.		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 child control. The left button and right buttons will select the next control which is a peer of ~~the current control, either before or after~~ 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 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.

@@ Line 1: / Line 1: @@
 Welcome to the designer. Here you create the pages in your application, giving them their appearance and functionality.
-/*Control panel*/
+=Control panel=
 On the left hand side of the screen is the control panel. It contains the following:
@@ Line 31: / Line 31: @@
 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*/
+==Property panel==

@@ Line 1: / Line 1: @@
 Welcome to the designer. Here you create the pages in your application, giving them their appearance and functionality.
 On the left hand side of the screen is the control panel. It contains the following:
@@ Line 17: / Line 19: @@
 - '''redo''' button, reinstate changes after an undo
-- '''save page''' saves the current page
+- '''save page''' button, saves the current page
-- '''view page''' closes the designer and shows the current page as a running application
+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.
-- '''Controls'''
+/*Property panel*/

@@ Line 4: / Line 4: @@
 - '''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''' saves the current page
 - '''view page''' closes the designer and shows the current page as a running application
 - '''Controls'''