B4J Tutorial [B4X, B4xPages]Using the Standard B4XPreferenceDialog Library with B4XPages to Create Effective Forms

William Lancee · Jan 27, 2023

FormsBuilder saves its output as a .json file. B4X has a a JSON parser. JSON strings are self-structured.
Inter-element blank spaces, CRLF, and TABS are ignored. The output of FormBuilder is in the so-called 'pretty' form.
Which takes up more space than needed for this application. Take a look at the example.json file in File.DirAssets.
I included a Sub to read this file and put the following on the Log. Then I pasted the log in the top of the form module.
For minor changes, you can just make them in this string rather than going back to the FormsBuilder.

B4X:

    Dim spacer As String = $"{"title": "", "type": "Separator", "key": "", "required": false}"$
    Dim JString As String = $"
        {"Theme": "Light Theme",
            "Items": [
                {"title": "May I?", "type": "Boolean", "key": "proceed", "required": false},${spacer},
                {"title": "Your Name", "type": "Text", "key": "name", "required": true},${spacer},${spacer},${spacer},
                {"title": "When will you complete this?", "type": "Date", "key": "today", "required": false},${spacer},
                {"title": "Basic color?", "type": "Options", "key": "colors", "required": false,
                    "options": [White, Black, Red, Green, Blue]
                }
            ]
        }
    "$

'The conversion sub. It makes heavy use of the B4X smart string and JSONParser.

B4X:

Public Sub toWilFormat
    Dim JSON As JSONParser
    Dim Map1 As Map
    JSON.Initialize(File.ReadString(File.DirAssets, "example.json"))
    Map1 = JSON.NextObject
    Dim theme As String = Map1.Get("Theme")
    Dim items As List = Map1.Get("Items")
    Dim sb As StringBuilder
    sb.Initialize
    Dim spacerLiteral As String = "${spacer}"
    For Each item As Map In items
        Dim thistype As String = item.Get("type")
        If thistype = "Separator" Then
            If sb.Length > 0 Then sb.Remove(sb.Length - 1, sb.Length)
            sb.Append($"${spacerLiteral},"$).Append(CRLF)
        Else
            Dim thistitle As String = item.Get("title")
            Dim thiskey As String = item.Get("key")
            Dim thisrequired As String = item.Get("required")
            If item.containsKey("options") Then
                sb.Append("'                ").Append($"{"title": "${thistitle}", "type": "${thistype}", "key": "${thiskey}", "required": ${thisrequired},"$).Append(CRLF)
                sb.Append($"'                    "options": ["$)
                Dim optionList As List = item.Get("options")
                For Each s As String In optionList
                    sb.Append(s).Append(", ")
                Next
                If sb.Length > 0 Then sb.Remove(sb.Length - 2, sb.Length)
                sb.Append("]").Append(CRLF)
                sb.Append("'                }").Append(CRLF)
            Else
                sb.Append("'                ").Append($"{"title": "${thistitle}", "type": "${thistype}", "key": "${thiskey}", "required": ${thisrequired}},"$).Append(CRLF)
            End If
        End If
    Next
   
    Log("'    Dim spacer As String = $" & QUOTE & "{" & $""title": "", "type": "Separator", "key": "", "required": False}""$ & "$")
    Dim itemsString As String = sb.toString
    Dim lit1 As String = "'    JString = $" & QUOTE
    Dim lit2 As String = "'    " & QUOTE & "$"
   
    Dim WilJString As String = $"
${lit1}
'        {"Theme": "${theme}",
'            "Items": [
${itemsString}
'            ]
'        }
${lit2}
    "$
    Log(WilJString)
End Sub

William Lancee · Jan 27, 2023

The first version worked, but I have updated #1 & #2 to make the process clearer.

In B4XMainPage, this shows how to initialize the Example form, and how to use the results when it closes

B4X:

Private Sub B4XPage_Created (Root1 As B4XView)
    'In Class_Globals: Private Example As ExampleForm
    Root = Root1
    Example.Initialize(Me)
    B4XPages.AddPageAndCreate("example", Example)
    Sleep(0)
    B4XPages.ShowPage("example")
End Sub

#Region Form Results
Public Sub Example_Closed(NumRetries As Int, items As List)
    Log(NumRetries & TAB & items.Size & TAB & Example.MaxRetries)
    If NumRetries = Example.MaxRetries Then
        Log("Error: the user has exceeded the maximum tries and the form was closed")
        Return
    End If
    For i = 0 To items.Size - 1
        Dim pi As B4XPrefItem = items.Get(i)
        Dim itemName As String = pi.Key
        If pi.ItemType = Example.prefdialog.TYPE_SEPARATOR Then Continue
        Dim answer As Object = Example.data.Get(itemName)
        Select pi.ItemType
            Case Example.prefdialog.TYPE_DATE
                Log(itemName & TAB & DateTime.Date(answer))
            Case Else
                Log(itemName & TAB & answer)
        End Select
    Next
End Sub
#End Region

William Lancee · Jan 27, 2023

The B4XPage 'ExampleForm' module can be used as a template for your own forms. About 75% is common to all forms.
This sample form has only 200 lines of code. Nothing complicated to navigate. The structure is as follows:

B4X:

'#Regions 'Form Specification' and 'Form Validation' need to be modified for each form, the rest is common to all forms

#Region Class_Globals

Public Sub Initialize(CallBack_ As Object) As Object
    CallBack = CallBack_
   
#Region Form Specification  

    Return Me
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
   
#Region Form Vertical Layout and Colors (Common to all forms)

End Sub

Private Sub B4XPage_Appear
    If MaxRetries > -1 Then NumRetries = NumRetries + 1
    If NumRetries = MaxRetries Then
        CallSub3(CallBack, "Example_Closed", NumRetries, prefdialog.PrefItems)
        B4XPages.ClosePage(Me)
        Return
    End If
    pdia = prefdialog.ShowDialog(Data, "", "")                'Note that the normal Wait For is deferred to the B4XPage_CloseRequest sub
   
#Region CLV Colors (Common to all forms)

End Sub

Private Sub B4XPage_CloseRequest As ResumableSub
    prefdialog.Dialog.Close(xui.DialogResponse_Positive)    'The prefdialog won't finish by itself
    Wait For (pdia) Complete (Result As Int)                'Without this, the data won't be ready

#Region Form Validation

    CallSub3(CallBack, "Example_Closed", NumRetries, prefdialog.PrefItems)
    Return True
End Sub

#Region Optional JSON formater (Common to all forms)

#Region Utilities (Common to all forms)

Notes:

1. CallSub2(CallBack, "ExampleForm_Closed", NumTries, prefdialog.PrefItems) will be called on closing

2. If there are 'required' items, the Required note can be shown at the top of the form

3. If the user tries up to 'MaxRetries', the form will close
If you set it to -1 there will be no limits, but the user will not be able to proceed if there is an unfixed error

4. I would recommend not adding more fields than can fit on the form/screen. Scrolling would risk the user missing things.
It would be better to split a big form into smaller forms. That would be quick and easy to do with this approach.
It would keep the validation in smaller batches - making it more manageable for the user

That's it. I continue to be impressed by the ease of doing complicated things quickly with B4X.

B4J Tutorial [B4X, B4xPages]Using the Standard B4XPreferenceDialog Library with B4XPages to Create Effective Forms

Attachments

William Lancee

Well-Known Member

William Lancee

Well-Known Member

William Lancee

Well-Known Member

Similar Threads