Category: Container

Containers [examples]

Published on by homunizamLeave a comment

UIcontrol is added to a container with a vertical layout its width expands to the width of the container leaving space for its margins.

cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Vertical"
cont.addObject("labtitle", "label");
labtitle.caption = "EMPLOYEE DETAILS"; 
labtitle.backcolor = "lightblue";
labtitle.alignment = "center";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image1 v.png

You can set a fixedheight for a UIcontrol. This results in the remaining UIcontrols that are added to the container to fill up the remaining space vertically.
FIXEDHEIGHT
cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Vertical";
cont.addObject("labtitle", "label");
labtitle.caption = "EMPLOYEE DETAILS"; 
labtitle.fixedheight = 20;
labtitle.backcolor = " lightblue";
labtitle.alignment = "center";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image2 v.png

You adjust the vertical spacing between UIcontrols with the spacing property.
SPACING
cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Vertical";
cont.spacing = 10;
cont.addObject("labtitle", "label");
labtitle.caption = "EMPLOYEE DETAILS"; 
labtitle.fixedheight = 20;
labtitle.backcolor = " lightblue";
labtitle.alignment = "center";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image3 v.png

You adjust the margin around the container by setting the margin property.
MARGIN
cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Vertical";
cont.margin = 10;
cont.addObject("labtitle", "label");
labtitle.caption = "EMPLOYEE DETAILS"; 
labtitle.fixedheight = 20;
labtitle.backcolor = "lightblue";
labtitle.alignment = "center";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image4 v.png

Alternatively you can adjust individual margins by setting margintop, marginbottom, marginleft and/or marginright.
MARGINTOP
MARGINBOTTOM
MARGINLEFT
MARGINRIGHT
cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Vertical";
cont.margintop = 5;
cont.marginright = 25;
cont.marginleft = 25;
cont.marginbottom = 50;
cont.addObject("labtitle", "label");
labtitle.caption = "EMPLOYEE DETAILS"; 
labtitle.fixedheight = 20;
labtitle.backcolor = "lightblue";
labtitle.alignment = "center";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image5 v.png

Note: You can also specify a minheight and a maxheight for a UIcontrol.

You can add vertical spacing between the UIcontrols using the container addSpacing() method .
ADDSPACING

addSpacing(space as numeric)

cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Vertical";
cont.margintop = 5;
cont.marginright = 25;
cont.marginleft = 25;
cont.marginbottom = 50;
cont.addObject("labtitle", "label");
labtitle.caption = "EMPLOYEE DETAILS"; 
labtitle.fixedheight = 20;
labtitle.backcolor = "lightblue";
labtitle.alignment = "center";
cont.addSpacing(10);
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image6 v.png

As you add UIcontrols to a vertical layout the UIcontrols (that have no fixedheight specified) will be adjusted in equal sizes vertically.

If you want the UIcontrols to be aligned to the top of the container then use the container addStretch() method after the last UIcontrol is added. Alternatively, if the you want the UIcontrols aligned on the bottom of the container the use the addStretch() method before the first UIcontrol is added. To center the UIcontrols vertically addStretch() before all UIcontrols are added and then addStretch() again afterwards.
ADDSTRECH

addStretch()

Without addStretch()

cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Vertical";
cont.spacing = 10;
cont.margintop = 5;
cont.marginright = 25;
cont.marginleft = 25;
cont.marginbottom = 50;
cont.addObject("labtitle", "label");
labtitle.fixedheight = 20;
labtitle.caption = "EMPLOYEE DETAILS"; 
labtitle.backcolor = "lightblue";
labtitle.alignment = "center";
cont.addSpacing(20);
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";
lab.fixedheight = 20;

Uil image7 v.png

With addStretch()

cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Vertical";
cont.spacing = 10;
cont.margintop = 5;
cont.marginright = 25;
cont.marginleft = 25;
cont.marginbottom = 50;
cont.addObject("labtitle", "label");
labtitle.fixedheight = 20;
labtitle.caption = "EMPLOYEE DETAILS"; 
labtitle.backcolor = "lightblue";
labtitle.alignment = "center";
cont.addSpacing(20);
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";
lab.fixedheight = 20;
cont.addStretch();

Uil image8 v.png

You can use the container setStretchFactor() method to inform the container the relative sizes of each of the UIcontrols inside the container.
SETSTRETCHFACTOR

