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

Ola

Download BANanoWebix Things

In Part 1, we created the shell skeleton of our apps, this entailed the multi-view control and the various pages we needed. These were clients, positions and cities.

In Part 2, we looked at the backend of our app, we created a BANanoSQL database for cities and positions and we parked the client table.

In Part 3, we look at creating the various screens for both the cities and the positions, this will entail creating the data-table and forms for cities and positions.

Part 4

The code for this example is attached as BANanoWebixMultiPage from the download above. Copy the files in the 1. Libraries folder to your external b4j libraries folder.

At the end of this part, we should have achieved something like this..

The code discussed below was generated like this...

 

[Mashiane]

We have made a few changes to our BANanoWebix libraries and the BWFD so, ensure that you get the latest from this GitHub repo.

Creating the positions grid and form

Both the grid and form, need to fit on the cell of the multi-view. So to do this we will create subs that will create them and then add these to the collections collection of the multi-view page.

Positions Grid

Sub CreatePositionsDT As WixDataTable
    Dim dtpositions As WixDataTable
    dtpositions.Initialize("dtpositions")
    dtpositions.SetResizeColumn("true")
    dtpositions.SetScrollY("true")
    dtpositions.SetSelect("row")
    dtpositions.SetForm("frmcolors")
    dtpositions.SetScroll("y")
    
    Dim id As WixDataColumn
    id.Initialize("id")
    id.SetName("id")
    id.SetHeader("#")
    dtpositions.AddDataColumns(id)

    Dim value As WixDataColumn
    value.Initialize("value")
    value.SetHeader("Position")
    value.SetSort("string")
    dtpositions.AddDataColumns(value)

    Dim color As WixDataColumn
    color.Initialize("color")
    color.SetHeader("Color")
    dtpositions.AddDataColumns(color)
    Return dtpositions
End Sub

We define a datatable and call it 'dtpositions', we want the columns to be resizable and it should have only the vertical scrollbar. We want the selection method to be 'row', this can be column, cell, true or false.

We then create the necessary columns needed for the data-table. The column ids should match the field names of our tables.

Positions Form

Sub CreatePositionsForm As WixForm
    Dim form As WixForm
    form.Initialize("formcolors")
    form.SetName("formcolors")
    form.SetElementsConfigJSON($"{"labelPosition":"top"}"$)

    Dim id As WixText
    id.Initialize("id")
    id.SetName("id")
    id.SetType("text")
    id.SetLabel("#")
    form.AddRows(id.Item)

    Dim value As WixText
    value.Initialize("value")
    value.SetLocalId("value")
    value.SetName("value")
    value.SetType("text")
    value.SetLabel("Position")
    form.AddRows(value.Item)

    Dim color As WixColorPicker
    color.Initialize("color")
    color.SetName("color")
    color.SetLabel("Color")
    form.AddRows(color.Item)
    Return form
End Sub

We then create a form to capture the positions. This will have the id and the value. We set the properties of each element we need and add these elements to the rows collection of the form and then return the form.

Adding the form to grid and form to the page

We need to add the grid and form to the multi-view page relevant to them. To build the multi-view, we used the AddToMultiView sub.

We update our code for the positions page to reflect our changes.

Dim a As WixElement
    a.Initialize("mv_settings_positions").SetTemplate("Positions").SetTypeLine("")
    a.AddColumns(CreatePositionsDT.item)
    a.AddColumnsResizer("")
    a.AddColumns(CreatePositionsForm.Item)

We want our grid and form to be able to be resizable, to do this we add a resizer between them. This resizer one is able to drag and each part will be resizable.

The Cities screen behaves the same way..

 

[Mashiane]

Creating the Cities grid and form

Sub CreateCities As WixDataTable
    Dim dtcities As WixDataTable
    dtcities.Initialize("dtcities")
    dtcities.SetResizeColumn("true")
    dtcities.SetScroll("y")
    dtcities.SetSelect("row")
    '
    Dim id As WixDataColumn
    id.Initialize("id")
    id.SetHeader("#")
    dtcities.AddDataColumns(id)
    '
    Dim value As WixDataColumn
    value.Initialize("value")
    value.SetHeader("City")
    value.SetSort("string")
    dtcities.AddDataColumns(value)
    Return dtcities
End Sub

Sub CreateCitiesForm As WixForm
    Dim form As WixForm
    form.Initialize("formcities")
    form.SetName("formcities")
    form.SetElementsConfigJSON($"{"labelPosition":"top"}"$)


    Dim id As WixText
    id.Initialize("id")
    id.SetLocalId("id")
    id.SetName("id")
    id.SetType("text")
    id.SetLabel("#")
    id.SetRequired("true")
    form.AddRows(id.Item)

    Dim value As WixText
    value.Initialize("value")
    value.SetLocalId("value")
    value.SetName("value")
    value.SetType("text")
    value.SetLabel("City Name")
    value.SetRequired("true")
    value.SetValidate("isNotEmpty")
    value.SetInvalidMessage("City name should be specified")
    form.AddRows(value.Item)
    Return form
End Sub

The same principles explained above applies..

The final .AddMultiView sub now looks like this

Sub AddToMultiView(mv As WixMultiView)
    Dim a As WixElement
    a.Initialize("mv_settings_positions").SetTemplate("Positions").SetTypeLine("")
    a.AddColumns(CreatePositionsDT.item)
    a.AddColumnsResizer("")
    a.AddColumns(CreatePositionsForm.Item)
    '
    Dim b As WixElement
    b.Initialize("mv_settings_cities")
    b.AddColumns(CreateCities.Item)
    b.AddColumnsResizer("")
    b.AddColumns(CreateCitiesForm.Item)
    '
    mv.AddItem(a.Item)
    mv.AddItem(b.Item)
End Sub

And now when we run the development app, we see as per gif above.