B4J Tutorial [BANanoWebix] Lesson 3: Let's create some accordions

Mashiane · Jun 16, 2019

Hi

Based on what we have learned in lesson 1 and 2, here we will explorer another layout element, the accordion.

The accordion we can create comes in two flavours, one vertical and one horizontal as expected.

The code module that we need to call for this tut is pgLayouts1.Init on BANano_Ready ONLY.

For this we have created a WixAccordion element with some few properties and a method to add some elements to it. Let's look at the code..

B4X:

'Static code module
Sub Process_Globals
    Private pg As WixPage
End Sub

Sub Init()
    pg.Initialize("")
    
    Dim acc As WixAccordion
    acc.Initialize("")
    acc.SetHorizontal(False)
        
    acc.AddItem("","Column 1","Hellow from column 1",200,False)
    acc.AddItem("","Column 2","Hellow from column 2",300,True)
    acc.AddItem("","Column 3","Hellow from column 3",0,True)
    'assign accordion to the page
    pg.Page = acc.Accordion
    '
    pg.ui
End Sub

We have created a 'pg' WixPage element. After initializing it we create an accordion called acc.

We want to ensure that this displays in a vertical manner so we need to turn off the default setting by executing .SetHorizontal(False)

We then start adding items to it, this takes the header, the body, the width of each and whether its collapsed or not.

After adding the items we assign the accordion object to the page using

B4X:

pg.Page = acc.Accordion

The Page object of WixPage and the Accordion object are both defined from WixElement.

We then render the UI with pg.UI.

The accordion in essence takes the whole page here.

Mashiane · Jun 16, 2019

The default accordion in this instance is created and added as part of a whole. We want our accordion to sit on the left side of the page.

For this we have created 2 columns, one to host the accordion and the other to host the various rows. From the layouts we examined before, we will create a wide layout for the page and add an accordion with a specific with, setting it also to wide for the 'gray areas'

After the accordion is created we add it to the Columns collection of the page.

B4X:

Sub Init()
    'create a wide layout on the page
    pg.Initialize("")
    pg.Page.SetType("wide")
    '
    Dim acc As WixAccordion
    acc.Initialize("va")
    acc.Accordion.SetWidth(300)
    acc.Accordion.SetTypeWide
    acc.AddItem("","Babylon 5","Sheridan<br>Delenn<br>Garibaldi<br>G'Kar<br>Londo",0,False)
    acc.AddItem("","Star Trek","Kirk<br>Sisko<br>Archer<br>Picard<br>Janeway",0,True)
    acc.AddItem("","Stargate SG-1","O'Neill<br>Danial<br>Carter<br>Teal'c",0,True)
    'add the layout to the columns collection of the page
    acc.Accordion.AddToColumns(pg.Page)
    '
    Dim lout As WixLayout
    lout.Initialize("")
    lout.Layout.SetTypeWide
    Dim r1 As WixElement
    r1.Initialize("").SetTemplate("Row-1").AddToRows(lout.Layout)
    Dim r2 As WixElement
    r2.Initialize("").SetTemplate("Row-2").AddToRows(lout.Layout)
    '
    lout.Layout.AddRowsSpacer
    '
    Dim r3 As WixElement
    r3.Initialize("").SetTemplate("Row-3").AddToRows(lout.Layout)
    Dim r4 As WixElement
    r4.Initialize("").SetTemplate("Row-4").AddToRows(lout.Layout)
    lout.Layout.AddToColumns(pg.Page)
    pg.ui
End Sub

For the second column in the page, we create a layout, add 2 rows and a spacer. A spacer ensures that stuff within the container is split into equal lengths. It divides whatever is before it and whatever is after it equally.

This example is in pgLayouts2 code module and to explore it un-comment only that line from the source code.

NB: After careful consideration, some un-necessary chaining for the objects was removed as this created extra code that can be called from the WixElement, without chaining.

Fork BANanoWebix

B4J Tutorial [BANanoWebix] Lesson 3: Let's create some accordions

Mashiane

Expert

Privacy & Transparency

Privacy & Transparency