How do I reference this object?
////////////////////////////////////////////////////////////////
// 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
oSearchPanel = Lianja.get("Customers.section1").SearchPanel ? oSearchPanel.sp_label.text
? Lianja.get("Customers.section1").SearchPanel.sp_label.text
container2.left = 0

.png)
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:
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.
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.
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.
.png)



The grid layout fits cells into the geometry of the container.
Thanks to Barry for pointing that out to me today.
Here is an example.

.png)
.png)

.png)

Very handy.
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.
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

