B4J Tutorial [BANanoWebix] Creating Multi-Page Apps - Part 1

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

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    Update: 2019-08-06 A SQLite based version is now available

    The purpose of this lesson is about how to create a multi-page app using BANanoWebix.

    Part 2
    Part 3
    Part 4
    Part 5

    For us to be able to do this, we will use a multi-view component. This acts like a wizard kinda of control that shows 1 page at a time. One is able to move from 1 page to another and manipulate whatever page contents they will do.

    1. We will use BANanoSQL to store our records in a database. We will create 3 tables, one for clients, one for cities, and one for positions.
    2. The clients form will have selects for positions and citities which should be stored on other database tables.
    3. We will create three forms to store the contents of the clients, positions and cities.
    4. We will use layout that has a sidebar to navigate our app.

    BWMP1.gif

    Part 1

    Part 1 of this exercise deals with creating the shell of our app. This is the toolbar, the sidebar and the multi-view to host other controls.

    Preparations.

    1. Get BANanoWebix 1.15 here
    2. Download the attached example code to a folder
    3. Copy from the BANanoWebix folder the extras.zip and fonts.zip to the Files folder of your project and 'Sync' your files in the 'Files' tab.

    Files.png

    4. Libraries - The needed libraries are available in the 1. Libraries folder on the BANanoWebix repo on Github.

    libraries.png

    5. You can get BANano from the forum

    In the above example we have animated the multi-view so that the pages slide in.

    Simplicity is key, so we have split our tasks to be small tasks as much as possible so that we can easily maintain the code.
     

    Attached Files:

    Last edited: Aug 6, 2019
    Anser and joulongleu like this.
  2. Mashiane

    Mashiane Expert Licensed User

    The modules

    pgIndex - this is the main module that builts our application and shows the UX.
    modSettings - this is the module that deals with the settings i.e. Positions and Cities, we will build the UX for the forms to capture cities and positions in these modules.
    modSideMenu - this is the module that builds the sidebar for our app.

    Building the App

    Code:
    Sub Init(pgContainer As String)
        pg.Initialize(
    "index", pgContainer).SetResponsive(True)
        
    '
        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("Our Clients").Pop
        tblBar.AddSpacer
        
        pg.AddRows(tblBar.Item)
        
    '
        Dim R2 As WixRow
        R2.Initialize(
    "R2")
        R2.AddColumns(modSideMenu.Create(pg))
        
    '
        Dim mv As WixMultiView
        mv.Initialize(
    "mymv")
        
    '
        modSettings.AddToMultiView(mv)
        
    '
        R2.AddColumns(mv.item)
        pg.AddRow(R2)
        
    '
        pg.UI
    End Sub

    Sub OpenMenu()
        pg.Toggle(
    "sm")
    End Sub
    Here we create an empty page, add a toolbar in it with an icon to toggle the sidebar and a label to show our app description. We add the toolbar to the rows collection of the page.

    We then create another row R2 and we add the sidebar in the columns collection of that row. In the same row we add a multiview on the columns collection of that row. Basically in R2 (row2) we have 2 columns, 1 for the sidebar and another for the multiview.

    We then add the R2 to the rows collection of the page and then render the UI.

    We want our toggle button to open and close the sidemenu, so we link a Click event to it which executes OpenMenu.

    Building the SideBar

    For this we have created a module where the sidebar is built. This module builds the sidebar and also links each clickable buttons / icons to the respective handlers to perform the tasks.

    Code:
    'create the side menu
    Sub Create(pg As WixPage) As Map
        
    Dim meid As String
        
    Page = pg
        sm.Initialize(
    "sm").SetCollapsed(True).SetActiveTitle(True)
        sm.SideBar.OnAfterSelect(BANano.CallBack(Me, 
    "SideMenu_Click"Array(meid)))
        sm.AddItem(
    """clients""Clients","","mdi mdi-account-group""","")
        sm.AddItem(
    """settings""Settings","","mdi mdi-settings""","")
        SettingsMenu
        
    Return sm.item
    End Sub

    'when side menu is clicked
    Sub SideMenu_Click(smid As String)
        
    Page.Message(smid)
        
    'get the prefix and suffix of the selected item
        Dim sprefix As String = Page.MvField(smid,1,"_")
        
    Select Case sprefix
        
    Case "settings"
            modSettings.SettingsHandler(
    Page, smid)
        
    Case "clients"
        
    End Select
    End Sub

    Sub SettingsMenu
        sm.AddItem(
    "settings""settings_positions""Positions","","mdi mdi-file-tree""","")
        sm.AddItem(
    "settings""settings_cities""Cities","","mdi mdi-city""","")
    End Sub
    We initialize the side bar called 'sm'. We attach an event to it called OnAfterSelect so that each time an item on the sidebar is clicked, then it activates SideMenu_Click event passing the menu item being selected. To identify child items per each of the menus, we differentiate the children with an underscore _.

    Under the settings item,we add two sub-items, positions and cities. So when each of the items is selected, if the prefix is "settings" we call the SettingsHandler in the modSettings module.

    Handling SideBar Events

    In the second column of our page, we added a multiview with items that were relevant to the settings menu with

    Code:
    Dim mv As WixMultiView
        mv.Initialize(
    "mymv")
        
    '
        modSettings.AddToMultiView(mv)
        
    '
        R2.AddColumns(mv.item)
    This multi-view was added to the R2 after the toolbar. What .AddToMultiView does is to create 'pages' for Cities and Positions as depicted below.

    Code:
    Sub AddToMultiView(mv As WixMultiView)
        
    Dim a As WixElement
        a.Initialize(
    "mv_settings_positions").SetTemplate("Positions")
        
    '
        Dim b As WixElement
        b.Initialize(
    "mv_settings_cities").SetTemplate("Cities")
        
    '
        mv.AddItem(a.Item)
        mv.AddItem(b.Item)
    End Sub
    This enables us to show each page that we want depending on the multi-view index we have created.

    For positions, we have created a container called mv_settings_positions whilst for cities we have created a container called mv_settings_cities.

    For us to show the different 'pages' in our app, we need to link the containers to the respective side bar items. Remember, when the sidebar item is clicked, this sub is called.

    Code:
    'when side menu is clicked
    Sub SideMenu_Click(smid As String)
        
    Page.Message(smid)
        
    'get the prefix and suffix of the selected item
        Dim sprefix As String = Page.MvField(smid,1,"_")
        
    Select Case sprefix
        
    Case "settings"
            modSettings.SettingsHandler(
    Page, smid)
        
    Case "clients"
        
    End Select
    End Sub
    Thus for anything 'settings' related, we call the settingsHandler, the settings handler determines which element is selected and then shows the relevant page with pg.Show(CONTAINERNAME).

    Code:
    'controller code for the side menu
    Sub SettingsHandler(pg As WixPage, menuitem As String)
        
    Page = pg
        
    Select Case menuitem
            
    Case "settings_positions"
                pg.Show(
    "mv_settings_positions")
            
    Case "settings_cities"
                pg.Show(
    "mv_settings_cities")
        
    End Select
    End Sub
    We will place contents inside these 'pages' in Part 2 of this lesson.

    Ta!
     
  3. Mashiane

    Mashiane Expert Licensed User

    joulongleu likes 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