Difference between revisions of "Canvas Designer"
Yvonne.milne (Talk | contribs) (→See Also) |
Barrymavin (Talk | contribs) (→Drag and Drop Columns) |
||
| Line 21: | Line 21: | ||
==Drag and Drop Columns== | ==Drag and Drop Columns== | ||
| − | Add automatically data-bound controls to your Canvas Section using drag and drop. | + | Add automatically data-bound UI controls to your Canvas Section using drag and drop. |
If the [[App Inspector]] is open, select the [[Pages Files Tab]]. | If the [[App Inspector]] is open, select the [[Pages Files Tab]]. | ||
Revision as of 13:09, 20 December 2017
Contents
Overview
Canvas Sections allow highly customized layouts with a wide range of advanced containers and controls.
The Canvas Designer is a drag-and-drop editor providing pixel-perfect positioning of UI Controls In a Canvas Section.
Using the Canvas Designer you can drag-and-drop table columns to create UI Controls that are automatically data-bound.
Adding a Canvas Section
To add a Canvas Section to a Page, select Canvas from the Sections menu in the Form Tools.
Drag on the blue handle at the bottom of the section to resize it.
To make your Canvas Section fill the whole Page, set the Page Stretch last section attribute to true.
Drag and Drop Columns
Add automatically data-bound UI controls to your Canvas Section using drag and drop.
If the App Inspector is open, select the Pages Files Tab.
Make sure the Tables tab is selected.
Click on its name to select a table from the Table Names panel.
Then just drag a column from the Column Names tab and drop it where you want it to be positioned in the Canvas Section.
The Pages Files Tab stays selected as you drag and drop the columns and fine-tune the position of the controls.
To edit the control's attributes, select the Attributes Tab in the App Inspector (if the App Inspector is closed, double-click on the control's caption to open the Attributes dialog).
Canvas Sections have the following attributes (in the 'Other Options' category from v4.1):
- Snap objects to grid: When adding objects to the canvas, snap to grid when drop.
- Snap objects to grid size: Number of pixels to snap to grid when drop.
Advanced Canvas Controls
Advanced Canvas Controls from the Advanced menu in the Form Tools can also be added to Canvas Sections. They can be data-bound by setting their Data source attribute.
Click on a control in the Advanced menu to add it to the selected Canvas Section, then click on the control's border and drag it to reposition it.
| Control | Description |
|---|---|
| ActiveX | Control for embedded ActiveX component (Windows desktop) |
| CheckBox | Control for boolean state - True (checked) or False (unchecked) |
| ComboBox | Control combining a TextBox and a ListBox |
| CommandButton | Button control |
| Date TextBox | Control combining a date TextBox and a popup calendar |
| DateTime TextBox | Control combining a date/time TextBox and a popup calendar |
| EditBox | Editor control |
| Hyperlink | Hyperlink label control |
| Image | Control for displaying images |
| Label | Textual label control |
| LCDnumber | Numeric label control with LCD-like digits |
| ListBox | Control with a single column list |
| Numeric TextBox | Textbox control for numeric values |
| OptionButton | Control to select/deselect an option |
| OptionGroup | Container used to group OptionButtons |
| Progress Bar | Bar control for minimum, current (%) and maximum numeric values |
| Rich Text Editor | Rich text editor control |
| Separator | Separator label control |
| Slider | Vertical or horizontal numeric slider with minimum and maximum values |
| Spinner | Numeric TextBox control with increment/decrement controls |
| Subtitle | Subtitle label control |
| TextBox | Textbox control |
| TreeGrid | Tree grid control |
| WebView | Embedded WebKit Control |
To delete a Canvas Section control, click on the control's border to select it then press the Delete key
Text
The Text menu in the Form Tools allows you to change the Caption text size of Advanced Controls.
Select a control, or select multiple controls by pressing the Shift key while selecting then choose the size.
Format
The Format menu in the Form Tools allows you to change various appearance attributes of Advanced Controls.
For 'Same ...' options, select multiple controls by pressing the Shift key while selecting then choose an option to match the attribute(s) of all the selected controls to that of the first selected control.
For 'shading' options, select one or more controls, then choose the option.
'Transparency' options do not apply to Canvas Section controls.
Align
The Align menu in the Form Tools allows you to change the geometry attributes of Advanced Controls.
Select multiple controls by pressing the Shift key while selecting then choose an option to align or match the attribute(s) of all the selected controls to that of the first selected control.
The Align menu's Text submenu allows you to change the data text alignment of Advanced Controls.
Select one or more controls, then choose the alignment.
Disable Click Events
To make it easier to click on Advanced Canvas Controls to select them, the Headerbar has a toggle to enable and disable click events. Click events are enabled in the Page Builder by default, click the toggle to disable them so they do not fire when you click on a control. Click the toggle again to re-enable them.
See Also
Advanced Canvas Control Attributes, Advanced Canvas Control Custom Delegates, Canvas Section Attributes
