PDA

View Full Version : What does the form layout option for container do?



HankFay
2017-11-17, 18:11
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.

HankFay
2017-11-17, 21:17
Hi Barry,

fantastic, thanks,

Hank

HankFay
2017-11-17, 21:48
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!

phabio
2017-11-20, 02:06
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.

phabio
2017-11-20, 04:18
Ok, added.
thanks
Fabio

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)

HankFay
2017-11-21, 00:02
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.

HankFay
2017-11-21, 01:37
+1

phabio
2017-11-21, 02:10
+ 2

phabio
2017-11-27, 08:16
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

phabio
2017-11-27, 11:27
Thanks Yvonne,
it work!

Only one problem, when I go to "edit" mode, I do not see the data..

thanks
Fabio

phabio
2017-11-27, 11:38
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