iOS Tutorial Creating a cross-platform "dialog" class with input validation

I'm currently developing an App that'll be released for Android and IOS. It presents files to the user, allows them to select a file and then presents the content for editing, and finally allows them to run the content.

As part of the development process, I've needed to request information from the user - a file (to open, to save) or folder (to move a file into), a text or numeric value (while adding new content or editing content), a date or time value etc. I've also needed to pop up messages to the user - short "it's done" messages and more complex "here's the situation ... proceed" Yes/No/Cancel messages.

As I've worked through these needs, I've found different/alternative ways to request the input, improving each time. My latest solution has been built into PropertyEditor, a cross-platform solution for presenting object properties or database fields to a user so that they can edit existing or add new records.

But I'm still not satisfied. I want to be able to:

1. Have a single cross-platform solution for displaying messages and requesting input;
2. Validate user input so that the user sees when something is invalid and can correct it at point of entry;
3. Leverage the current standard solution for Dialogs - the CustomDialogLayout available in the latest B4A/B4i releases; and,
4. Develop the class incrementally so that it has immediate use and each iteration works on both platforms.

My intent then is a class that satisfies all of the above requirements ... and I thought it would be fun to post progress (and incremental updates) as an example of developing something useful that works for both Android and IOS.

I'll update this main post with the latest build, and I'll add posts detailing what's changed in the build, key decisions I had to make and so on, so that the individual posts chart the development with the latest result available here, in the first post.

Note that this post (and the individual posts) will focus on the development from an IOS perspective. There is another thread in the Android forums that focuses on the development from an Android perspective: https://www.b4x.com/android/forum/t...orm-dialog-class-with-input-validation.84983/

Feel free to follow along or to comment if you have a suggestion or a question - this isn't meant to be an example of perfect development (is there such a thing?), rather it's meant to be an example of how I, personally, approached the above requirements, resulting in a class that all of us might choose to use in an App development.

Planned "sprints"/iterations

As a way of getting my thoughts in order (and a preview of where I'm headed), I thought I'd list out the plans. Comments and feedback welcomed!

1. DONE. Basic structure. Toast DialogType. CharSequence (CS)/AttributedString (AS) integration.
2. DONE. Message DialogType. Dialog layout. Callback/_Result event. CS/AS Message and Buttons.
3. Add Icon/Color/Style properties.
4. Custom DialogType. Receive a panel containing controls where calling routine handles control events and can set dialog to indicate valid/invalid. Implemented first to be able to leverage when implementing other types.
5. Number DialogType (subtypes Integer, Decimal). Value check (>,>= etc.) Range check (In, NotIn).
6. Text DialogType (subtypes Singleline, Multiline). Length check (At least, At most) Substring check (In, NotIn) RegExp check (contains, matches etc.)
7. Choice DialogType (subtypes Single, Multi). Able to provide initial choice(s) and receive choice(s) back.
8. FileFolder DialogType (subtypes File, Folder). Able to browse entire hierarchy or 1 level at a time.

Further possibilities:

1. DateTime DialogType (subtypes Date, Time, DateTime). Extend Value and Range checks.

Dependencies

• B4i 4.30 (or later)
  
• iHUD https://www.b4x.com/android/forum/threads/ihud-library-toast-messages-and-progress-dialogs.46103/
• iCustomDialog 1.00 https://www.b4x.com/android/forum/threads/custom-dialogs-with-icustomdialog-library.83526/
• iXUI https://www.b4x.com/android/forum/threads/b4x-xui-cross-platform-native-ui-library.84359/#content

 

[Misterbates]

New development ... I decided to develop first for Android https://www.b4x.com/android/forum/t...lass-with-input-validation.84983/#post-538178

Porting for IOS, there were a couple of decisions to make.

First of all, how to implement ToastMessageShow for IOS. I used Erel's iHUD library: https://www.b4x.com/android/forum/threads/ihud-library-toast-messages-and-progress-dialogs.46103/. This meant a small adjustment to my .ToastMessageShow method:

#If B4A
    ToastMessageShow(myMessage, LongDuration)
#Else If B4i
    Dim Toast As HUD
    Toast.ToastMessageShow(myMessage, LongDuration)
#End If

Secondly, it turns out that the CSBuilder syntax is different for IOS compared to Android - not really a surprise given the different typeface/font implementation. I took a look at XUI to see if that could help with its new B4XFont object, but wasn't able to use it until (maybe) CSBuilder is updated for the B4X world. So I had to introduce another platform specific code section:

#If B4A
    d.andMessage(cs.Initialize.Append("Hello ").Bold.Append("it's me").Pop.Append(" again ") _
                .Typeface(Typeface.FONTAWESOME).Append(Chr(0xF087)).PopAll).ShowToast(False) 'CSBuilder message, built in one statement
#Else If B4i
    d.andMessage(cs.Initialize.Append("Hello ").Font(Font.DEFAULT_BOLD).Append("it's me").Pop.Append(" again ") _
                .font(Font.CreateFontAwesome(Font.DEFAULT.Size)).Append(Chr(0xF087)).PopAll).ShowToast(False) 'CSBuilder message, built in one statement
#End If

Finally, turns out that while Android's ToastMessageShow does accept a CharSequence (from CSBuilder), the iHUD library doesn't accept an AttributedString (from CSBuilder). So a small adjustment to my .ToastMessageShow method:

Toast.ToastMessageShow(myMessage.ToString, LongDuration)

 

[Misterbates]

Iteration 2, and I again developed for Android first https://www.b4x.com/android/forum/t...lass-with-input-validation.84983/#post-539362

Porting for IOS, the main differences were:

• The layout of the CustomLayoutDialog dialog itself, with the icon above the title rather than to the left of it
• Initialization of the dialog expecting a panel (the Android CustomLayoutDialog does some setup first then raises a Dialog_Ready event to setup the content panel)
• Dealing with the differences between Android/IOS for calculating dialog size, available content area etc. This led to quite a complex block of layout/positioning code in my ShowAsync method. In order to get the sizing correct, I leveraged a SizeToFit code module from an earlier project. And then to avoid problems with very long messages - should they truncate? ellipsize? - I opted for neither and again wrapped the multi-line Message label in a ScrollView.
• Using AttributedText in the message requires the use of the .AttributedText label property- Android handles this via the .Text property
• Setting button text to an AttributedString - again not complex but not as simple as using the button.Text property. I wrapped setting the button text in it's own utility routine to hide the IOS dependency on NativeObject.

This iteration took a little longer than expected, mostly due to the amount of time I spent figuring out how to code the layout logic. But now it's done, I think I've built a solid foundation for the introduction of input views in the next iterations.