[Answers] Container

[josipradnik]

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.

//....
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.

---

---

All topics in [Answers] alphabetically: http://www.lianja.com/community/show...ll=1#post12352

[josipradnik]

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

---

---

All topics in [Answers] alphabetically: http://www.lianja.com/community/show...ll=1#post12352

[josipradnik]

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.
HerbTube: 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:

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()
HerbTube; Intro to Animate - https://youtu.be/be_DFwG0lF4

---

If you are like me and enjoy laying out containers, the addstretch() function is very handy.

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.

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 3x3. 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 10x10.

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

---

---

All topics in [Answers] alphabetically: http://www.lianja.com/community/show...p?2717-Answers

[josipradnik]

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:

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

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.

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.

---

---

All topics in [Answers] alphabetically: http://www.lianja.com/community/show...ll=1#post12352

These answers are also systematized on the site "Lianja developer": https://lianjadeveloper.wordpress.co...ory/container/