To better handle a responsive UI you can assign a stretchfactor to each UIcontrol in the layout. So for example if you set the stretchfactor of the first UIcontrol (index 0) to 2 and the others to 1, then the first UIcontrol will be twice the height of the others.

setStretchFactor(index as numeric, stretchfactor as numeric)

cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Vertical";
cont.addObject("labtitle", "label");
labtitle.caption = "EMPLOYEE DETAILS"; 
labtitle.backcolor = "lightblue";
labtitle.alignment = "center";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";
cont.setStretchFactor(0, 2);
cont.setStretchFactor(1, 1);

Uil image9 v.png

Horizontal Layout

The “Horizontal” layout lines up UIcontrols horizontally.

Once a container has a horizontal layout you add UIcontrols to it using the addObject() method.

As UIcontrols are added to a container with a horizontal layout, the width of each UIcontrol in the container is adjusted automatically to fill up the width of the container adjusting for spacing between each UIcontrol and the margin around the container.

Note that when a UIcontrol is added to a container with a horizontal layout its height expands to the height of the container leaving space for its margins.

cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Horizontal";
cont.addObject("labtitle", "label");
labtitle.backcolor = "lightblue";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image1 h.png

You can set a fixedwidth for a UIcontrol. This results in the remaining UIcontrols that are added to the container to fill up the remaining space horizontally.
FIXEDWIDTH
cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Horizontal";
cont.addObject("labtitle", "label");
labtitle. fixedwidth = 20;
labtitle.backcolor = "lightblue";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image2 h.png

You adjust the horizontal spacing between UIcontrols with the spacing property.
SPACING
cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Horizontal";
cont.spacing = 10;
cont.addObject("labtitle", "label");
labtitle. fixedwidth = 20;
labtitle.backcolor = "lightblue";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image3 h.png

You adjust the margin around the container by setting the margin property.
MARGIN
cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Horizontal";
cont.margin = 10;
cont.addObject("labtitle", "label");
labtitle.fixedwidth = 20;
labtitle.backcolor = "lightblue";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image4 h.png

Alternatively you can adjust individual margins by setting margintop, marginbottom, marginleft and/or marginright.
MARGINTOP
MARGINBOTTOM
MARGINLEFT
MARGINRIGHT
cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Horizontal";
cont.margintop = 5;
cont.marginright = 25;
cont.marginleft = 25;
cont.marginbottom = 50;
cont.addObject("labtitle", "label");
labtitle. fixedwidth = 20;
labtitle.backcolor = "lightblue";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image5 h.png

Note: You can also specify a minwidth and a maxwidth for a UIcontrol.

You can add horizontal spacing between the UIcontrols using the container addSpacing() method .
ADDSPACING

addSpacing(space as numeric)

cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Horizontal";
cont.margintop = 5;
cont.marginright = 25;
cont.marginleft = 25;
cont.marginbottom = 50;
cont.addObject("labtitle", "label");
labtitle. fixedwidth = 20;
labtitle.backcolor = "lightblue";
cont.addSpacing(10);
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";

Uil image6 h.png

As you add UIcontrols to a horizontal layout the UIcontrols (that have no fixedwidth specified) will be adjusted in equal sizes horizontally.

If you want the UIcontrols to be aligned to the left of the container then use the container addStretch() method after the last UIcontrol is added. Alternatively, if the you want the UIcontrols aligned on the right of the container the use the addStretch() method before the first UIcontrol is added. To center the UIcontrols horizontally addStetch() before all UIcontrols are added and then addStretch() again afterwards.
ADDSTRETCH

addStretch()

Without addStretch()

cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Horizontal";
cont.spacing = 10;
cont.margintop = 5;
cont.marginright = 25;
cont.marginleft = 25;
cont.marginbottom = 50;
cont.addObject("labtitle", "label");
labtitle. fixedwidth = 20;
labtitle.backcolor = "lightblue";
cont.addSpacing(20);
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";
lab.fixedwidth = 20;

Uil image7 h.png

With addStretch()

cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Horizontal";
cont.spacing = 10;
cont.margintop = 5;
cont.marginright = 25;
cont.marginleft = 25;
cont.marginbottom = 50;
cont.addObject("labtitle", "label");
labtitle.fixedwidth = 20;
labtitle.backcolor = "lightblue";
labtitle.alignment = "center";
cont.addSpacing(20);
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";
lab.fixedwidth = 20;
cont.addStretch();

