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:

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


    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.

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

    2. The Line Layout


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

    Dim l1 As WixElement
    Dim l2 As WixElement
    Dim l3 As WixElement
    Dim line As WixLayout
    'add each of the elements to the line layout
    'add line layout to the rows collection of the page element
    Last edited: Jun 16, 2019
    joulongleu and Johan Hormaza like this.
  3. Mashiane

    Mashiane Expert Licensed User

    3. The wide layout..
    'create a wide layout
        Dim wide As WixLayout
    'create contents and add to columns collection
        Dim w1 As WixElement
    Dim w2 As WixElement
    Dim w3 As WixElement
    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.

    joulongleu likes this.
  4. Mashiane

    Mashiane Expert Licensed User

    4. The Space layout type..

    Dim space As WixLayout
    Dim s1 As WixElement
    Dim s2 As WixElement
    Dim s3 As WixElement

    5. The head layout..

    Dim head As WixLayout
    Dim h1 As WixElement
    Dim h2 As WixElement
    Dim h3 As WixElement

    6. The form layout

    Dim form As WixLayout
    Dim f1 As WixElement
    Dim f2 As WixElement
    Dim f3 As WixElement

    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.

    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.

    joulongleu and Johan Hormaza like this.
  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