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

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.

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
    Dollar.Selector(itm).RunMethod("setValue",Array(value))
End Sub

'get an item value
Sub GetValue(itm As String) As 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

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

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

 

[Mashiane]

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!