Canvas Designer

From Lianjapedia
Jump to: navigation, search

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.

Bm-noteicon.png
Quick Start Guide

Select the "Pages" workspace.
Select the "Pages Files" in the App Inspector.
Select the "Tables" tab.
Click on its name to select a table from the Table Names panel.
Drag a column from the Column Names tab and drop it where you want it to be positioned in the Canvas Section.
Customize its appearance by editing its "Attributes" in the Attributes Tab.
Customize its behavior by editing its "Custom Delegates" in the "Attributes" Tab.

Adding a Canvas Section

To add a Canvas Section to a Page, select Canvas from the Sections menu in the Form Tools.

Adding a Canvas Section


Bm-noteicon.png
Pro Tip

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.

Bm-noteicon.png
Pro Tip

You can adjust the position of a UI control by selecting it and pressing the left, up, right, or down cursor keys
You can adjust the height of a UI control by selecting it and pressing the Shift+Up or Shift+Down cursor keys
You can adjust the width of a UI control by selecting it and pressing the Shift+Left or Shift+Right cursor keys
Select multiple controls by pressing the shift key while clicking on them


Adding Data-Bound Columns to a Canvas Section


Select a control then drag it to reposition it aided by the crosshairs, rulers and tooltip showing x, y coordinates, width x height and anchor values. (These aids from Lianja v4.1).

Fine-tune Control Position


Click the top left corner of the Canvas Section to toggle the display of the grid lines.

Toggle Grid


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

Bm-noteicon.png
Pro Tip

Canvas Sections have the following attributes (in the 'Other Options' category from v4.1):

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 as with the drag and drop fields above.

Canvas Section Advanced Controls


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

Options

Form Tools: Advanced->Options


Option Description
Send to back Send the selected control(s) to the back (for overlapping controls).
Bring to front Bring the selected control(s) to the front (for overlapping controls).
Enable/Disable click events See below.
Enable/Disable move events See below.
Bm-noteicon.png
Pro Tip

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.

Form Tools: Text


Select a control, or select multiple controls by pressing the Shift key while selecting, then choose the size.

Bm-noteicon.png
Pro Tip

You can select multiple controls by pressing the Shift key while clicking on their border.

Format

The Format menu in the Form Tools allows you to change various appearance attributes of Advanced Controls.

Form Tools: Format


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.

Form Tools: Align


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.

Form Tools: Align: Text


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, particularly for CommandButtons, 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.

Toggle Enable/Disable Click Events in Canvas Sections


Bm-noteicon.png
Pro Tip

Enable/Disable click events is also available from the Options menu from Advanced in the Form Tools.

Disable Move Events

To make it easier to click on Advanced Canvas Controls to select them, particularly when shift-selecting multiple controls, the Headerbar has a toggle to enable and disable move events. Move events are enabled in the Page Builder by default. Click the toggle to disable them so you do not accidentally move a control when you click on it. Click the toggle again to re-enable them.

Toggle Enable/Disable Move Events in Canvas Sections


Bm-noteicon.png
Pro Tip

Enable/Disable move events is also available from the Options menu from Advanced in the Form Tools.

See Also

Advanced Canvas Control Attributes, Advanced Canvas Control Custom Delegates, Canvas Section Attributes