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

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

  1. Mashiane

    Mashiane Expert Licensed User

    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.

    WebixVerticalAccordion.gif

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

    Code:
    '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

    Code:
    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.
     
    Anser and Johan Hormaza like this.
  2. Mashiane

    Mashiane Expert Licensed User

    HAccordion.png

    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.

    Code:
    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
     
    joulongleu, Anser 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