Layout and positioning

Posted: 2015-12-09 in Layout and positioning

Canvas Section ‘Advanced Controls’ can be aligned and given the same appearance attributes using ‘Align’ and ‘Format’.
Form Sections have attributes allowing you to set the size and layout of formitems (field caption+data) section-wide.

Form Sections handle layout automatically, but maybe you want to make the Captions for formitems smaller, to give more room for the data.
The Form Section Caption width attribute allows you to do just that.

layouts which are responsive and auto adjust their contents.
In Lianja, ‘Layout’ can be ‘Vertical’, ‘Horizontal’ or ‘Form’ or just unset.
To use absolute positioning you do not need to specify a layout.
A ‘Form’ Layout can only be used with the addRow() method not the addObject() method.

You can’t copy [visual objects], but you can use Format and Align to match a new control to an existing one.

There is an attribute for foreground color although I am unsure how to access it using code.
Do you mean the label of a formitem in a standard Form Section?
If so, you use the Formitem properties, specifically the CaptionForeColor property, e.g.:

Lianja.get("page1.section1.field1").CaptionForeColor = "red"
Lianja.get("page1.section1.field1").CaptionForeColor = "#ff0000ff"

I have a page with grid section
I wish to auto resize the column width to fit both the data and column header
The “Auto Resize” attribute in the grid section only resize the column width to fit the data and my column header text is truncated.
Is there any way I can have auto resize to fit data or header text whichever is bigger?
If the column is not wide enough for some reason you can resize it using the mouse which will be applied automatically if you have set a fixed width in the column attributes.
Autoresize Columns takes the column header into consideration already.

I added a custom gadget into a form section
May I know how I can centre this horizontally across the form section?
The actual custom gadget inside the form section? Just add dividers to split the from section up into columns.

The divider works but it divides the section into 3 equal section
I tried changing the wide of the 2 dividers but it does not reflect in my user interface
May I know how I can change the width of a dividers of a form section?
The dividers work like that so that the form section is responsive to screen geometry and also changing of orientation on tablets. It seems you are trying to force non-responsive layout of a standard form section.
If all you want to do is center some custom gadget in a section with nothing else there then you should just create a custom section and use layouts. Lianja supports both horizontal and vertical layouts.
layout is a core property of a container. It can be set to “horizontal” or “vertical”. You then use addobject() to add controls to the container.
Each control that you add to the layout can be given a fixedwidth or a fixedheight which are both core properties on all the UI framework classes. This is how you would center a label or other UI control inside a container.

how to use dividers and I have no idea what a spacer is
A form section essentially lays out fields and gadgets (known as formitems) into cells.
Whenever you add a field or gadget to a form section you can re-arrange the layout by clicking on the caption of the formitem and dragging it onto a caption of another Formitem. In which case it will be inserted before the one you drag and drop into.
Column Dividers when dragged into another formitem caption force a column break.
Spacers are used to leave an empty cell where a formitem would be in the layout.
Subtitles operate just like Spacers but the caption is editable in design mode.
Horizontal separators are the same as spacers but they have a line drawn through them.
The layout of a form section is designed to be “responsive” so that it can automatically adjust to various device resolutions.
Canvas sections provide the ability to layout a form using absolute pixel positioning.
To summarize, form sections are responsive whilst canvas sections provide the free form layout.
To remove a formitem, click on its caption and you will be in inline editing mode on it. Click the delete icon (the first icon on the right hand side) to remove it.

You can place the captions “Above” the field or “Beside”(see section attributes) but we have not provided the ability to put the caption on the right and the data on the left.

When you switch between pages focus will be lost. Only one control can have focus at any one time.

Form sections are logically divided into columns. A “Divider” starts a new column and a gadget occupies a column of its own.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s