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:

B4X: 
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.
 
Click to expand...

Mashiane

Expert
Licensed User
Longtime 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.

B4X: 
'initialize the page, we want it to be a layout and the type should be wide
Private pg As WixPage
    pg.Initialize("").SetClean
B4X: 
'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...

B4X: 
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:

Mashiane

Expert
Licensed User
Longtime User
3. The wide layout..
B4X: 
'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

Expert
Licensed User
Longtime User
4. The Space layout type..

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

B4X: 
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

B4X: 
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

Expert
Licensed User
Longtime 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!
 
You must log in or register to reply here.

Similar Threads

  • Article
B4J Tutorial [Web][SithasoIONIC7][Wireframes] - Creating b4x layouts
Replies
1
Views
891
broozdev
B
  • Question
B4J Question [BANano] How can one create layout that work like b4x anchoring?
Replies
0
Views
566
Mashiane
  • Question
Android Question [B4X] [XUI] SD XUIView2 - on GridView how to use own layouts design?
Replies
4
Views
2K
Star-Dust
J
  • Question
B4J Question [solved] Designer Layout Different From Runtime Layout
Replies
3
Views
659
JHAustin
J
  • Question
B4J Question [BANano] [SOLVED] Handling parent & child layouts
Replies
4
Views
909
Mashiane
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…