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

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.

 

[Mashiane]

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
    pg.Initialize("").SetClean

'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

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

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)

 

[Mashiane]

3. The wide layout..

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

 

[Mashiane]

4. The Space layout type..

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)

5. The head layout..

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)

6. The form layout

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)

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!

 

[Mashiane]

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!