Uil image8 h.png

You can use the container setStretchFactor() method to inform the container the relative sizes of each of the UIcontrols inside the container.
SETSTRETCHFACTOR

To better handle a responsive UI you can assign a stretchfactor to each UIcontrol in the layout. So for example if you set the stretchfactor of the first UIcontrol (index 0) to 2 and the others to 1, then the first UIcontrol will be twice the width of the others.

setStretchFactor(index as numeric, stretchfactor as numeric)

cont = createObject("container");
cont.backcolor = "white";
cont.layout = "Horizontal";
cont.addObject("labtitle", "label");
labtitle.caption = "EMPLOYEE DETAILS"; 
labtitle.backcolor = "lightblue";
labtitle.alignment = "center";
cont.addObject("lab", "label"); 
lab.backcolor = "lightgreen";
cont.setStretchFactor(0, 2);
cont.setStretchFactor(1, 1);

Uil image9 h.png

Grid Layout

The “Grid” lays out UIcontrols in a grid.

Once a container has a grid layout you add UIcontrols to it using the extended addObject() method.

The “Grid” layout takes the space made available to it by the geometry of its container, divides it up into rows and columns, and puts each UIcontrol it manages into the correct cell.

Once a container has a grid layout you add UIcontrols to it using the extended addObject() method.

addObject(name as character, class as character, row as numeric, col as numeric [, rowspan as numeric, colspan as numeric] )

rowspan and colspan default to 1 if not specified.

cont = createObject("container");
cont.layout = "Grid";
cont.addObject("cont1", "container", 0, 0);
cont1.backcolor = "gold"; 
cont1.fixedheight = 150;
cont.addObject("cont2", "container", 0, 1);
cont2.backcolor = "orange"; 
cont.addObject("cont2", "container", 0, 2);
cont2.backcolor = "darkorange"; 
cont.addObject("cont3", "container", 1, 0, 1, 3);
cont3.layout = "Grid";
cont3.addObject("cont4", "container", 0, 0);
cont4.backcolor = "lightgreen"; 
cont4.layout = "Grid";
cont4.addObject("cont4_1", "container", 0, 0, 1, 2);
cont4_1.backcolor = "lightgray"; 
cont4_1.layout = "Grid";
cont4_1.addObject("cont4_1_1", "container", 0, 0);
cont4_1_1.backcolor = "lightgray"; 
cont4_1.addObject("cont4_1_2", "container", 0, 1);
cont4_1_2.backcolor = "gray"; 
cont4.addObject("cont4_2", "container", 2, 0, 1, 2);
cont4_2.backcolor = "gold";
cont4_2.fixedheight = 80; 
cont4.addObject("cont4_3", "container", 3, 0, 1, 2);
cont4_3.backcolor = "orange";
cont4_3.fixedheight = 60; 
cont4.addObject("cont4_4", "container", 4, 0, 1, 2);
cont4_4.backcolor = "darkorange";
cont4_4.fixedheight = 80;

Uil image1 g.png

You adjust the horizontal spacing between UIcontrols with the spacing property.
SPACING
cont = createObject("container");
cont.layout = "Grid";
cont.spacing = 10;
cont.addObject("cont1", "container", 0, 0);
cont1.backcolor = "gold"; 
cont1.fixedheight = 150;
cont.addObject("cont2", "container", 0, 1);
cont2.backcolor = "orange"; 
cont.addObject("cont2", "container", 0, 2);
cont2.backcolor = "darkorange"; 
cont.addObject("cont3", "container", 1, 0, 1, 3);
cont3.layout = "Grid";
cont3.spacing = 10;
cont3.addObject("cont4", "container", 0, 0);
cont4.backcolor = "lightgreen"; 
cont4.layout = "Grid";
cont4.spacing = 10;
cont4.addObject("cont4_1", "container", 0, 0, 1, 2);
cont4_1.backcolor = "lightgray"; 
cont4_1.layout = "Grid";
cont4_1.spacing = 10;
cont4_1.addObject("cont4_1_1", "container", 0, 0);
cont4_1_1.backcolor = "lightgray"; 
cont4_1.addObject("cont4_1_2", "container", 0, 1);
cont4_1_2.backcolor = "gray"; 
cont4.addObject("cont4_2", "container", 2, 0, 1, 2);
cont4_2.backcolor = "gold";
cont4_2.fixedheight = 80; 
cont4.addObject("cont4_3", "container", 3, 0, 1, 2);
cont4_3.backcolor = "orange";
cont4_3.fixedheight = 60; 
cont4.addObject("cont4_4", "container", 4, 0, 1, 2);
cont4_4.backcolor = "darkorange";
cont4_4.fixedheight = 80;

