B4J Tutorial [BANanoWebix] Lesson 4: Carousels, MultiView & TabView

Hi

This lesson is about the 3 layout elements being the carousel, multiview and the tabview. Each of the elements here are added in each row of our page.

Carousel: We will create a carousel with three sliders. We will use css to set the background and color of each slide.

Dim c As WixCarousel
    c.Initialize("")
    'create slides
    Dim sld1 As WixElement
    sld1.Initialize("")
    sld1.SetTemplate("Gilligan")
    sld1.SetStyle("background-color", "#ff0000")
    sld1.SetStyle("color", "#ffff00")
    sld1.AddToColumns(c.Carousel)
    '
    Dim sld2 As WixElement
    sld2.Initialize("")
    sld2.SetTemplate("Professor")
    sld2.SetStyle("background-color", "#00ff00")
    sld2.SetStyle("color", "#000000")
    c.AddSlide(sld2)
    '
    Dim sld3 As WixElement
    sld3.Initialize("")
    sld3.SetTemplate("Mary Ann")
    sld3.SetStyle("background-color", "#0000ff")
    sld3.SetStyle("color", "#ffffff")
    c.AddSlide(sld3)
    pg.Page.AddRows(c.Item)

Each slide in the carousel is added to the columns collection in the carousel. Whilst we can use .AddColumns, there is also an additional methid called .AddSlide added to easily add each slide.

To set the css element of each slide object, we have used the SetStyle method to change the background color and color of the slide. As the underlying elements are HTML elements, one can use any css combination they way for any WixElement.

After all the slides are added, we add the carousel to the rows of the page.

 

[Mashiane]

MultiView

For the multiview, we use a Segmented element with a multiview property turned to true for this example. As this acts like a tab view element, there are two sections to update for this, the header of each tab and then the linked child for that header. The child contents of each tab are stored in the Cells collection of the element.

'add segment
    Dim sg As WixSegmented
    sg.Initialize("")
    sg.Segmented.SetValue("left")
    sg.Segmented.SetMultiView(True)
    sg.AddOption("rick", "Rick","Alcoholic<br>Science Genius<br>Father of Beth")
    sg.AddOption("morty", "Morty","14 years old<br>Mortiest Morty<br>Sidekick")
    '
    pg.Page.AddRows(sg.Item)
    'IMPORTANT
    pg.Page.AddRowsCells(sg.Cells)
    '
    pg.Page.AddRowsSpacer

As this is a segmented element, we add options to it for each element header, e.g. Rick and Morty and then some details for each. There are two calls to made to create the multiview segmented control, one to add the structure of the element to the page and the second part to add the children Cells with AddRowsCells.

These are both added to the Rows collection of the page and linked together.

 

[Mashiane]

TabView

The tabview element is the actual tabs based view.

Dim tb As WixTabView
    tb.Initialize("")
    tb.AddItem("","Entry","Some form controls here",CreateMap("css":"entry"))
    tb.AddItem("","Results","Some results of data entry here",CreateMap("css":"results"))
    pg.Page.AddRows(tb.Item)

As noted here, there is a map to set the css for each element added to the tab. Whilst the actual css class is not included here, we are just demonstrating how one can apply css classes to the elements of the tabview.

Ta!

 

[Mashiane]

Lesson 4 Update

The multi-view component has been rewritten for ease of implementation. Previosly this was included as part of the segment control however it is a stand alone component and is linked to the segment via unique id numbers.

For example, here we create a page and add a row.

Sub Init(pgContainer As String)
    pg.Initialize("wp", pgContainer).SetHeader("Lesson 4.2: MultiView").SetResponsive("master").SetTypeClean("")
    '
    Dim R1 As WixRow
    R1.Initialize("r1")
    '
    Dim seg As WixSegmented
    seg.Initialize("tabbar").Setvalue("view1").SetMultiview(True)
    seg.AddOption("view1", "Form")
    seg.AddOption("view2", "Info")
    '
    Dim mv As WixMultiView
    mv.Initialize("mymv")
    '
    Dim v1 As WixElement
    v1.Initialize("view1").SetTemplate("Form Content")
    mv.AddItem(v1.Item)
    '
    Dim v2 As WixElement
    v2.Initialize("view2").Settemplate("<i>Info about the Form</i>")
    mv.AddItem(v2.Item)
    
    '
    R1.AddRows(seg.Item)
    R1.AddRows(mv.Item)
    
    '
    pg.AddRow(R1)
    '
    pg.ui
End Sub

We then create a segmented control and a multiview. We add two options called view1 and view2 to the segment control. On the multiview we also add items called view1 and view2 so that this is linked to the segmented component.

One can show a multi-view item by calling page.show("view2") and to hide it call pg.Hide("view1") via code.

Going back from in a multiview is achived by calling pg.Back("mymv")

A multi-view is useful for large applications as it enables 1 screen to be shown at a time.