B4J Tutorial [BANanoWebix] Lesson 21 TabBar

Discussion in 'B4J Tutorials' started by Mashiane, Jul 1, 2019.

  1. Mashiane

    Mashiane Expert Licensed User


    The tab-bar as depicted below is placed at the bottom of the page...

    Dim tb As WixTabBar

    Her we create a tab-bar and each item added is being linked to a wixelement with the same name


    We have enabled animation for it and added it to the second row of our page with some icons.

    1. We added an item called 'listview', we now create a list with the same name and add some data to list.

    'load flat data
        Dim data As List
    "id":1"value":"The Shawshank Redemption""year":1994"votes":678790"rating":9.2"rank":1))
    "id":2"value":"The Godfather""year":1972"votes":511495"rating":9.2"rank":2))
    "id":3"value":"The Godfather: Part II""year":1974"votes":319352"rating":9.0"rank":3))
    "id":4"value":"The Good, the Bad And the Ugly""year":1966"votes":213030"rating":8.9"rank":4))
    "id":5"value":"Pulp fiction""year":1994"votes":533848"rating":8.9"rank":5))
    "id":6"value":"12 Angry Men""year":1957"votes":164558"rating":8.9"rank":6))
    Dim lst As WixList
    "#rank#. #value# <div style='padding-left:18px'> Year:#year#, votes:#votes# </div>")
    We set the item height of each item to display on the list and then define a template to show the data we need and then link the data. The link is established automatically between the tab-bar and the list with their 'id' names.

    Dim frm As WixLayout
    Dim l1 As WixElement
    "l1").SetTemplate("Put form contents here...")
        Dim frm1 As WixLayout
    Dim l2 As WixElement
    "l2").SetTemplate("About TabBar...")
    Finalizing the exercise is then creating additional widgets and then adding those to the Cells collection of R1 and then adding the row to the page.

    Get BANanoWebix
  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