Uil image2 g.png

You adjust the margin around the container by setting the margin property.
MARGIN
cont = createObject("container");
cont.layout = "Grid";
cont.margin = 10;
cont.addObject("cont1", "container", 0, 0);
cont1.backcolor = "gold"; 
cont1.fixedheight = 150;
cont.addObject("cont2", "container", 0, 1);
cont2.backcolor = "orange"; 
cont.addObject("cont2", "container", 0, 2);
cont2.backcolor = "darkorange"; 
cont.addObject("cont3", "container", 1, 0, 1, 3);
cont3.layout = "Grid";
cont3.addObject("cont4", "container", 0, 0);
cont4.backcolor = "lightgreen"; 
cont4.layout = "Grid";
cont4.addObject("cont4_1", "container", 0, 0, 1, 2);
cont4_1.backcolor = "lightgray"; 
cont4_1.layout = "Grid";
cont4_1.addObject("cont4_1_1", "container", 0, 0);
cont4_1_1.backcolor = "lightgray"; 
cont4_1.addObject("cont4_1_2", "container", 0, 1);
cont4_1_2.backcolor = "gray"; 
cont4.addObject("cont4_2", "container", 2, 0, 1, 2);
cont4_2.backcolor = "gold";
cont4_2.fixedheight = 80; 
cont4.addObject("cont4_3", "container", 3, 0, 1, 2);
cont4_3.backcolor = "orange";
cont4_3.fixedheight = 60; 
cont4.addObject("cont4_4", "container", 4, 0, 1, 2);
cont4_4.backcolor = "darkorange";
cont4_4.fixedheight = 80;

Uil image3 g.png

Alternatively you can adjust individual margins by setting margintop, marginbottom, marginleft and/or marginright.
MARGINTOP
MARGINBOTTOM
MARGINLEFT
MARGINRIGHT

 

cont = createObject("container");
cont.layout = "Grid";
cont.margintop = 5;
cont.marginright = 25;
cont.marginleft = 25;
cont.marginbottom = 50;
cont.addObject("cont1", "container", 0, 0);
cont1.backcolor = "gold"; 
cont1.fixedheight = 150;
cont.addObject("cont2", "container", 0, 1);
cont2.backcolor = "orange"; 
cont.addObject("cont2", "container", 0, 2);
cont2.backcolor = "darkorange"; 
cont.addObject("cont3", "container", 1, 0, 1, 3);
cont3.layout = "Grid";
cont3.addObject("cont4", "container", 0, 0);
cont4.backcolor = "lightgreen"; 
cont4.layout = "Grid";
cont4.addObject("cont4_1", "container", 0, 0, 1, 2);
cont4_1.backcolor = "lightgray"; 
cont4_1.layout = "Grid";
cont4_1.addObject("cont4_1_1", "container", 0, 0);
cont4_1_1.backcolor = "lightgray"; 
cont4_1.addObject("cont4_1_2", "container", 0, 1);
cont4_1_2.backcolor = "gray"; 
cont4.addObject("cont4_2", "container", 2, 0, 1, 2);
cont4_2.backcolor = "gold";
cont4_2.fixedheight = 80; 
cont4.addObject("cont4_3", "container", 3, 0, 1, 2);
cont4_3.backcolor = "orange";
cont4_3.fixedheight = 60; 
cont4.addObject("cont4_4", "container", 4, 0, 1, 2);
cont4_4.backcolor = "darkorange";
cont4_4.fixedheight = 80;

Uil image4 g.png

Form Layout

The “Form” layout manages forms of UIcontrols and their associated labels laying them out vertically.

The “Form” layout lays out its children in a two-column form. The left column consists of labels and the right column consists of UIcontrols.

Once a container has a form layout you add UIcontrols to it using the addRow() method.

addRow(caption as character, name as character, class as character)

