Archive for the ‘Layout and positioning’ Category

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:


Q:
I,m still struggling with the fact that I have to give all the textboxes (and other objects that I use more than once) the same properties.
I know that classes (copy and use in the app) will there be in the future, but is there a possiblity to click on an object in the section and copy it ?
properties I most use are widht and formats sometimes color.
Another example is an visual form (as in VFP) with height and width that I can fill with visual object without coding.
I know there is a workaround because you can design a page,save it, and display it with Showdialog().
But this is not the solution I want, because there are restrictions, if you place code in the PageSection, it will mostly generate an error in the Showdialog.
Also remove the original page from the app gives a problem, you can’t change the page anymore.

A:
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.
Pages to be used as UI Pages with Lianja.showDialog() and Lianja.showDialogPanel()should be created in a separate App from the one(s) from which they will be called – for example the customerlist UI Page used in the sample lianjademo App is in the ui_mypagelibrary (mypagelibrary in earlier versions) App, so can be modified when required.


Q:
I’m creating a page with a canvas and quite a few comboboxes and textboxes on the Mac and when I deploy to other people’s PCs I find the fonts are massive making the captions look pretty awful.
A:
Have a look at the ‘Caption size‘ and ‘Data size‘ attributes for the Canvas Section:


Q:
I can’t seem to group items and resize them all at once.
A:
Canvas Section ‘Advanced Controls’ can be aligned and given the same appearance attributes using ‘Align’ and ‘Format’. Use click to select the first control then shift-click to select the others as a group.


Unlike Lianja, Visual FoxPro does not support 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.

When using ‘Vertical’, all objects added to the container with no height specified will be laid out with the same height. If you want a control to be a fixed height set its fixedheight property. Same goes for ‘Horizontal’ and fixedwidth.

You can also set ‘spacing’ and ‘margin’ on a container.
Containers can themselves contain containers so, for example, you can add horizontal containers to a vertical container and everything will automatically adjust to the size of the base container e.g. a Form.



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.


Q:
There is an attribute for foreground color although I am unsure how to access it using code.
A:
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.:

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

Q:
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?
A:
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.


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


Q:
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?
A:
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.


Q:
how to use dividers and I have no idea what a spacer is
A:
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.