View Full Version : What does the form layout option for container do?
In a custom section, assuming I have the following code:
oSection = createobject("oSection", "section");
oSection.addobject("oContMain","container");
oContMain.layout = "grid";
oContMain.spacing = 50;
oContMain.addobject("oContPOInfo","container",0,0,1,1);
oContMain.layout = "form";
What behavior should I expect from the layout? I can't get it to display a label, or a form item, so I'm obviously missing something.
thanks,
Hank
barrymavin
2017-11-17, 20:52
To better understand layouts I will explain with an example from 4.1.
Here we have a "Smart Grid".
1553
The "Employee Details" column of the grid has a "Cell display delegate" and an "Cell editor delegate".
Clicking on the "EDIT" button causes the "Cell editor delegate" to embed a "form" in the grid cell.
1554
Notice that this "Cell editor delegate" creates a form dynamically and embeds it in the grid cell.
The JavaScript code for this is:
////////////////////////////////////////////////////////////////
// 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";
// set the stylesheet classes for the button to theme it like a bootstrap button
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";
// set the stylesheet classes for the button to theme it like a bootstrap button
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;
};
Notice how the "Form" is created using the addRow() method of the container which has a "Form" layout.
addRow("Address:", "address", "textbox");
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.
The "name" is the name of the object variable to be created.
The "class" is the UI class e.g. textbox, combobox, etc
Now interestingly as with all of the UI layouts in Lianja (Desktop,Web and Mobile) you can add a "container" which can itself have its own layout.
An important feature of layouts is that they are responsive. Changing the size of the container will automatically relay the container out so there is no need to specify the position of the children components in the container as the layout manager will do it for you.
Hope that helps. See Understanding UI layouts (https://www.lianja.com/doc/index.php/Understanding_UI_Layouts) in the documentation wiki for a more in depth explanation.
Hi Barry,
fantastic, thanks,
Hank
PS: for those who wonder where those colors for names come from: they are in the CSS Standard. Here's a handy list: https://www.w3schools.com/cssref/css_colors.asp
How did I find this? I was going to ask Barry and then thought, hey, what if there's a standard? One Google search and one URL click later, viola!
Hi Barry,
fantastic!
Can I add a scroll bar on the container?
thanks
Fabio
barrymavin
2017-11-20, 03:03
Currently not no. I think what is needed is a "scrollpanel" which you would add a container to. If the size of the container is larger than the scroll panel then the scrollbars would be visible otherwise hidden.
barrymavin
2017-11-20, 03:48
Hi Fabio,
If you would like a "scrollpanel" class then please submit an ER ticket.
barrymavin
2017-11-20, 22:25
I've added this into 4.1 now.
As stated in the roadmap:
Added a new class to the Lianja Framework "scrollpanel". Use this class to embed a large scrollable UIcontrol e.g. a "container" or an "image".
scroller = createObject("scrollpanel")
scroller.resize(200, 200)
scroller.addObject("cont", "container")
cont.resize(800, 600)
Hi Barry,
is this also web/mobile?
thanks,
Hank
barrymavin
2017-11-21, 01:20
Hi Barry,
is this also web/mobile?
thanks,
Hank
Hi Hank,
Yes it is.
Hi all,
I'm tryng to modify the Editor to embed a scrollable containre..
I've try with:
[code]
////////////////////////////////////////////////////////////////
// Custom editor for column 'section1.column5'
function page1_section1_column5_customeditor(controlsource, row,col)
{
var employees = Lianja.getCursor("employees");
scroller = createObject("scrollpanel");
scroller.resize(200, 200);
econt = scroller.createObject("econt", "container");
//econt.resize(800, 600);
// 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");
[\code]
but not work..
yvonne.milne
2017-11-27, 10:02
Hi Fabio,
scroller.addObject("econt","container");
not
econt = scroller.createObject("econt", "container");
and uncomment
econt.resize(800, 600);
Regards,
Yvonne
Thanks Yvonne,
it work!
Only one problem, when I go to "edit" mode, I do not see the data..
thanks
Fabio
And, on Edit mode, If I press "Tab", the editor switch to "Display" mode..
yvonne.milne
2017-11-27, 11:39
Hi Fabio,
Submit a ticket and give us all the code/details.
Regards,
Yvonne