If the “caption” is empty i.e. “” then nothing displays in the first column of the row and the UIcontrol extends across two columns.

The “name” is the name of the object variable to be created.

The “class” is the UIcontrol class e.g. textbox, combobox, etc

As rows are added to a container with a form layout, each row is added sequentially from top to bottom adjusting its size taking into consideration spacing between each row and the margin around the container.

Example code taken from the example_smartgrid app.

////////////////////////////////////////////////////////////////
 
// Custom editor for column 'section1.column5'
function page1_section1_column5_customeditor(controlsource,row,col)
{
    var employees = Lianja.getCursor("employees");
    econt = createObject("econt","container");
    econt.layout = "Form"; 
    econt.addRow("", "formheading", "label");
    formheading.caption = "EDIT EMPLOYEE DETAILS";
    formheading.fontsize = 12;
    formheading.alignment = "center";
    formheading.backcolor = "lightslategray";
    formheading.forecolor = "white";
    econt.addRow("First Name:", "firstname", "textbox");
    firstname.controlsource = "employees.firstname";
    econt.addRow("Last Name:", "lastname", "textbox");
    lastname.controlsource = "employees.lastname";
    econt.addRow("Address:", "address", "textbox");
    address.controlsource = "employees.address";
    econt.addRow("City:", "city", "textbox");
    city.controlsource = "employees.city";
    econt.addRow("Region:", "region", "textbox"); 
    region.controlsource = "employees.region";
    econt.addRow("Postcode:", "postalcode", "textbox");
    postalcode.controlsource = "employees.postalcode";
    econt.addRow("Country:", "country", "textbox");
    country.controlsource = "employees.country";
    econt.backcolor = "lightgray";
    econt.addRow("", "buttons", "container");
    buttons.backcolor = "lightgray";
    buttons.layout = "Horizontal";
    buttons.spacing = 5;
    buttons.addObject("cancelbtn", "commandbutton"); 
    cancelbtn.caption = "Cancel";
    cancelbtn.stylesheet = "btn btn-sm btn-block btn-default";
    cancelbtn.click = function()
    {
        Lianja.get("page1.section1").grid.cancel();  
    };
    buttons.addObject("savebtn", "commandbutton");
    savebtn.caption = "Save";
    savebtn.stylesheet = "btn btn-sm btn-block btn-default";
    savebtn.click = function()
    {
        Lianja.get("page1.section1").grid.save();
    };
    buttons.minheight = 34;
    econt.fixedheight = 254;
    return econt;
};

Uil image1 f.png

https://www.lianja.com/doc/index.php/Understanding_UI_Layouts

Container

Published on by homunizamLeave a comment

Q:

is possible to scroll a container?

A:

3 thoughts that come to mind.

1. If you really have to, you can simulate a scroll by using animate.
Its not ideal, but it can work.
See this video.
https://youtu.be/be_DFwG0lF4

2. YoI can use a splitter to resize a container.

3. You can try to remove and then re-add conainers.

Q:

Fill remaining space in container with Commandbutton: Suppose I have a container with a vertical layout and a number of controls. Finally, I add a Commandbutton to the container and would like the height and width of the CommandButton to fill the remaining space in the container. What settings do I need to use on the Commandbutton to get that to happen?

A:

Code:
proc page1_section1
page1_section1 = createobject("page1_section1")
 
page1_section1.addobject("viewport","container")
viewport.layout ="V"

viewport.addObject('textbox1', 'textbox')
viewport.addObject('textbox2', 'textbox')

page1_section1.addobject("viewport2","container")

viewport2.addObject('mybutton', 'commandbutton')

mybutton.autosize = 1
mybutton.backcolor = "blue"

return page1_section1

Add a containter last, then commandbutton inside it, with autosize=1

in other cases, I use the grid layout.

You need to use a combination of “horizontal” layouts that contain “vertical” layouts as columns. Then as you add UI controls they can flow over to the next column. That’s just a coding issue you have to work through.

“grid” layouts are responsive.

Just to clarify, you have several layouts on a container.

Horizontal
Vertical
Form
Grid

They can be nested.

custom grid layouts are extremely powerful and they work very well for web and mobile apps too. In Lianja 4.0 form sections will be able to be laid out using a grid layout. Basically, you check the “Custom Grid layout” section attribute then you specify the row, column, nrows and ncolumns for each formitem (field and gadget). This provides responsive formitem positioning and you can also specify fixedheight and fixedwidth for each individual formitem as well.

