B4J Tutorial [BANanoWebix] Lesson 2: Understanding the 6 layout types

Discussion in 'B4J Tutorials' started by Mashiane, Jun 16, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Hi again

    In Lesson 1, we looked at how we can place elements within rows and columns to layout a purported app design. This has resizers so that we can resize the columns and we also used some css to render the background of our columns.

    Lesson 1

    In this lession we look at the 6 layout types that Webix has for us to develop our SPAs. These are:

    Code:
    line = "line"  ' Cells with borders (this Is the default)
        clean = "clean" 'Cells without borders
        wide = "wide" 'Cells with borders And extra-wide space between siblings
        space = "space" 'Cells with borders And extra-wide space between siblings, plus padding from the parent container
        head = "head" 'Cells with borders And small space between siblings
        form = "form" 'Cells without borders And with padding around all of them
    We call then WixLayoutTypes and are depicted as the following..

    6types.png

    Each row here of column data (i.e. 3 columns) depicts a different layout. Whilst there are 6 types, one of the types has been used to define the housing page element, being the 'clean' layout.
     
  2. Mashiane

    Mashiane Expert Licensed User

    1. The Clean Layout

    We create a page and set it to a clean layout. This page element will house all the other rows for the different 5 layouts. See the description above in terms of how this layut works.

    Code:
    'initialize the page, we want it to be a layout and the type should be wide
    Private pg As WixPage
        pg.Initialize(
    "").SetClean
    Code:
    'initialize the page, we want it to be a layout and the type should be wide
        pg.Initialize("").SetClean
    We have used the 'clean' layout for the complete page element.

    2. The Line Layout

    line.png

    On row 1, we have a line layout...

    Code:
    Dim l1 As WixElement
        l1.Initialize(
    "l1").SetTemplate("line-1")
        
    Dim l2 As WixElement
        l2.Initialize(
    "l2").SetTemplate("line-2")
        
    Dim l3 As WixElement
        l3.Initialize(
    "l3").SetTemplate("line-3")
      
        
    Dim line As WixLayout
        line.Initialize(
    "linel").setline
        
    'add each of the elements to the line layout
        line.AddColumns(l1.item)
        line.AddColumns(l2.item)
        line.AddColumns(l3.item)
        
    'add line layout to the rows collection of the page element
        line.AddToRows(pg.Page)
     
    Last edited: Jun 16, 2019
    joulongleu and Johan Hormaza like this.
  3. Mashiane

    Mashiane Expert Licensed User

    3. The wide layout..
    Code:
    'create a wide layout
        Dim wide As WixLayout
        wide.Initialize(
    "widel").SetWide
        
    'create contents and add to columns collection
        Dim w1 As WixElement
        w1.Initialize(
    "w1").SetTemplate("wide-1").AddToColumns(wide.Layout)
        
    Dim w2 As WixElement
        w2.Initialize(
    "w2").SetTemplate("wide-2").AddToColumns(wide.Layout)
        
    Dim w3 As WixElement
        w3.Initialize(
    "w3").SetTemplate("wide-3").AddToColumns(wide.Layout)
        wide.AddToRows(pg.Page)
    On row 2, we have the wide layout we 3 columns. We create each element to be placed on the columns, these are like r2c1 to r2c3. We use the method AddToColumns to add to the parent and then when we have finished adding the elements to the layout we add the wide layout to the parent row collection.

    wide.png
     
    joulongleu likes this.
  4. Mashiane

    Mashiane Expert Licensed User

    4. The Space layout type..

    Code:
    Dim space As WixLayout
        space.Initialize(
    "spacel").SetSpace
        
    Dim s1 As WixElement
        s1.Initialize(
    "s1").SetTemplate("space-1")
        
    Dim s2 As WixElement
        s2.Initialize(
    "s2").SetTemplate("space-2")
        
    Dim s3 As WixElement
        s3.Initialize(
    "s3").SetTemplate("space-3")
        
    '
        space.AddColumns(s1.item)
        space.AddColumns(s2.item)
        space.AddColumns(s3.item)
        
    '
        space.AddToRows(pg.Page)
    space.png

    5. The head layout..

    Code:
    Dim head As WixLayout
        head.Initialize(
    "headl").sethead
        
    Dim h1 As WixElement
        h1.Initialize(
    "h1").SetTemplate("head-1")
        
    Dim h2 As WixElement
        h2.Initialize(
    "h2").SetTemplate("head-2")
        
    Dim h3 As WixElement
        h3.Initialize(
    "h3").SetTemplate("head-3")
        
    '
        head.AddColumns(h1.item)
        head.AddColumns(h2.item)
        head.AddColumns(h3.item)
        head.AddToRows(pg.Page)
    head.png

    6. The form layout

    Code:
    Dim form As WixLayout
        
    form.Initialize("forml").setform
        
    Dim f1 As WixElement
        f1.Initialize(
    "f1").SetTemplate("form-1").AddToColumns(form.Layout)
        
    Dim f2 As WixElement
        f2.Initialize(
    "f2").SetTemplate("form-2").AddToColumns(form.Layout)
        
    Dim f3 As WixElement
        f3.Initialize(
    "f3").SetTemplate("form-3").AddToColumns(form.Layout)
        
    form.AddToRows(pg.Page)
    form.png

    As noted above, there are various layouts that one can use to create a webix based SPA using BANano.

    We created a page and added 5 rows. In each of the rows there are 3 columns depicting the layout we use. In essence we have created some type of matrix grid.

    Now that we have learned how to create rows and create columns, we can start exploring how we can add various components to create meaningful applications.

    Ta!
     
    joulongleu and Johan Hormaza like this.
  5. Mashiane

    Mashiane Expert Licensed User

    As noted above, we have used a variant of adding elements to columns/rows, these being AddColumns / AddRows and AddToColumns / AddToRows. AddToColumns / AddToRows is used to add the particular element to the parent item columns / rows of the component.

    The updated lib with the various layouts is available here.

    Ta!
     
    joulongleu and Johan Hormaza like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice