B4J Tutorial [BANanoWebix] Lesson 16 - The Sidebar

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

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    Well this is one of my favourate elements.

    Lesson16.gif

    First lets add the toolbar in a row with badges and then after that we add the sidebar with the various icons. The structure of the menu has been borrowed greatly from the WixMenu element.

    The ToolBar



    We initialize a menu and add buttons to it. The first menu item, being an icon, we add an event to it so that we can toggle the sidebar.

    Code:
    Dim R1 As WixRow
        R1.Initialize(
    "R1")
        
        
    'add toolbar
        Dim tblBar As WixToolBar
        tblBar.Initialize(
    "tblBar")
        tblBar.CreateIcon(
    "menuopen").SetIcon("mdi mdi-menu").SetClick(BANano.CallBack(Me, "OpenMenu"Null)).Pop
        tblBar.CreateLabel(
    "heading").SetLabel("Lesson 16: Side Bar").Pop
        tblBar.AddSpacer
        tblBar.CreateIcon(
    "").SetIcon("mdi mdi-comment").SetBadge("4").pop
        tblBar.CreateIcon(
    "").SetIcon("mdi mdi-bell").SetBadge("10").Pop
        tblBar.setPadding(
    3)

        
    'pg.Page.AddRows(tblBar.Item)
        R1.AddRows(tblBar.Item)
    When the menu icon is clicked, it calls the callback to toggle the sidebar.

    Code:
    Sub OpenMenu()
        pg.Toggle(
    "sm")
    End Sub
    The SideBar

    The sidebar items are created in such a way that one method is used, called .AddItem that also accepts the parent 'id' of the owner item.

    Code:
    Dim sm As WixSideBar
        sm.Initialize(
    "sm").SetPositionRight("").SetCollapsed(True).SetActiveTitle(True)
        
    '
        sm.AddItem("""dashboard""Dashboards","","mdi mdi-view-dashboard""2","")
        sm.AddItem(
    "dashboard""dashboard1""Dashboard 1","","mdi mdi-view-dashboard""","")
        sm.AddItem(
    "dashboard""dashboard2""Dashboard 2","","mdi mdi-view-dashboard""","")
        
    '   
        sm.AddItem("""layouts""Layouts""""mdi mdi-view-column""","")
        sm.AddItem(
    "layouts""accordions""Accordions""""mdi mdi-view-column""","")
        sm.AddItem(
    "layouts""portlets""Portlets""""mdi mdi-view-column""","")
        
    '
        sm.AddItem("""tables""Data Tables""""mdi mdi-table""","")
        sm.AddItem(
    """uis""UI Components""""mdi mdi-puzzle""","")
        
        
    '
        Dim R2 As WixRow
        R2.Initialize(
    "R2")
        
    '
        R2.AddColumns(sm.Item)
        R2.AddColumns(CreateMap())
        
    '
        pg.Page.AddRow(R1)
        pg.Page.AddRow(R2)
        
    '
        pg.ui
        
    '
        Dim meid As Map
        pg.OnItemClick(
    "sm", BANano.CallBack(Me, "itemClick"Array(meid)))
    The items are added to the sidebar and the sidebar added to the 2nd row of our page as the 1st row has the toolbar.

    You might have picked that this is using 'mdi' i.e Material Design Icons, these are added via.

    Code:
    BANano.Header.AddCSSFile("https://cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css")
    Easily for the sidebar we have added the itemClick method and just message the selected key out.

    Code:
    Sub itemClick(meID As String)
        pg.Message(meID)
    End Sub
    As you might have noted, there is a consistency of how things are being done like methods, ids, values etc.
     
    joulongleu and José J. Aguilar 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