In Lianja 3.2.1 we have added the abiity to embed a BROWSE command inside a container (desktop Apps only).

Code:
proc page1_section1
myCont = createObject("Container")
select * from customers into cursor mycust
myCont.browse("BROWSE keywords/columns/etc", "mycust")

You can re-execute the myCont.browse(…) command repeatedly. This causes the BROWSE grid to be replaced by the new BROWSE grid and data in the “alias” cursor. For best results assign a horizontal or vertical layout to the container.

You can nest containers inside a “grid” layout applied to a “Form” and then use the myForm.showDropDown(…) method to drop down complex pick lists which have data rendered inside the embedded browse grid.

Here is a better example showing how to handle a drop down pick list form with BROWSE embedded.

Code:
proc page1_section1
myform = createObject("Form")
myform.resize(600, 500)
myform.addObject("mycont", "Container")
mycont.autosize = 1
mycont.layout = "V"
select * from customers into cursor mycust // This could be a parameterized multi-table join
mygrid = mycont.browse("browse noedit noactionbar", "mycust", "myclickhandler()", "mydblclickhandler()") // last 2 args are optional
// note that the grid object is returned from browse() so you can set properties and call methods on it
myform.showDropDown("page1.section1.field21", 400, 360)

The full syntax for BROWSE and its keywords can be found at:
https://www.lianja.com/doc/index.php/BROWSE

When used inside a custom dropdown form this provides some great new functionality.

 

 

Container

Published on by homunizamLeave a comment
Q:
I add a container to SearchSection.
How do I reference this object?
A:
////////////////////////////////////////////////////////////////
// Event delegate for 'searchpanel' event
proc Customers_section1_searchpanel()
        sp_container = createObject("container")
        sp_container.addObject("sp_label", "label")
        sp_label.move(5, 3, 80, 20)
        sp_label.text = "Company Name"
        sp_container.addObject("osp_textbox", "textbox")
        sp_textbox = osp_textbox
        osp_textbox.move(85, 3, 100, 20)
        sp_container.addObject("sp_search", "commandbutton")
        sp_search.move(190, 3, 60, 20)
        sp_search.text = "Search"
        sp_search.click = sp_search_handler
        sp_container.addObject("sp_clear", "commandbutton")
        sp_clear.move(255, 3, 60, 20)
        sp_clear.text = "Reset"
        sp_clear.click = sp_reset_handler 
        this.addSearchPanel(sp_container)
        this.addProperty("SearchPanel",sp_container)  // Add reference to the object as a property
endproc

////////////////////////////////////////////////////////////////
// handlers for the Search Panel
proc sp_search_handler()
        Lianja.showDocument("section:section1?action=search&text="+sp_textbox.text)
endproc
 
proc sp_reset_handler()
        Lianja.showDocument("section:section1?action=search&text=")
        sp_textbox.text = ""
endproc
Now I can do this:
oSearchPanel = Lianja.get("Customers.section1").SearchPanel
? oSearchPanel.sp_label.text
or this
? Lianja.get("Customers.section1").SearchPanel.sp_label.text
we have the ability to define the container layout as Vertical, Horizontal and Form.
When using nested containers in vertical and setting a fixedheight and fixedwidthI can use containers with a set layout as if they had an absolute layout to the parent container.
Such as
container2.left = 0
container3.top = 0
nestedPlayers.jpg
The power of containers cannot be over-emphasized. Fully responsive and simple to layout a complex UI once you understand how to use them. And… Scripting language independent. Do they work in web and mobile too? Yes.  If the app is written in JavaScript,
you can do with nesting containers in a custom VFP section.
There’s no HTML to learn , just nest your containers, and create the look and feel of a browser app with the speed of a custom section.
VFP Custom Section – https://youtu.be/nASVLmlKmyY

Containers ( i.e. cont = createObject(“container”) ) can now arrange UI objects added to them in a “grid” layout. A container which has a “grid” layout specified for it takes the space made available to it (by its parent layout or by its parent container), divides it up into rows and columns, and puts each UI object it manages into a grid cell. You add objects to the container grid using the addObject() method:

Code:
cont = createObject("container")
cont.layout = "grid"        // can be... grid, form, horizontal or vertical
cont.addObject('mybtn', 'commandbutton', nRow, nCol, nRowspan, nColspan)

