B4J Tutorial [BANanoWebix] Lesson 12: Property Sheet

Hi

The property sheet / property bag allows one to have such an item on their apps. It accepts text, password, date, color, combo, select to mention of the few controls.

To Set the values to it, one uses the .SetValues page call passing it the map of values and to get its values one uses .GetValues.

There are some events that can be trapped, eg. checkchange, enter press etc.

 

[Mashiane]

We first define the various lists that will be used in our property maps

Dim color_options As List
    color_options.Initialize
    color_options.Add(CreateMap("id":1, "value":"red"))
    color_options.Add(CreateMap("id":2, "value":"blue"))
    color_options.Add(CreateMap("id":3, "value":"green"))
    color_options.Add(CreateMap("id":4, "value":"orange"))
    color_options.Add(CreateMap("id":5, "value":"grey"))
    color_options.Add(CreateMap("id":6, "value":"yellow"))
    '
    Dim position_options As List
    position_options.Initialize
    position_options.Add(CreateMap("id":1, "value":"left"))
    position_options.Add(CreateMap("id":2, "value":"right"))
    position_options.Add(CreateMap("id":3, "value":"top"))
    position_options.Add(CreateMap("id":4, "value":"bottom"))
    '
    Dim load_types As List
    load_types.Initialize
    load_types.Add("json")
    load_types.Add("xml")
    load_types.Add("csv")
    '

We then add the various properties that we need to get and set to be able to change whatever UI we have or form we have.

Dim prop As WixProperty
    prop.Initialize("prop").setwidth(300).setnamewidth(200)
    'prop.SetComplexData(True)
    
    prop.AddLabel("Layout")
    prop.AddTextBox("width", "Width", 250)
    prop.AddTextBox("height", "Height", "")
    prop.AddPassword("pass", "Password", "")
    '
    prop.AddLabel("Data loading")
    prop.AddTextBox("url", "Data url", "http://bananowebix.com/data")
    prop.AddSelect("type", "Type","", load_types)
    prop.AddSelect("position", "Position","", position_options)
    prop.AddDate("date", "Date","")
    prop.AddCombo("color", "Color","", color_options)
    prop.AddCheckBox("jsonp", "Use JSONP", "")
    prop.AddColor("bg","Background","")
    
    pg.Page.AddRows(prop.Item)
    '
    pg.ui

One can also set the default values for the properties. For this exercise, we trap two events, when a checkbox value changes and when enter is pressed after changing a field value.

Dim fid, fstate As Object
    pg.OnCheck("prop", BANano.CallBack(Me, "prop_change", Array(fid, fstate)))
    
    Dim e As Object
    'pg.onTimedKeyPress("prop", BANano.CallBack(Me, "prop_keypress", Array(e)))
    
    Dim e As Object
    pg.onEnter("prop", BANano.CallBack(Me, "prop_onenter", Array(e)))

And then trap the events to .GetValues of the property bag as a map object.

Sub prop_onenter(e As Object)
    'get everything
    Dim rec As Map = pg.GetValues("prop")
    '
    pg.Message(BANano.ToJson(rec))
End Sub

Sub prop_keypress(e As Object)
    Log(e)
End Sub

Sub prop_change(fid As String, fstate As Boolean)
    Log(fid)
    Log(fstate)
    
    'get everything
    Dim rec As Map = pg.GetValues("prop")
    '
    pg.Message(BANano.ToJson(rec))
    
End Sub