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

---

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.

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.

If I add centercontainer.addstretch() before I add the buttons, it acts like a container and pushes the buttons to the bottom.

However, since I want the buttons centered, I add one call before the buttons are added, and one call after.

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

I just realized I wrote “3 rows horizontally ” where its actually vertically