nRow and nCol are zero-based, so the first cell is 0,0 not 1,1
nRowspan and nColspan are optional and default to 1.

UI objects added to the grid layout of the container can occupy multiple rows and/or multiple columns.

This new layout type provides a flexible means of laying out complex UIs as the containers can be nested and each container can itself have a grid layout.

 for each UI object you place in a cell, you can set its fixedwidth and/or fixedheight property which causes the rows and/or columns of the grid layout to adjust accordingly.

And of course these layouts are responsive, adjusting to screen resolution.

Building a responsive UI that can adjust to various form factors is quite straightforward in Lianja.

To further improve UI layouts “Grid” layouts have been added to Lianja Custom Containers in Lianja 3.1.

This new grid layout works in Desktop, Web and Mobile.

Bear in mind that containers can be nested and each container can have its own layout.

Here are a few screenshots of an example I have put together. It is written in JavaScript but the Lianja/VFP code is the same except for the ; at the end of the lines.

The code for the custom section.
Screen Shot 2016-09-29 at 12.12.11 PM.jpg
Screen Shot 2016-09-29 at 12.11.56 PM.jpg
Screen Shot 2016-09-29 at 12.12.33 PM.jpg

The grid layout fits cells into the geometry of the container.

Containers are not scrollable.
I use it to slide containers in and out of view.
I can see a lot of uses for animate like sliding a message box to a missed required field.
Introduction to the Animate method in Lianja.
You can easily move or resize UI objects with object.animate()
Intro to Animate – https://youtu.be/be_DFwG0lF4
If you are like me and enjoy laying out containers, the addstretch() function is very handy.
Thanks to Barry for pointing that out to me today.
Here is an example.
In my center container, I have two buttons that are added in a Horizontal layout. They are spaced evenly as you would expect.
adstretch1.png
If I add centercontainer.addstretch() before I add the buttons, it acts like a container and pushes the buttons to the bottom.
adstretch2.png
However, since I want the buttons centered, I add one call before the buttons are added, and one call after.
adstretch3.png

Very handy.

Code:
maincontainer.addObject("centercontainer","container")
centercontainer.layout = 2
centercontainer.autosize = 1
centercontainer.stylesheet="background-color:rgb(239,244,255)"
centercontainer.spacing = 10
centercontainer.padding = 10
centercontainer.margin = 10
centercontainer.addstretch()
centercontainer.addobject("button1","mybutton")
button1.caption = "Button One"
centercontainer.addobject("button2","mybutton")
button2.caption = "Button Two"
centercontainer.addstretch()

I have a grid that is 3×3. Lianja automatically creates that size becuase I added an object at (2,2). It’s zero based.

If I would have added an object at (9,9), then Lianja would make it 10×10.

I spanned the left columns to take up all the rows on the left side.
proc page1_section1
page1_section1 = createobject("page1_section1")
page1_section1.addobject("viewport","container")
viewport.layout ="grid"
viewport.autosize =1
viewport.addObject('leftop', 'container', 0, 0,3,1)
leftop.autosize = 1
leftop.layout = "V"
leftop.backcolor = "lightblue"
leftop.margin = 20
leftop.addobject("list1","listbox")
list1.additem("This list box starts at")
list1.additem("0,0")
list1.additem("and spans through ")
list1.additem("3 rows Horizontally, and 1 row vertically")

viewport.addObject('center', 'container', 1, 1)
center.layout = 1
center.autosize =1
center.backcolor = "teal"

viewport.addObject('rightbottom', 'container', 2, 2)
rightbottom.autosize = 1
rightbottom.layout = "V"
rightbottom.backcolor = "grey"


return page1_section1
gridlayout.jpg
I just realized I wrote “3 rows horizontally ” where its actually vertically

Container

Published on by homunizamLeave a comment

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.

Q:
When creating a container, you can add a browse in it, very nice. Also you can add commandbuttons in it, this works but you can’t give them properties like height and wide.
A:
Use fixedheight and fixedwidth, e.g.

Code:
//....
mybutton2.caption="DoWhatIwant2"

mybutton2.fixedheight=26
mybutton2.fixedwidth=60 

myform.show(1)

 

Just to clarify, containers are primarily used in custom sections or apps that are non standard custom apps that are run using the Lianja runtime.