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.
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
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..
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..
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.
B4X:
'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 SubBoth 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
B4X:
'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 SubFor 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..
B4X:
'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: