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

    Hi

    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.

    WebixFormDataEntry.png

    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.

    Code:
    'set the item value
    Sub SetValue(itm As String, value As String)
        itm = itm.ToLowerCase
        Dollar.Selector(itm).RunMethod(
    "setValue",Array(value))
    End Sub

    'get an item value
    Sub GetValue(itm As StringAs String
        itm = itm.ToLowerCase
        
    Dim res As String
        res = Dollar.Selector(itm).RunMethod(
    "getValue",Null).result
        
    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

    Code:
    'set the form values
    Sub SetValues(itm As String, values As Map)
        itm = itm.ToLowerCase
        Dollar.Selector(itm).RunMethod(
    "setValues",Array(values))
    End Sub

    'get the form values
    Sub GetValues(itm As StringAs Map
        itm = itm.ToLowerCase
        
    Dim res As Map
        res = Dollar.Selector(itm).RunMethod(
    "getValues",Null).result
        
    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..

    Code:
    'create a dummy data source
        Dim dataObj As List
        dataObj.Initialize
        dataObj.Add(CreateMap(
    "id" : "1""value" : "Dream Theater"))
        dataObj.Add(CreateMap(
    "id" : "2""value" : "Kamelot"))
        dataObj.Add(CreateMap(
    "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

    Code:
    Sub Init
        
    'initialize the page
        pg.Initialize("").SetHeader("Lesson 6: Form Data Entry")
        
        
    'create a dummy data source
        Dim dataObj As List
        dataObj.Initialize
        dataObj.Add(CreateMap(
    "id" : "1""value" : "Dream Theater"))
        dataObj.Add(CreateMap(
    "id" : "2""value" : "Kamelot"))
        dataObj.Add(CreateMap(
    "id" : "3""value" : "Circus Maximus"))
        
        
    'create a form
        Dim form1 As WixForm
        form1.Initialize(
    "form1")
        
    'set the width and height of the form
        form1.SetWidth(1000).SetHeight(820)
        
    'set border of the form
        form1.Form.SetStyle("border""2px solid #000000")
        
    'set margins of the form
        form1.Form.SetStyle("margin""10px")
        
    'set default configuration, all label widthds should be 120px
        form1.Form.SetDefaultLabelWidth(120)
        
    'define columns
        Dim C1 As WixColumn
        C1.Initialize(
    "C1").SetWidth(420)
        
    'add elements to column
        Dim e1 As WixButton
        e1.Initialize(
    "").SetLabel("Button").SetTooltip("This is my tooltip!")
        
    'add element to the rows collection of the column
        C1.AddRows(e1.Item)
        
    '
        Dim e2 As WixCheckBox
        e2.Initialize(
    "chk").SetLabel("CheckBox")
        C1.AddRows(e2.Item)
        pg.SetHint(
    "chk","Check this to agree")
        
    '
        Dim e3 As WixColorPicker
        e3.Initialize(
    "").SetLabel("ColorPicker")
        C1.AddRows(e3.Item)
        
    '
        Dim e4 As WixCombo
        e4.Initialize(
    "").SetLabel("Combo").SetValue(2)
        e4.SetOptions(dataObj).SetRequired(
    True)
        C1.AddRows(e4.Item)
        
    '
        Dim e5 As WixCounter
        e5.Initialize(
    "cnt").SetLabel("Counter")
        C1.AddRows(e5.Item)
        
    '
        Dim e6 As WixDateTimePicker
        e6.Initialize(
    "").SetLabel("Date Time Picker").SetEditable(True).SetTimePicker(True).SetFormat("%d %M %Y at %H:%i")
        C1.AddRows(e6.Item)
        
    '
        Dim e22 As WixTextBox
        e22.Initialize(
    "pwd").SetTypePassword("").SetLabel("Password").SetValue("Password...").SetLabelPosition("top")
        C1.AddRows(e22.Item)
        pg.SetHint(
    "pwd","Enter your password here...")
        
    '
        Dim e7 As WixLabel
        e7.Initialize(
    "").SetLabel("This is a label, and below is an icon")
        C1.AddRows(e7.Item)
        
    '
        Dim e8 As WixIcon
        e8.Initialize(
    "").SetAlignCenter("").SetIcon("wxi-file")
        C1.AddRows(e8.Item)
        
    '
        Dim e20 As WixDBLList
        e20.Initialize(
    "").SetHeight(200).SetValue("1,3").SetStyle("margin-top""10px!important").SetData(dataObj)
        C1.AddRows(e20.Item)
        
    '
        Dim e21 As WixFieldSet
        e21.Initialize(
    "").SetLabel("Field-Set")
        C1.AddRows(e21.Item)
        
        
    'add column to the form
        form1.AddColumn(C1)
        
    '
        form1.AddColumnsSpacer  'C2
        '
        'define another column
        Dim C3 As WixColumn
        C3.Initialize(
    "C3").SetWidth(520)
        
    '
        Dim e9 As WixRadio
        e9.Initialize(
    "").SetLabel("Radio").SetValue(1).SetOptions(dataObj)
        C3.AddRows(e9.Item)
        
    '
        Dim e10 As WixSegmented
        e10.Initialize(
    "").SetLabel("Segmented").SetValue(3).SetOptions(dataObj)
        C3.AddRows(e10.Item)
        
    '
        Dim e11 As WixTextBox
        e11.Initialize(
    "myText").SetLabel("Text").SetLabelAlign("right")
        C3.AddRows(e11.Item)
        
    '
        Dim e14 As WixRichSelect
        e14.Initialize(
    "").SetLabel("Rich Select").SetValue(2).SetOptions(dataObj)
        C3.AddRows(e14.Item)
        
    '
        Dim e15 As WixSelect
        e15.Initialize(
    "").SetLabel("Select").SetValue(1).SetOptions(dataObj)
        C3.AddRows(e15.Item)
        
    '
        Dim e17 As WixSearch
        e17.Initialize(
    "").SetLabel("Search")
        C3.AddRows(e17.Item)
        
    '
        Dim e18 As WixSlider
        e18.Initialize(
    "").SetLabel("Slider")
        C3.AddRows(e18.Item)
        
    '
        Dim e19 As WixRichText
        e19.Initialize(
    "").SetLabel("Rich Text").Setheight(150)
        C3.AddRows(e19.Item) 
        
    '
        Dim e12 As WixTextArea
        e12.Initialize(
    "").SetLabel("Text Area").SetHeight(220)
        C3.AddRows(e12.Item)
        
    '
        Dim e13 As WixButton
        e13.Initialize(
    "").SetToggle("").SetOnLabel("Toggle ON").SetOffLabel("Toggle OFF").SetWidth(100).SetAlignRight("")
        C3.AddRows(e13.item)
        
    '
        form1.AddColumn(C3)
        
    '
        'add a spacer color
        form1.AddColumnsSpacer  'C2
        'create a form
        Dim C2 As WixForm
        C2.Initialize(
    "dataform").SetWidth(600)
        C2.Form.SetDefaultLabelWidth(
    120)
        
    Dim C2C1 As WixColumn
        C2C1.Initialize(
    "C2C1").SetWidth(550)
        
    '
        Dim manID As WixTextBox
        manID.Initialize(
    "manID").SetLabel("Manager ID").SetWidth(300)
        C2C1.AddRows(manID.Item)
        
        
    '
        Dim datal As List
        datal.Initialize
        datal.Add(CreateMap(
    "name" : "Jack""position" : "Dillon""phone" : "111-222-3333"))
        datal.Add(CreateMap(
    "name" : "Susan""position" : "Everest""phone" : "444-555-6666"))
        datal.Add(CreateMap(
    "name" : "Charlie""position" : "Jackson""phone" : "777-888-9999"))
        
    '
        Dim dt As WixDataTable
        dt.Initialize(
    "").SetHeight(200)
        
    'add the headers we wont use auto config
        dt.AddHeader("name""Employee Name",0).AddHeader("position""Position",0).AddHeader("phone""Phone #",1)
        
    'set data
        dt.SetData(datal).SetAutoConfig(True)
        
    '
        Dim fi As WixFormInput
        fi.Initialize(
    "").SetLabel("Employees Grid").SetBody(dt.item)
        C2C1.AddRows(fi.Item)
        
    '
        Dim btnS As WixButton
        btnS.Initialize(
    "btnS").SetValue("Save").SetInputWidth(200).SetAlignRight("")
        C2C1.AddRows(btnS.Item)
        
    '
        C2.AddColumn(C2C1)
        form1.AddColumns(C2.Item)
        
            
        
    'add form to the rows collection
        pg.Page.AddRows(form1.Item)   
        
    'draw the user interface
        pg.ui
        pg.DisableIT(
    "cnt")
    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.

    #HelpingOthers2Succeed!
     
    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