In my session at XDC 2023, I talked about ways to design your apps so you reuse code across platforms.
In this series of blog posts, I will cover the sixteen sample projects I created for that session (JSONReader, Mastodon, DisplayDB, DrawCards, with separate versions for desktop, web, iOS and Android) in more detail.
You can watch the presentation on YouTube:
The accompanying hands-on session might also be interesting, where I show the projects running on Android:
You can also download all the sample projects.
The first project is JSONReader, so let’s dive in.
JSONReader
This sample demonstrates a couple classes that can read some specifically formatted JSON. I generated this “mock” JSON data using Mockaroo.
The two classes are Staff and StaffDetail. The Staff class contains the JSON data as a constant for simplicity, but it could load it from anywhere, such as a file or from the web. These classes use standard Xojo framework code and are fully compatible with desktop, web, iOS and Android projects.
On Staff are three methods which are used to fetch information from the JSON: Everyone(), GetNames() and GetSlogans().
Each of these methods are similar in that they loop through the items in the JSON like so:
FOR pos As Integer = 0 To JSONData.Count - 1The simplest method is GetNames() which just fetches the first and last name from the JSON and combines them into a single string. It then returns all of these names as a string array.
GetSlogans() is similar, but it instead fetches the Slogan field from the JSON, returning them all as a string array.
The Everyone() method makes use of the StaffDetail class which is just a storage class with properties for each field in the JSON. It also loops through the JSON, but grabs each value and puts it into a StaffDetail instance. All of these are collected into an array and returned.
Although this design is simple, it demonstrates how to separate processing code from the UI. Because everything related to JSON is hidden in these classes and returned as arrays, the UI code (which will be different between platforms) only has to deal with arrays and not with how they were created. You can copy and use the classes as needed in whatever project types you are creating.
For the desktop app, the Window has three buttons which display the results of the above methods in a ListBox.
For example, the NamesButton has this code in its Pressed event:
DataList.RemoveAllRows
Var allStaff As New Staff
Var names() As String = allStaff.GetNames
For Each name As String In names
DataList.AddRow(name)
NextThe SloganButton is similar. The AllButton code only differs by having an array of StaffDetail:
DataList.RemoveAllRows
Var allStaff As New Staff
Var everyone() As StaffDetail = allStaff.Everyone
For Each detail As StaffDetail In everyone
DataList.AddRow(detail.FirstName + " works on " + detail.Slogan + ".")
NextWhen you look at the projects, notice that the code for the WebPage, iOS Screen and Android Screen buttons is exactly the same as the code for the desktop Window buttons!
That won’t always be the case, of course, but it is a good first start and demonstrates how similar the UI API is across platforms.
In my next post, I will look at the Mastodon sample projects which make use of URLConnection.
Paul learned to program in BASIC at age 13 and has programmed in more languages than he remembers, with Xojo being an obvious favorite. When not working on Xojo, you can find him talking about retrocomputing at Goto 10 and on Mastodon @lefebvre@hachyderm.io.