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

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

  1. Mashiane

    Mashiane Expert Licensed User

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

    BWMP2.gif

    The code discussed below was generated like this...

     
    Last edited: Jul 24, 2019
    joulongleu likes this.
  2. Mashiane

    Mashiane Expert Licensed User

    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

    Code:
    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

    Code:
    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.

    Code:
    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..
     
  3. Mashiane

    Mashiane Expert Licensed User

    Creating the Cities grid and form

    Code:
    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

    Code:
    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.
     
    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