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

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.

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.

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

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.

 

[Mashiane]

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

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.

'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

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.

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.

'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).

'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!

 

[Mashiane]

There is a vast array of material design icons here, http://materialdesignicons.com