Container

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
Advertisements

Container

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.