B4J Tutorial [BANanoWebix] Lesson 6: Form Data Entry Elements

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

  1. Mashiane

    Mashiane Expert Licensed User


    Fork it here

    Let's move on and explore the form data entry elements. As we are just limited to basic elements for the open source version of this lib, some components one can check on their website. There are a lot of properties and methods also for the elements but we just touch on the basic here to get us up and running.

    On the face of it, we have a form here with 3 columns and in each column form inputs.


    Each form element added here is initialized first and properties set via a chaining method to create and set its settings and then add it to the column of the form.

    We have the following elements here:

    Column 1

    1. Button
    2. Checkbox - the label can sit either on left or right side. We have also added 'hint' text under it.
    3. ColorPicker
    4. ComboBox - we use SetData(ListName) to feed it the items. This enables text input.
    5. Counter - we have executed Disable in it. Can set min/max/stepper
    6. DateTimePicker - to select dates and times
    7. Password Textbox - this inherits the TextBox element with .SetType("password")
    8. A Label
    9. A centered icon
    10. DBLList - funny name, you get the drift
    11. A fieldlist - you can use this to group elements.

    Column 2

    1. Radio - the options can also be set to display in vertical position.
    2. Segmented control - we have used this before to make a WixMultiView element in our previous lesson.
    3. TextBox
    4. RichSelect - acts like a combo, does not allow text input
    5. Select - acts like a combo (more default look)
    6. Search
    7. Slider - can set min / max/ stepper
    8. Rich Text
    9. Text Area
    10. Toggle Button

    Column 3

    1. Form Input - enables one to house other elements in the body of an element. We have created a DataTable here and put it inside the FormInput element.

    As discussed before, all these elements are based from the WixElement. By just changing the 'view' property of the WixElement, we define and create different elements and then can set attributes for them.

    Just like BANanoElement component that uses SetValue/GetValue to set and get the element values, Webix also uses .GetValue and .SetValue, built in functions of Webix.

    'set the item value
    Sub SetValue(itm As String, value As String)
        itm = itm.ToLowerCase
    End Sub

    'get an item value
    Sub GetValue(itm As StringAs String
        itm = itm.ToLowerCase
    Dim res As String
        res = Dollar.Selector(itm).RunMethod(
    Return res
    End Sub
    Both these methods are in the WixPage component of BANanoWebix.

    NB. If you don't set the id of the element on initialization, you need to run .SetName so that getvalue/setvalue will be able to pick it

    We have ensured that all elements created with BANanoWebix, being input elements are also allocated a name. With such a specification, its easy to set / get all values from a form all at once as a map.

    This is possible using SetValues and GetValues

    'set the form values
    Sub SetValues(itm As String, values As Map)
        itm = itm.ToLowerCase
    End Sub

    'get the form values
    Sub GetValues(itm As StringAs Map
        itm = itm.ToLowerCase
    Dim res As Map
        res = Dollar.Selector(itm).RunMethod(
    Return res
    End Sub
    For the text input, setting its type to the various HTML input types like "email", "url" etc will make it such.

    The pgDataEntry code module has demonstrated how these are added to the form. It is better when input controls are placed on a form as a single call can be made to read and set the elements using .SetValues and .GetValues.

    As you will note, most controls here seem to have the word 'Kamelot', this is because the 'data' source for them is the same. We created a dataObj and then passed it to the data attribute for each of those elements..

    'create a dummy data source
        Dim dataObj As List
    "id" : "1""value" : "Dream Theater"))
    "id" : "2""value" : "Kamelot"))
    "id" : "3""value" : "Circus Maximus"))
    The id is the value that will be saved to your DB whilst the value is the display value.

    Let's look at the code..
    Last edited: Jun 19, 2019
    Anser and joulongleu like this.
  2. Mashiane

    Mashiane Expert Licensed User

    Sub Init
    'initialize the page
        pg.Initialize("").SetHeader("Lesson 6: Form Data Entry")
    'create a dummy data source
        Dim dataObj As List
    "id" : "1""value" : "Dream Theater"))
    "id" : "2""value" : "Kamelot"))
    "id" : "3""value" : "Circus Maximus"))
    'create a form
        Dim form1 As WixForm
    'set the width and height of the form
    'set border of the form
        form1.Form.SetStyle("border""2px solid #000000")
    'set margins of the form
    'set default configuration, all label widthds should be 120px
    'define columns
        Dim C1 As WixColumn
    'add elements to column
        Dim e1 As WixButton
    "").SetLabel("Button").SetTooltip("This is my tooltip!")
    'add element to the rows collection of the column
        Dim e2 As WixCheckBox
    "chk","Check this to agree")
        Dim e3 As WixColorPicker
        Dim e4 As WixCombo
        Dim e5 As WixCounter
        Dim e6 As WixDateTimePicker
    "").SetLabel("Date Time Picker").SetEditable(True).SetTimePicker(True).SetFormat("%d %M %Y at %H:%i")
        Dim e22 As WixTextBox
    "pwd","Enter your password here...")
        Dim e7 As WixLabel
    "").SetLabel("This is a label, and below is an icon")
        Dim e8 As WixIcon
        Dim e20 As WixDBLList
        Dim e21 As WixFieldSet
    'add column to the form
        form1.AddColumnsSpacer  'C2
        'define another column
        Dim C3 As WixColumn
        Dim e9 As WixRadio
        Dim e10 As WixSegmented
        Dim e11 As WixTextBox
        Dim e14 As WixRichSelect
    "").SetLabel("Rich Select").SetValue(2).SetOptions(dataObj)
        Dim e15 As WixSelect
        Dim e17 As WixSearch
        Dim e18 As WixSlider
        Dim e19 As WixRichText
    "").SetLabel("Rich Text").Setheight(150)
        Dim e12 As WixTextArea
    "").SetLabel("Text Area").SetHeight(220)
        Dim e13 As WixButton
    "").SetToggle("").SetOnLabel("Toggle ON").SetOffLabel("Toggle OFF").SetWidth(100).SetAlignRight("")
        'add a spacer color
        form1.AddColumnsSpacer  'C2
        'create a form
        Dim C2 As WixForm
    Dim C2C1 As WixColumn
        Dim manID As WixTextBox
    "manID").SetLabel("Manager ID").SetWidth(300)
        Dim datal As List
    "name" : "Jack""position" : "Dillon""phone" : "111-222-3333"))
    "name" : "Susan""position" : "Everest""phone" : "444-555-6666"))
    "name" : "Charlie""position" : "Jackson""phone" : "777-888-9999"))
        Dim dt As WixDataTable
    'add the headers we wont use auto config
        dt.AddHeader("name""Employee Name",0).AddHeader("position""Position",0).AddHeader("phone""Phone #",1)
    'set data
        Dim fi As WixFormInput
    "").SetLabel("Employees Grid").SetBody(dt.item)
        Dim btnS As WixButton
    'add form to the rows collection
    'draw the user interface
    End Sub
    I will create for each element just like the .CreateButton method we saw earlier, simpler versions for the input controls that will enable chaining. That seems more simpler.

    The datatable acts like a grid and will be explored in detail in its own lesson plan. We will also look at events as we have only discussed the 'click' event of the button so long.

    Most of these elements you have noticed seem to share very similar properties to make them work, thats the simplicity I have come to enjoy.

    Did you note that the label of the 'password' is on the top? One can easily place the label anywhere they want and also align it and also set its width.

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