Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: What does the form layout option for container do?

Hybrid View

  1. #1
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,940

    What does the form layout option for container do?

    In a custom section, assuming I have the following code:

    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

  2. #2
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,767
    To better understand layouts I will explain with an example from 4.1.

    Here we have a "Smart Grid".

    Name:  Screen Shot 2017-11-18 at 8.33.33 AM.jpg
Views: 82
Size:  117.3 KB

    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.

    Name:  Screen Shot 2017-11-18 at 8.34.00 AM.jpg
Views: 71
Size:  39.3 KB

    Notice that this "Cell editor delegate" creates a form dynamically and embeds it in the grid cell.

    The JavaScript code for this is:

    Code:
    ////////////////////////////////////////////////////////////////
    // 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 in the documentation wiki for a more in depth explanation.
    Last edited by barrymavin; 2017-11-21 at 01:07.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  3. #3
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,940
    Hi Barry,

    fantastic, thanks,

    Hank

  4. #4
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,940
    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!

  5. #5
    Senior Member
    Join Date
    Feb 2012
    Location
    Rome - Italy
    Posts
    1,880
    Hi Barry,
    fantastic!

    Can I add a scroll bar on the container?

    thanks
    Fabio

  6. #6
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,767
    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.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  7. #7
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,767
    Hi Fabio,

    If you would like a "scrollpanel" class then please submit an ER ticket.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  8. #8
    Senior Member
    Join Date
    Feb 2012
    Location
    Rome - Italy
    Posts
    1,880
    Ok, added.
    thanks
    Fabio

  9. #9
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,767
    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".

    Code:
    scroller = createObject("scrollpanel")
    scroller.resize(200, 200)
    scroller.addObject("cont", "container")
    cont.resize(800, 600)
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  10. #10
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,940
    Hi Barry,

    is this also web/mobile?

    thanks,

    Hank

Page 1 of 2 12 LastLast

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Journey into the Cloud
Join us