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

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

  1. Mashiane

    Mashiane Expert Licensed User

    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.

    WebixCarousel.gif

    Code:
    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.
     
  2. Mashiane

    Mashiane Expert Licensed User

    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.

    WebixMultiView.gif

    Code:
    '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.
     
  3. Mashiane

    Mashiane Expert Licensed User

    TabView

    The tabview element is the actual tabs based view.

    WebixTabView.gif

    Code:
    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!
     
  4. Mashiane

    Mashiane Expert Licensed User

    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.

    MultiView.gif

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

    Code:
    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.
     
    Johan Hormaza, joulongleu and ThRuST 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