This article examines Xojo’s capabilities by building a simple web API service. You will learn to handle different HTTP methods, manage requests, and send meaningful responses. Xojo’s simplicity makes it an excellent choice for experienced developers transitioning from other languages, as well as those familiar with its user-friendly language.

Foundation: The HandleURL Function

Defining API Endpoints for GET Requests

GET requests are primarily used to retrieve data. To handle these requests effectively, let’s see how to define API endpoints that correspond to specific data or actions in the following code example:

If request.Method = "GET" Then
  Select Case request.Path
  Case "time"
    Var currentTime As String = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")
    response.Write("{""message"": """ + currentTime + """}")
    response.Status = 200
    Return True
  Case "hello"
    response.Write("{""message"": ""Hello, World!""}")
    response.Status = 200
    Return True
  End Select
End If

Here, we define two endpoints: /time and /hello.

A GET request to /time will return the current date and time in JSON format, while a request to /hello will return a friendly “Hello, World!” greeting.

The response.Status is set to 200, indicating a successful response. Learn more here about HTTP status codes.

Defining API Endpoints for POST Requests

While GET requests primarily retrieve data, POST requests submit data to the API for processing. Consider submitting a form online – you are sending data to the server via a POST request.

If request.Method = "POST" Then
  Select Case request.Path
  Case "some-data"
    Try
      Var jReceivedData As New JSONItem(request.Body)
      Response.Write(jReceivedData.ToString)
      Response.Status = 200
      Return True
    Catch e As JSONException
      response.Write("{""error"": ""Internal Server Error""}")
      response.Status = 500
      Return True
    End Try
  End Select
End If

In this example, a POST request to the /some-data endpoint expects to receive JSON data (request.Body) for processing.

If the data is successfully parsed, the API responds with the received data.

Otherwise, an error status and message are returned to the client.

Bringing it all Together

Now that you know how to manage “GET” and “POST” requests, you can start building more complex APIs, with different endpoints available for different methods. To further illustrate API endpoint development, consider the following detailed code example that can be used as template:

Function HandleURL(request As WebRequest, response As WebResponse) Handles HandleURL as Boolean
  response.MIMEType = "application/json"
  
  Try
    Select Case request.Method
    Case "GET"
      
      Select Case request.Path
      Case "time"
        Var currentTime As String = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")
        response.Write("{""message"": """ + currentTime + """}")
        response.Status = 200
        Return True
      Case "hello"
        response.Write("{""message"": ""Hello, World!""}")
        response.Status = 200
        Return True
      Else
        response.Write("{""error"": ""Not Found""}")
        response.Status = 404
        Return True
      End Select
      
    Case "POST"
      
      Select Case request.Path
      Case "some-data"
        Try
          Var jReceivedData As New JSONItem(request.Body)
          Response.Write(jReceivedData.ToString)
          Response.Status = 200
          Return True
        Catch e As JSONException
          response.Write("{""error"": ""Internal Server Error""}")
          response.Status = 500
          Return True
        End Try
      Else
        response.Write("{""error"": ""Not Found""}")
        response.Status = 404
        Return True
      End Select
      
    End Select
    
  Catch e As RuntimeException
    response.Write("{""error"": ""Internal Server Error""}")
    response.Status = 500
    Return True
  End Try
  
  response.Write("{""error"": ""Not Found""}")
  response.Status = 404
  Return True
  
End Function

Small note: observe the start line within the HandleURL function.

response.MIMEType = "application/json"

This line of code informs the client (browser, application) that the API service is responding using the JSON format. Setting the MIMEType to “application/json” is best practice and helps prevent any potential parsing errors on the client side.

Next Steps

You might notice that some code is repeating itself (hint: the error responses), so a good idea would be to create a helper method that deals with this particular type of code repetition. Additionally, consider moving the code from the HandleURL function to a separate method that is then invoked within the HandleURL function for improved organization. This restructuring will enhance code organization, making it easier to maintain, read, and improve the efficiency of the program.

P.S.: You should also check the article about microservices and their purpose to get a better idea of what kind of API interfaces you can create.

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

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 - 1

The 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)
Next

The 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 + ".")
Next

When 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.

• STRICT tables
• PRAGMA table_list
• RIGHT and FULL OUTER JOIN
• Built-in JSON support

More about each of these below.

STRICT Tables

One of SQLite’s most unusual capabilities is that it does not care about what data goes into a column. Although you could specify a type for a column, it was really more of a suggestion as other types of data could be put into the column. This behavior is different than most other relational databases and can sometimes be a source of confusion.

Now you can create your tables using the STRICT keyword to force them to require column types and to force the column types to always be checked when putting data into them.

You are still limited to INT, INTEGER, REAL, TEXT and BLOB. That means there is still no DATE or DATETIME type like you might find in other databases. Instead use TEXT with YYYY-MM-DD format.

However, an ANY type was added which essentially allows you to clearly state that the column can contain anything. This allows you to have a mixture of specific types and generic types in your STRICT tables.

Note that the STRICT keyword goes at the end of the CREATE TABLE command:

CREATE TABLE Team (ID INTEGER, Name TEXT, Coach TEXT, City TEXT, PRIMARY KEY(ID)) STRICT;

The SQLite docs have more information about the new STRICT table feature.

PRAGMA table_list

With Xojo you could always get the list of tables by using the Database.Tables() method. However if you wanted to get the list of table using SQL you had to directly query the sqlite_master table.

Now there is a simple PRAGMA that can do the same thing:

PRAGMA table_list

It returns a list of tables and some other details about the table (which may change over time according to the SQLite docs).

RIGHT and FULL OUTER JOIN

Joining tables is a common task with SQL. The most common type of join is an INNER JOIN where only the rows common to both tables are included in the result. Other less common types of joins include LEFT OUTER, RIGHT OUTER and FULL OUTER (sometimes OUTER is omitted when referring to these types of joins).

SQLite has had support for LEFT OUTER joins for a long time, but support for RIGHT OUTER and FULL OUTER were missing. But now they are here, giving your more complicated queries better compatibly with the “big name” databases.

Learn more about these types of joins at W3 schools.

JSON Support

I’ve saved the big one for last: your SQL databases can now work with JSON data within columns.

Here is a sample table to work with with some JSON data that is stored in the players column:

CREATE TABLE team(id INTEGER PRIMARY KEY, Name TEXT, players TEXT);

INSERT INTO TEAM VALUES (NULL, 'Seagulls', '[ {"Name":"Bob","position":"1B"}, {"Name":"Tom","position":"2B"} ]')

INSERT INTO TEAM VALUES (NULL, 'Pigeons', '[ {"Name":"Bill","position":"1B"}, {"Name":"Tim","position":"2B"} ]')

INSERT INTO TEAM VALUES (NULL, 'Crows', '[ {"Name":"Betty","position":"1B"}, {"Name":"Tina","position":"2B"} ]')

Let’s say you want to get the first player on each team. Without SQLite JSON support you would have to pull out the JSON column data and parse it out separately. But now you can do it with this SQL like this:

SELECT players -> 0 FROM team

The above SQL says: for each row fetch the first array element from the JSON data in players.

This is how you would list all the players on all the teams:

SELECT team.Name, json_each.value -> 'Name' FROM team, json_each(team.players)

And if you want to get the actual value without the quotes, you can use the ->> operator (and also rename the result):

SELECT team.Name, json_each.value ->> 'Name' As PlayerName FROM team, json_each(team.players)

The SQLite JSON support can do much, much more which you can read about on the SQLite JSON doc page.

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.

With just a few lines of code, you can create a mobile app that shows a new cat picture each time you launch it. I call this app “CatsUp!”. It’s a play on ketchup/catsup, get it?

Set Up The Project

Create a new iOS project called “CatsUp”. Drag an ImageViewer control onto Screen1, make it fill most of the area and change its Name to “CatImage”. Drag a Button to the bottom and change its Caption to “Cat Me!”. Also change the Screen Title to be “CatsUp!”. The result should look something like this:

The Cat API

The Cat API documentation page describes the full API. For access to most features you will want to sign up for a free account and use an API key. For the purposes of this post, I will just use it without an API key. The URL for the method to get a random cat picture is:

https://api.thecatapi.com/v1/images/search

The above URL returns JSON that contains the location of a picture to display. Paste it into a web browser to try it. In my test I got this JSON:

[{"breeds":[],"id":"99v","url":"https://cdn2.thecatapi.com/images/99v.jpg","width":384,"height":384}]

To make CatsUp, we will essentially add some code to 1) send the first request, 2) get the JSON and pull out the picture URL, 3) get the picture and display it.

Add Code

Add the Pressed event to the Button with this code:

CatConnection.Send("GET", "https://api.thecatapi.com/v1/images/search")

This calls the Send() method on a URLConnection object, called CatConnection, to get the JSON with the picture URL.

So now you need to drag a URLConnection object from the Library onto the Screen. Click on this newly added URLConnection1 item in the Tray and in the Inspector change its name to “CatConnection”. Add its ContentReceived event with this code:

Var json As JSONItem = New JSONItem
json.Load(content)

Var catItem As JSONItem
catItem = json.ValueAt(0)

Var picURL As String
picURL = catItem.Value("url").StringValue

ImageDownload.Send("GET", picURL)

The above code loads the JSON into a JSONItem and then fetches the “url” value. It sends this URL to another URLConnection, called ImageDownload, to get the actual picture to display.

Drag a second URLConnection onto the screen and change its name to “ImageDownload”. Add its ContentReceived event with this code:

Var pic As Picture = Picture.FromData(content)
CatImage.Image = pic

Try running the project in the iOS Simulator. Click the button to see a new cat picture.

This is what I see:

Oops, silly me. I actually created this as an Android project and ran it in the Android Emulator. Sorry about that, here is what it looks like as an iOS project running in the iOS Simulator:

That’s right, the exact same code for this project can be used in both iOS and Android projects! And for another bit of Android news, this CatsUp! app, with a couple minor enhancements, is now available in the Google Play Store:

Have fun with this and may every day be a Caturday!

In case you missed it, the previous article explains in detail what Cell Renderers are and how to use them. Anything you can imagine can be done inside your WebListView control cells. In order to do so, be prepared to write some JavaScript code. Today we will create a very basic example, a Custom Cell Renderer capable of showing Bootstrap Badges.

If we think about it, in a nutshell, what we want to achieve is to inject this HTML (coming directly from Bootstrap’s docs) into our cells:

<span class="badge badge-pill badge-primary">Primary</span>

The first step is to create a new class in our Xojo project. Let’s call it BadgeColumn, for example. It will be a child of WebListboxCellRenderer Superclass.

Extending WebListBoxCellRenderer will allow our class to listen to some events that Xojo will emit, used to render our badges inside the table. There are three: Deserialize, JavascriptClassCode and Serialize.

We will ignore all of them for the moment, except JavascriptClassCode. But it is important to know that Serialize must return an instance of a JSONItem class, or you will get a NilObjectException, as soon as you add a new row using this renderer.

Let’s add this code to the Serialize event, we will come back to this event later:

Return New JSONItem

JavascriptClassCode event will be executed only once, no matter the amount of instances of our renderers we have. It must return a String containing a JavaScript class that extends XojoWeb.ListboxCellRenderer, containing a render() method inside (remember that JavaScript is case-sensitive).

In render(), we will simply replace the contents of the cell DOM element with the badge HTML code snippet provided by the Bootstrap docs that we just saw.

In order to keep it as readable as possible, what I prefer to do is to create a String Constant called “kJavascriptClass” (the name is arbitrary, use anything you want), with the JavaScript code inside:

class BadgeColumn extends XojoWeb.ListboxCellRenderer {
    render(controlID, row, data, rowIndex, columnIndex, cell) {
        cell.innerHTML = '<span class="badge badge-pill badge-primary">Primary</span>';
    }
}

Having our raw JavaScript as a String constant, our JavascriptClassCode event can just return it:

Return kJavascriptClass

Congratulations! That’s your first Cell Renderer. It won’t do a lot of things, but that’s the basic plumbing needed to start creating lots of them. With this new class, following the steps you’ve learned on the first part of this tutorial, you will be able to use it in your tables. Drop a WebListView into your WebPage and add a handler for the Opening event. Then add this code:

Me.AddRow("Hello, World!")
Me.CellValueAt(0, 0) = New BadgeColumn

It will add a row to the control, and then it will make use of our new Cell Renderer to replace the first cell of the first row. If you run your project, you will see a website that looks like the following screenshot:

While promising, you will notice the badge says “Primary” instead of the “Hello, World!” message we want. Looking at the render() method, within our Javascript, you will find “data” as one of the parameters it receives. It is a JSON object that comes from (I’m sure you’ve guessed it already) the Serialize event we saw a few paragraphs ago.

Edit the Serialize event handler. This time, instead of returning an empty JSONItem, we will fill it with some data.

Var json As New JSONItem
json.Value("content") = "Test"
json.Value("appearance") = "success"
Return json

Next, update your kJavascriptClass constant with the following snippet of code. Notice we are making use of the values we have in the data parameter, coming as a Javascript object:

class BadgeColumn extends XojoWeb.ListboxCellRenderer {
    render(controlID, row, data, rowIndex, columnIndex, cell) {
        cell.innerHTML = '<span class="badge badge-pill badge-' + data.appearance + '">' + data.content + '</span>';
    }
}

Running the web application again will make you smile a bit:

Nearly there! Now that we know how to communicate between Xojo and the cell that is running in our browser, we just need to find a way to create instances of these BadgeColumn classes, using real content.

My preference is to create a Constructor with the parameters I want, and some class properties. This is completely up to you.

Create a few properties for our BadgeColumn class:

• Content As String
• Appearance As String

Then a Constructor with the following parameters:

• content As String
• appearance As String

Inside our new Constructor, you will need to call its Superclass Constructor, wiring the internal properties of the instance with the parameters, as following:

Super.Constructor
Self.Content = content
Self.Appearance = appearance

The Serialize event handler can be updated now to make use of our new properties, instead hardcoded data:

Var json As New JSONItem
json.Value("content") = Content
json.Value("appearance") = Appearance
Return json

Finally, we need to update the Opening event we used in our ListBox. Just remember thtat BadgeColumn now needs to be instantiated with some parameters:

Me.AddRow("")
Me.CellValueAt(0, 0) = New BadgeColumn("Hello, World!", "warning")

Run the application again and see what happens:

Whoops! That doesn’t looks right, does it? We are missing one important step.

The communication between Xojo and the control that lives inside JavaScript is bidirectional. This way, “Data” can be modified while running in your browser, and it will be sent back to Xojo. In order to fix our issue, we just have to take care of the Deserialize event handler we’ve completely ignored until now, with the following code:

Content = js.Value("content")
Appearance = js.Value("appearance")

This will recreate our instance using fresh data coming from JavaScript. Run the project again and voilà!, your table looks perfect now:

This is not the end, but the beginning of your journey. With this little recipe you already have a lot of knowledge and hours of fun ahead, building your Cell Renderers. Once you feel comfortable, the next step I recommend is to learn how to emit custom cell actions from your JavaScript that you can handle from the CustomCellAction event of your WebListBox controls. In order to see how this works, check some of the examples coming with Xojo, under Web > WebSDK > WebListBox Cell Renderers. The open source repository we saw in the previous article, xojo-web-cell-renderers, also makes use of this event in some of the included Cell Renderers.

Conclusion

While we had to get our hands dirty with JavaScript, it’s really fun to create Cell Renderers for our Xojo projects. They are super easy to share and reuse, and will make your tables look so much better. The source code for this example project can be downloaded here.

I hope you find this tutorial useful, if you have any question, please feel free to ask them in the forum.

Ricardo Cruz helps companies with large websites to optimise and secure them, making them reliable and ensuring they are always online. He uses Xojo for building internal tools, but he is starting to explore the desktop software market, with apps like Today and Beauty Shot. As a hobby, during his free time, Ricardo has been teaching Scuba Diving for more than 10 years.

In this example I work with a free key from the OpenWeather API. OpenWeather provides an API with weather data that you can access by an URL. The API returns a JSON text containing information such as current weather description, current temperature, pressure, humidity and many more. This is uses the CURL Plugin for the network query and Util plugin for JSON.

The Layout 

We want to take a closer look at this JSON together later. But first we want to build the layout in which we can enter our weather information. This layout basically consists of two areas, one is the data area where our information will be displayed and the other is our area where we can enter the location of the wanted forecast and the unit of measurement for the temperature. 

We start with the settings area. Here there must be a text field for the location. To set the temperature unit we use a popup menu. 

The popup menu has the following entries: °C, °F and K. So later you should be able to choose between Celsius, Fahrenheit and Kelvin as display unit. °C is the default value of the popup menu. In the event “Change” of this popup menu we write the selected unit into a property which we can later need in the program. The default value of the property is “C” and stands for the unit Celsius. The code of the event then looks like this: 

 If PopupMenu1.SelectedRowValue="°C" Then
  TempUnit="C"
Elseif PopupMenu1.SelectedRowValue="°F" Then
  TempUnit="F"
Else
  TempUnit="K"
end if 

We also need a button with which we can start the search.  So we are done with the layout in the settings area. Of course this area can also be decorated and highlighted. 

Now let’s get to the layout of the data area. We first need to know which data should be displayed. 

You can visit the OpenWeather website for more details about the available information. In our application the following information should be displayable:

*Weather description
*Current temperature
*Perceived temperature
*Minimum temperature
*Maximum temperature
*Humidity
*Wind speed
*Atmospheric pressure
*Sunrise and sunset time

We create a separate label for each of these information. Information behind which a unit of measurement should be placed, gets an additional label field with the unit of measurement. The unit of measurement fields for the temperatures are all named the same, so we create an array of labels. This is important, because these units of measurement are to be changed afterwards by script. Of course the inscription must not be missing, so that we can see what information is actually displayed. These can then also be decorated appropriately. 

The CURL Connection to the API 

When we have entered a location and clicked on the search button, the matching values should appear. Now we have to think about where we get our current weather data. As mentioned before we work with the OpenWeather API. To access this API we pass some information with our URL like the desired location and our key. The structure of the URL can look like this:

api.openweathermap.org/data/2.5/weather?q={city name}&appid={your api key}

The informations in the curly brackets must be replaced with your wanted query. For example you want the current weather information for London, where the next Xojo conference will take place and your key would be „123“ the url look like this 

api.openweathermap.org/data/2.5/weather?q=London&appid=123

The result that the URL returns is a JSON text, that contains the requested informations. So we need the text in our program. For this we use a CURL connection. We build it in the action event of the search button and pass the URL 

Action Event: 

Dim c As New MyCURL
c.OptionURL = “api.openweathermap.org/data/2.5/weather?
q=”+Search.Text+”&appid=”+Key
Call c.Perform

In the code we see that we create a new instance of the MyCurl class. The MyCurl class has the superclass CURLSMBS. We need the new class because we want to fill events with code. 

Then we build our URL. We pass the location that is contained in the search text field. Our key is in a property. This has the advantage that we only have to change it in one place and don’t have to search in the source code in case we would query several URLs. At this point it should be mentioned that the Open Weather API can find the weather not only by place name, but also by longitude and latitude, City ID or ZipCode.

Besides the current weather data, forecasts and much more can be called up. When using an API, it is always useful to have a look at the documentation of an API to be able to use it correctly.

The Perform method calls the specified URL. In the event Write of the MyCurl class we get the data of the url. We save the data in the property JSONText as String, because we need this text in different scripts. Then we test if we get valide weather data. E.g. Our key can be wrong or the city is not found. For that test we write a method test, that return a boolean value. If the return value is true we run the method run, that set the informations form the API to our labels. If the result is false, we display in a message Box an error code that is save in a property Error. 

Write Event: 

weather.JSONText=data
 Dim c As Boolean=weather.test
If c Then
  weather.run
Else 
  MsgBox weather.Error 
End If  

So let’s start to write the method test as first. 

Let’s think about what could go wrong: For example our API key might be wrong. Let’s enter our URL in the browser and change a character in the key so that it doesn’t match ours. The result looks like this: 

{"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info.“}

We get a code number and an error message as result. The same we can test for a wrong city name 

{"cod":"404","message":"city not found“}

Also here we get only these two keys. We look whether there are also these keys with a normal and valid, functioning query. The answer is yes! In a validquery the key „cod“ always has the value 200, also for different Cities in different Countries. We can use this. So we check whether cod has the value 200. If it is not equal, there was an error and we save the text under the key message in the property Error. This text will be written into a dialog in the Write event. Otherwise the method returns true. 

Method test()as boolean :

Dim json As New JSONMBS(JSONText)
 Dim cod As JSONMBS =json.Child ("cod")
If cod.toString <>"200" Then
  Dim message As JSONMBS= json.Child ("message")
  Error=message.toString
  Return False
Else
  Error=""
  Return True
End If 

So we first create a new instance of the class JSONMBS, to which we pass our JSON from the API. 

We want the result of „cod”. We can compare it. We call the method Child, which we pass the key as parameter. The result is again of type JSONMBS. To be able to read the result, we call the method toString to convert the result to a string that we can compare. 

If the result is not equal 200, we use again the method Child to get the information from the key „message“ and read the information with toString.

Working with the JSON 

We now come to the already used method run. 

In this method we first enter the units of temperature into the labels. Then we create a new instance of the JSONMBS class, that gets the JSON text from the API. 

For i As Integer= 0 To 3
   deg(i).Text= PopupMenu1.SelectedRowValue
Next

Dim json As New JSONMBS(JSONText) 

This instance is used for all data queries. The idea of the data query is always the same. We look at the original JSON where the information we want to read is. e.g. the description text of the weather. We go backwards and note the path 

…
 "weather":[
      {
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04d"
      }
   ],
… 

The description text is located under the key description. Description is located in an array. In the array, the desired description is in the first element. (Note that an array starts counting at 0) The array is located in the object weather. So we can build the path from right to left as follows 

weather[0].description

We now unravel this path with various methods and go deeper layer by layer. We start with weather. This key is a Child of or JSON Text. Because of this we write :

Dim weather As JSONMBS= json.Child („weather“)

Now the variable has the following content 

"weather":[
      {
         "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04d"
      }
   ],

Next we need to get into the array. We need the first element. We use the method ArrayItem and pass 0 as parameter, because we want to address the first element with the index 0.

Dim weatherArray As JSONMBS=weather.ArrayItem(0)

The JSON in weatherArray has the following structure: 

  {
 "id":804,
         "main":"Clouds",
         "description":"overcast clouds",
         "icon":"04d"
      } 

Now the description is again a child of this object. And we use the Child method again 

Dim description As JSONMBS= weatherArray.Child(„description“)

Now we have to put the JSON text as MBSJSON datatype into a format that can be read.  For this we use the toString method. Now we have a string that still has quotation marks, which we can replace with an empty string by using the ReplaceAll method.

weatherDes.Text=ReplaceAll(description.toString, Chr(34),"")

The paths of the other information can be read and build similarly.

Convert the temperature 

We get the temperatures by default in Kelvin. You can change this with an addition in the URL. But because we want to choose between Kelvin, Celsius and Fahrenheit anyway, we mostly have to convert the extracted results into the desired unit. So we pass any temperature we get from the API to the tempConvert method. This method has as input the temperature as a double

In If and Else If statements we check which temperature unit is selected in the popup menu. Matching this we do the conversion. The formulas are as follows:

Kelvin -> Fahrenheit 
Fahrenheit= Kelvin*(9/5)-459.67

Kelvin ->Celsius 
Celsius= Kelvin -273

Kelvin-> Kelvin 
Kelvin = Kelvin

These conversions can of course result in unwanted decimal digits. Therefore we format to the first digit after the decimal point and return this value. The Code of this method look like this: 

tempConvert (temp as double) as double:

Dim tempConv As Double

 If tempunit="F" Then 
   tempConv = temp*(9/5)-459.67
Elseif tempunit="C" Then 
   tempConv = temp-273.15
Else
   tempConv = temp
End If 
tempConv=Format(tempConv, "#.#").Val

Return tempConv 

A further conversion is needed for the sunset and sunrise time. We have given the times in Unix time. That means we have given the seconds from January 1st 1970 00:00 to the time of our time value. We have to convert this into a time that is readable for humans. The code for the sunrise look like this. 

 Dim d1 As New DateTime(rise.ValueInteger, TimeZone.Current)
sunrise.Text=d1.Hour.ToString+":"+d1.Minute.ToString

The code for the sunset looks similar.

Now I wish you a lot of fun with your own weather station. Download the project here and if you have any questions please feel free to contact me. 

Stefanie Juchmes studies computer science at the University of Bonn. She came in touch with Xojo due to the work of her brother-in-law and got a junior developer position in early 2019 at Monkeybread Software. You may have also read her articles in Xojo Developer Magazine. 

The structure is simpler than XML which makes it much smaller and since it does not make use of all the tags you’ll find in XML, it is also significantly easier to read. However, if you open unformatted JSON in a text editor you’ll probably find it a bit dense. Here’s how to get around that.

Here is a JSON file shown in bbEdit:

You could apply formatting to it, but another option is to display it in a tree to get a better understanding of its structure and content.

Here’s a simple Xojo project that displays JSON in a hierarchical ListBox (inspired by a user’s forum request):

Download JSONTree

Here’s the above JSON displayed using JSONTree:

The code on the “Load JSON” button loads a JSON file into a JSONItem using a TextInputStream. It then calls the DisplayJSON method displays the top-level values for the JSON in a hierarchical ListBox. The RowTag gets the JSONItem for the item that is displayed.

In the ListBox.ExpandRows event, the JSONItem that is displayed is passed to the DisplayJSON method to then display it’s top-level items. You can keep expanding the JSON until you reach an end item.

Check out these doc topics to learn more about JSON:

• User Guide:JSON topic
• JSONItem class

Update (March 11, 2019): Xojo developer extraordinaire Kem Tekinay took this project and enhanced it with an even better display. You can grab his project here: JSONTree2

A quick Google search turned up an API by FunTranslations: https://funtranslations.com/api/klingon

It has simple usage where you send along the text in English and you get back a JSON result containing the text translated to Klingon. Here’s the result of my 15 minutes of effort to use this in a Xojo desktop app:

This is a pretty simple project with less than 20 lines of code.

You can recreate the layout using a couple TextFields and a Button. I used URLConnection to connect to the web service. You can also add that to the layout by dragging an Object from the Library and changing its Super property to “URLConnection”. I named this object “KlingonAPI”.

In the Button’s Action event the code sets up the call to the web service using the text entered in the first TextArea:

Dim url As String = "https://api.funtranslations.com/translate/klingon.json"

Dim param As String = "text=" + EncodeURLComponent(EnglishArea.Text)

KlingonAPI.SetRequestContent(param, "application/x-www-form-urlencoded")
KlingonAPI.Send("POST", url)

In the KlingonAPI URLConnection object, add the ContentReceived event. This code grabs the translated Klingon text from the JSON and displays it in the 2nd TextArea:

Try
  Dim json As New JSONItem(content)
  Dim contents As JSONItem
  contents = json.Value("contents")
  Dim klingonTranslation As String = contents.Value("translated")
  KlingonArea.Text = klingonTranslation
Catch e As JSONException
  MsgBox("Error processing API call. Content=" + content)
End Try

You can also add the Error event and have it display an error in case there’s a problem with the API call:

MsgBox("API Error: " + e.Message)

And that’s all there is to it.

You can download the project from here: KlingonTranslator Project, just remember some things can’t be translated!

I’ll leave it up to you to implement a Klingon to English translator, although you may want to make that a mobile app in case you are ever teleported to the bridge of a Klingon vessel.

Qapla’

I made a version of Combat in Xojo a while ago (it’s included in the Xojo examples folder in the Download) so I figured I would start there. To provide network capabilities to a game, you generally want to go with something fast and that means UDP (User Datagram Protocol), which is provided by the UDPSocket. There’s also a UDPSocket example included with Xojo which I used as a reference.

To start I first decided what data I wanted to send back and forth. I narrowed it down to these actions:

• JoinAction
• MoveAction
• HitAction

These are all sent as JSON by broadcasting to a Multicast group.

JoinAction is sent when a game is first started to allow the two client NetTank apps to negotiate who is player 1 and who is player 2. The two actions are “ready” and “player2”.

MoveAction contains the action that your tank just did to send to the other client so it can update its display. Initially I was just sending actions for “forward”, “left”, “right” and “fire”. But because UDP does not guarantee messages are received, the tanks would sometimes get out of sync if a lot of moves were sent quickly when there was network congestion. So I instead decided to send the actual xy coordinate and rotation angle for a forward move so that should a message get lost it will at least have the correct information in a future forward message.

When a tank is hit, HitAction contains the new location for the tank (it is moved to a random spot on the screen when hit) to send to the other client.

Because the Combat game already ran using Timers, I didn’t really have to change much of the original Combat game code for NetTank. I added a UDPSocket to the main CombatWindow and in its DataAvailable event I have the code to check for the messages and update the Tank objects as needed.

I also had to make a few tweaks to the main code to send the JSON messages for movements, hits and to properly identify which tank to move.

To try the game you’ll need to run it on two different computers. The first one that starts becomes player 1 (blue) and the second one is player 2 (red). Use the arrow keys to move the tanks and press the space bar to fire.

Download the project or check it out on GitLab.

Add your #JustCode project to the week 10 forum conversation.

Download and check out earlier projects:

• Week 9: Quote Web Service
• Week 8: JumpStart App Launcher
• Week 7: Pitch Tracker
• Week 6: Bubble Popper
• Week 5: Math Quiz
• Week 4: Mini-Golf ScoreKeeper
• Week 3: Dogs Up!
• Week 2: Password Generator
• Week 1: Color Picker

The SQLite database has just a single table called Quote with this structure:

CREATE TABLE Quote (
ID INTEGER NOT NULL,
QuoteText TEXT,
QuoteSource TEXT, 
PRIMARY KEY (ID)
);

To randomly fetch a single quote from the table, this SQL is used:

SELECT QuoteText, QuoteSource FROM Quote ORDER BY RANDOM() LIMIT 1;

As companion apps, I’ve also included simple desktop and iOS apps that call the web service to display a quote.

The raw JSON that is returned looks like this:

{"QuoteText":"Simple things should be simple. Complex things should be possible.","QuoteSource":"Alan Kay"}

I’ve published a version of this on Xojo Cloud. Access the app.

Access the web service here.

You can download the projects or check it all out on GitLab.

Add your #JustCode project to the week 9 forum conversation.

Download and check out earlier projects:

• Week 8: JumpStart App Launcher
• Week 7: Pitch Tracker
• Week 6: Bubble Popper
• Week 5: Math Quiz
• Week 4: Mini-Golf ScoreKeeper
• Week 3: Dogs Up!
• Week 2: Password Generator
• Week 1: Color Picker

When I got my first modem I went online with Genie and Delphi and uploaded JumpSTART as freeware. Even though it was freeware, I got a few checks in the mail from people that liked it.

I was reminded of JumpSTART when I saw my dock getting crowed. I thought replicating JumpSTART in Xojo would be a good project for week 8 of #JustCode. Though let’s just call it JumpStart this time around.

This is what JumpSTART looked like on monochrome 640×480 screen:

JumpStart in Xojo is greatly simplified and looks like this:

The Xojo version automatically saves and loads the apps you’ve added so there was no need for separate Load/Save, Re-Read buttons. Technically they don’t have to be apps as even a document file can be launched as well.

You can right-click on an app button after you’ve added it to Rename, Change or Clear it so that also removed the need for some UI controls. And you just click on an empty button to add an app to it. When you click on a button with an app assigned, the app is launched and JumpStart hides itself.

This Xojo app demonstrates the use of a Canvas-based button, ContainerControls added dynamically to a window, and saving/loading JSON. The Canvas-based button will let me tweak the display, colors and maybe display an icon there.

You can download the project or check it out on GitLab.

As an added code treat, I’ve posted the original JumpSTart Pascal code to GitHub. FWIW, the original Pascal source is just over 1300 lines of code. The Xojo version is about 180.

Add your #JustCode project to the week 8 forum conversation.

Download and check out earlier projects:

• Week 7: Pitch Tracker
• Week 6: Bubble Popper
• Week 5: Math Quiz
• Week 4: Mini-Golf ScoreKeeper
• Week 3: Dogs Up!
• Week 2: Password Generator
• Week 1: Color Picker

• Growing? Read how one Xojo user took his app from in-house to commercial,
• Transitioning Windows Graphics: Direct2D/DirectWrite,
• Remote Debugger for Raspberry Pi and the Programming with Raspberry Pi Book,
• Check out our highly popular JSON Feed blog post series for iOS, web and Desktop,
• We updated Xojo’s Linux Desktop framework to GTK3 and HiDPI,
• Whatever happens, Xojo has your back if Mac goes ARM, and
• Jump into our ongoing Compiler blog post series: LLVM Everywhere, Compiler 101 – Overview and Lexer, and Compilers 102 – Parser.

A special mention on the topic of Net Neutrality in the US. Geoff has shared his point of view and we hope you make your voice heard to the FCC before December 14th. This is an issue that effects us all.

The Xojo community continues to grow with developers switching from VB, emerging citizen developers and small businesses all discovering what they can with Xojo. In the last 12 months the Xojo Forum has welcomed 1,688 new forum members and 60,772 forum posts.

Our blog post from back in June, Daring to Defy Software Extinction sums up Xojo and Dev Tool history with some perspective. We’re proud of what we, along with the Xojo Community, have built over the past 21 years and we look forward to 2018 – Android support, I’m looking at you!

From everyone at Xojo, thank you for your continued support. This community is truly one-of-a-kind and we look forward to all that 2018 has in store!

Our favorite Xojo Blog post in June was actually 3 posts: JSON Feed Web App, JSON Feed iOS App, and JSON Feed Desktop App. Paul got to talk server updates with John Gruber (he’s still talking about around the watercoolor).

Sorry if no one replied to your email back on June 9th, we were reading the reviews on this Banana Slicer.

Javier brought to our attention that NASA had needed engineers that knew assembly languages and FORTRAN. Sorry y’all, the post has been filled.

I was excited to learn that this year’s Astronaut class of 12 includes 5 women!

We just can’t get away from JSON! Paul found this brief history of JSON.

This punny bit about the origin of the name CodeWarrior that we learned when researching its history for our post Daring to Defy Software Extinction about the longevity of dev tools.

Speaking of puns, did you know there was a Programming Puns subreddit? Now you do!

Catch this recap of the June Virtual Xojo User Group meeting – that’s VXUG for those of you in the know

Jason found out that GE is building the world’s largest ‘Additive’ Machine which will 3D print metal parts for jets from metal powder.

That’s all for June, we hope you enjoyed wasting a little time with us. See you next month!

In this post, I’ll show you how to create a Xojo desktop app to display the JSON feed for Daring Fireball in less than 20 lines of code. This app works without changes on macOS, Windows and Linux.

Designing the User Interface

To start, download Xojo for free, install and launch it. At the Project Chooser, select “Desktop”, enter “JSONFeed” as the Application Name and click OK.

You are now looking at the Layout Editor. You can drag controls from the Library on the right to create your user interface. For this example, you’ll want 6 controls: 2 Labels, a TextField, a Button, a ListBox and an HTMLViewer. Drag them onto the web page layout as shown below:

Now click the Inspector button on the toolbar to see the Inspector which shows the properties. You are going to want to change some properties for a few of the controls. Click on a control to see its properties in the Inspector.

1. Change the text property for the Label next to the TextField to be “Feed URL:”.
2. For the TextField, change its name to “URLField” and set its Text to the URL for the Daring Fireball JSON Feed: “https://daringfireball.net/feeds/json”. You’ll also want to click the right-most lock in the Locking section to allow this field to grow in size to fit the web page (Left, Top and Right should all be “locked”).
3. Click the button and change its Caption to “Load”. In the Locking section, make sure that only Top and Right are locked.
4. Select the Label below the TextField and change its name to “FeedTitleLabel”.
5. Click the ListBox and change its name to “FeedList”. Also change the ColumnCount to 2 and ColumnWidths to 75%. Also set the locking so that Left, Top and Right are locked.
   1. To set the headers for the ListBox,
6. Now select the HTMLViewer and change its Name to “ArticleViewer” and set the locking so that Left, Top, Right and Bottom are locked.
7. Lastly, you want to add a non-UI control to the web page. This control is what will connect and download the JSON Feed. Click on Library in the toolbar and scroll down to find the control called “Generic Object”. Drag that on to the web page layout where it will appear at the Shelf on the bottom. Switch to the Inspector and change the control Name to “FeedSocket” and the Super to “Xojo.Net.HTTPSocket”.

That’s it for the UI. You can click the Run button on the toolbar to start this web app so you can see what it looks like.. It won’t do anything yet, but you can make sure all the controls are positioned properly. Try resizing the window as well.

Adding Code

Now it’s time to add the code. Start by double-clicking on the button the window layout. This displays the Event Handler window. Click on Action and select OK. You are now looking at a blank Code Editor. The code you put here runs when the button is clicked. Your code needs to tell the FeedSocket to get the JSON feed for the URL entered in the TextField. This is the code to do that:

FeedSocket.Send("GET", URLField.Text.ToText)

Now you need to put code in FeedSocket to parse the JSON Feed that gets returned. Double-click FeedSocket to display the Event Handler window, select PageReceived and click OK. The code below converts the JSON from binary data to Text, then parses the JSON in the Text to get a Dictionary. From the Dictionary you can get the array of articles in the JSON (called items), loop through them and add them to the list.

If HTTPStatus = 200 Then
  Dim jsonText As Text = Xojo.Core.TextEncoding.UTF8.ConvertDataToText(Content)
  Dim jsonDict As Xojo.Core.Dictionary = Xojo.Data.ParseJSON(jsonText)
 
  FeedList.DeleteAllRows
 
  // Display the feed title
  FeedTitleLabel.Text = jsonDict.Value("title")
 
  // Display the feed articles
  Dim items() As Auto = jsonDict.Value("items")
  For Each article As Xojo.Core.Dictionary In items
    Dim title As Text = article.Value("title")
    Dim pubDate As Text = article.Value("date_published")
    FeedList.AddRow(title, pubDate)
 
    // Save article content
    FeedList.RowTag(FeedList.LastIndex) = article.Value("content_html")
  Next
End If

The last bit of code displays the content for the selected article. Double-click the FeedList control and in the Event Handler window choose Change and press OK. This is the event that is called when you click on a row in the list. In the Code Editor add this code to get the article content (that was previously saved in the RowTag) and load it into the ArticleViewer to display:

Dim content As Text = Me.RowTag(Me.ListIndex)
ArticleViewer.LoadPage(content, GetTemporaryFolderItem)

You can now run the project to see it in action. Once the page displays, click the Load button to load the Daring Fireball JSON Feed. Click on an article to view it. Here it is running on macOS:

With a Xojo license you can build this app for multiple platforms, including macOS, Windows and Linux, without having to change anything. Simply select the appropriate boxes in the Build Settings on the left.

With a little more work on your part, you can turn this into a full-featured JSON Feed viewer. For example, you can let users add multiple feeds and check them periodically for new posts.

Related posts: JSON Feed iOS App and JSON Feed Web App

Designing the User Interface

To start, download Xojo for free, install and launch it. At the Project Chooser, select “iOS”, enter “JSONFeed” as the Application Name and click OK.

You are now looking at the Layout Editor. You can drag controls from the Library on the right to create your user interface. For this example you’ll create an iPhone app, so we’ll focus on that layout. The iPhone app will consist of two “views”. The first view will let you enter the JSON Feed URL and then display the article titles. When you click on an article, the second view will appear displaying the article content.

By default Xojo created your project with the first view, called View1. You’ll want to drag three controls to this view: a TextField, a Button and a Table. Arrange them to look like this:

Next you’ll want to set some of the properties for these controls. But first, change the name of View1. Click the Inspector button on the toolbar to show properties and then click anywhere on the View that is not a control. This displays the properties for the view itself.

In the view change these properties:

• Name: FeedView
• NavigationBarVisible: ON
• Title: JSON Feed

You’ll next change some properties for each of the controls. Click on the TextField and set these properties:

• Name: URLField
• PlaceHolder: Enter JSON Feed URL
• Text: https://daringfireball.net/feeds/json

Now click on the Button and change these fields:

• Name: LoadButton
• Caption: Load

Lastly, click on the Table and change these fields:

• Name: FeedTable

Lastly, you want to add a non-UI control to the view. This control is what will connect and download the JSON Feed. Click on Library in the toolbar and scroll down to find the control called “Generic Object”. Drag that on to the view layout where it will appear at the Shelf on the bottom. Switch to the Inspector and change these properties:

• Name: FeedSocket
• Super: Xojo.Net.HTTPSocket

With this view finished you now need to create the second view. From the Insert button or menu, select “View” to add a new view to the project. Click on the view and change these properties (select the Inspector if it is not visible):

• Name: ArticleView
• NavigationBarVisible: ON

This view has only a single control on it: HTMLViewer. Drag it onto the view so that it takes up the entire area of the layout like this:

Click on the Inspector to show the properties for the HTMLViewer and change these properties:

• Name: ArticleViewer

With the two views done, you can now move on to adding code.

Adding Code

Now it’s time to add the code. Start by double-clicking on the button FeedView. This displays the Event Handler window. Click on Action and select OK. You are now looking at a blank Code Editor. The code you put here runs when the button is tapped. Your code needs to tell the FeedSocket to get the JSON feed for the URL entered in the TextField. This is the code to do that:

FeedSocket.Send("GET", URLField.Text)

Next you need to put code in FeedSocket to parse the JSON Feed that gets returned. Double-click FeedSocket to display the Event Handler window, select PageReceived and click OK. The code below converts the JSON from binary data to Text, then parses the JSON in the Text to get a Dictionary. From the Dictionary you can get the array of articles in the JSON (called items), loop through them and add them to the table.

If HTTPStatus = 200 Then
  Dim jsonText As Text = Xojo.Core.TextEncoding.UTF8.ConvertDataToText(Content)
  Dim jsonDict As Xojo.Core.Dictionary = Xojo.Data.ParseJSON(jsonText)
 
  FeedTable.RemoveAll
 
  // Display the feed title
  Self.Title = jsonDict.Value("title")
 
  // Display the feed articles
  FeedTable.AddSection("")
  Dim items() As Auto = jsonDict.Value("items")
  For Each article As Xojo.Core.Dictionary In items
    Dim title As Text = article.Value("title")
    Dim pubDate As Text = article.Value("date_published")
 
    // Create cell with values and content in the Tag
    Dim cell As iOSTableCellData = FeedTable.CreateCell
    cell.Text = title
    cell.DetailText = pubDate
    cell.Tag = article.Value("content_html")
    FeedTable.AddRow(0, cell)
  Next
End If

The next bit of code displays the content for the selected article. Double-click the FeedTable control and in the Event Handler window choose Action and press OK. This is the event that is called when you tap on a row in the list. In the Code Editor add this code to get the article content (that was previously saved in the RowTag) and send it to the ArticleView to display there:

Dim content As Text = Me.RowData(section, row).Tag

Dim v As New ArticleView
v.SetContent(content)
PushTo(v)

The final code is the SetContent method on ArticleView (called by the code above) that takes the content and prepares it to display in the ArticleViewer. Select ArticleView and create a new method by clicking the “+” button on the command bar and choosing Method. Set these properties in the Inspector for the method:

• Method Name: SetContent
• Parameters: content As Text

This is the code to put in the method:

// Save content to a file
Dim articleFile As FolderItem = SpecialFolder.Documents.Child("article.html")
Dim output As TextOutputStream
output = TextOutputStream.Create(articleFile, TextEncoding.UTF16)
output.Write(content)
output.Close

// Display the file
ArticleViewer.LoadURL(articleFile.URLPath)

Since the HTMLViewer can only display content from a URL, the code first saves the content to a file in the app’s private Documents folder and then tells the ArticleView to load the file using its URLPath.

Testing

You can run the project to test it out. If you don’t already have it, you’ll need to first install Xcode so that you have the iOS Simulator. With Xcode installed you can click the Run button on the Xojo toolbar which builds your iOS app and launches it in the iOS Simulator.

Click the Load button to load the feed…wait. It didn’t show anything did it?

It turns out that the Daring Fireball site does not yet have TLSv1.2 enabled, which iOS requires by default to access web sites. I checked with John Gruber and he said he’s been planning a server upgrade, but until he does so we have to tell iOS to accept a lower level of security for this web site.

Anyway, quit the iOS Simulator for now.

To change security settings, create a text file (using your favorite text editor) and name it Info.plist. This is the contents of the plist file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSExceptionDomains</key>
    <dict>
      <key>daringfireball.net</key>
      <dict>
        <key>NSIncludesSubdomains</key>
        <true/>
        <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
        <true/>
        <key>NSTemporaryExceptionMinimumTLSVersion</key>
        <string>TLSv1.0</string>
        <key>NSTemporaryExceptionRequiresForwardSecrecy</key>
        <false/>
      </dict>
    </dict>
  </dict>
</dict>
</plist>

Now drag the text file to your Xojo JSONFeed project so that it can be incorporated into the app when it gets built.

You can now Run the JSONFeed project again. This time when you click the Load button you’ll see a list of the current Daring Fireball articles. Tap on one of the posts and a new view with the content appears. Tap the Back button to go back to the list of articles.

Related posts: JSON Feed Web App and JSON Feed Desktop App

In fact, it is so simple that you can easily make web, desktop and iOS apps with Xojo to display the feed. In this post, I’ll show you how to create a Xojo web app to display the JSON feed for Daring Fireball in less than 20 lines of code.

Designing the User Interface

To start, download Xojo for free, install and launch it. At the Project Chooser, select “Web”, enter “JSONFeed” as the Application Name and click OK.

You are now looking at the Layout Editor. You can drag controls from the Library on the right to create your user interface. For this example, you’ll want 6 controls: 2 Labels, a TextField, a Button, a ListBox and an HTMLViewer. Drag them onto the web page layout as shown below:

Now click the Inspector button on the toolbar to see the Inspector which shows the properties. You are going to want to change some properties for a few of the controls. Click on a control to see its properties in the Inspector.

1. Change the text property for the Label next to the TextField to be “Feed URL:”.
2. For the TextField, change its name to “URLField” and set its Text to the URL for the Daring Fireball JSON Feed: “https://daringfireball.net/feeds/json”. You’ll also want to click the right-most lock in the Locking section to allow this field to grow in size to fit the web page (Left, Top and Right should all be “locked”).
3. Click the button and change its Caption to “Load”. In the Locking section, make sure that only Top and Right are locked.
4. Select the Label below the TextField and change its name to “FeedTitleLabel”.
5. Click the ListBox and change its name to “FeedList”. Also change the ColumnCount to 2 and ColumnWidths to 75%. Also set the locking so that Left, Top and Right are locked.
   1. To set the headers for the ListBox, hover the mouse over the ListBox and lick the “pencil” icon that appears. Double click on the header to edit the text and click the close icon when you are finished.
6. Now select the HTMLViewer and change its Name to “ArticleViewer” and set the locking so that Left, Top, Right and Bottom are locked.
7. Lastly, you want to add a non-UI control to the web page. This control is what will connect and download the JSON Feed. Click on Library in the toolbar and scroll down to find the control called “Generic Object”. Drag that on to the web page layout where it will appear at the Shelf on the bottom. Switch to the Inspector and change the control Name to “FeedSocket” and the Super to “Xojo.Net.HTTPSocket”.

That’s it for the UI. You can click the Run button on the toolbar to start this web app so you can see what it looks like in your browser. It won’t do anything yet, but you can make sure all the controls are positioned properly.

Adding Code

Now it’s time to add the code. Start by double-clicking on the button the web page layout. This displays the Event Handler window. Click on Action and select OK. You are now looking at a blank Code Editor. The code you put here runs when the button is clicked. Your code needs to tell the FeedSocket to get the JSON feed for the URL entered in the TextField. This is the code to do that:

FeedSocket.Send("GET", URLField.Text.ToText)

Now you need to put code in FeedSocket to parse the JSON Feed that gets returned. Double-click FeedSocket to display the Event Handler window, select PageReceived and click OK. The code below converts the JSON from binary data to Text, then parses the JSON in the Text to get a Dictionary. From the Dictionary you can get the array of articles in the JSON (called items), loop through them and add them to the list.

If HTTPStatus = 200 Then
  Dim jsonText As Text = Xojo.Core.TextEncoding.UTF8.ConvertDataToText(Content)
  Dim jsonDict As Xojo.Core.Dictionary = Xojo.Data.ParseJSON(jsonText)
 
  FeedList.DeleteAllRows
 
  // Display the feed title
  FeedTitleLabel.Text = jsonDict.Value("title")
 
  // Display the feed articles
  Dim items() As Auto = jsonDict.Value("items")
  For Each article As Xojo.Core.Dictionary In items
    Dim title As Text = article.Value("title")
    Dim pubDate As Text = article.Value("date_published")
    FeedList.AddRow(title, pubDate)
 
    // Save article content
    FeedList.RowTag(FeedList.LastIndex) = article.Value("content_html")
  Next
End If

The last bit of code you need displays the content for the selected article. Double-click the FeedList control and in the Event Handler window choose SelectionChanged and press OK. This is the event that is called when you click on a row in the list. In the Code Editor add this code to get the article content (that was previously saved in the RowTag) and load it into the ArticleViewer to display:

Dim content As Text = Me.RowTag(Me.ListIndex)
ArticleViewer.LoadPage(content)

You can now run the project to see it in action. Once the page displays, click the Load button to load the Daring Fireball JSON Feed. Click on an article to view it. Here it is running in Safari:

With a Xojo license you can deploy this web app to your own server for others to use. Or you can use Xojo Cloud for easy one-click deployment right from the Xojo IDE. Here is this app running on Xojo Cloud:

JSON Feed Example App

With a little more work on your part, you can turn this into a full-featured JSON Feed viewer. For example, you can let users add multiple feeds and check them periodically for new posts.

Related posts: JSON Feed iOS App and JSON Feed Desktop App

Pushover is actually two things: a web service you can call to send notifications and an app you install on your device to receive notifications. Using it is really easy, but I’ve made a class you can use to make it even easier: just drag it onto your layout to use.

Here’s how to set things up:

1. Go to www.pushover.net and create a free account.
2. Make a note of your User Key.
3. Go to your Pushover account page and create an Application. This creates an App Token. Make a note of it.
4. Install a Pushover device client on your mobile device. This works with iOS, Android and web browsers. You can use them in trial mode for 7 days, after which each is a one-time $5 purchase.
5. Grab the Xojo Pushover project from Github.

In the project, go to the Pushover module and change the kUserKey constant to be your User Key. Change the kAppToken to your App Token.

Now you can run the Xojo Pushover project. Enter some text in the text area and press the Send button. The notification should appear on your mobile device. Here you can see the notification as it appears on my iPhone:

I swiped on the notification and it opened in the Pushover app where you can see additional information including the URL that you can tap to open:

To use this in your own projects, just add the Pushover module and then drag the Communicator class onto your layout. Call its SendNotification method to send a notification. Any errors are returned in the PageReceived event as JSON.

Like I said, it is super-easy and the code is available on Github. Thanks to Casey Liss for pointing out the Pushover service to me. Enjoy your notifications!

Recently they just announced a web services API for accessing their articles and other information. And as I’ve talked about in other posts and webinars, it’s often quite easy to use web services with Xojo apps.

I’ll show you how you can quickly create an iOS app that shows the most recent TDWTF posts and then displays them when you tap on their title.

To start, create a Xojo iOS project.

On the default View (View1), use the Inspector to set a couple properties:

• BackButtonTitle: Articles
• Title: The Daily WTF

Now drag a Table from the Library onto the View and stretch it to fit the entire layout area. Name the table ArticleTable. This Table will be used to display the list of recent articles.

To get the articles, you just have to make the appropriate API call. Looking at the API docs, there is an API command called /articles/recent which returns a JSON document of the recent articles and related information. This is the actual API call. To see its JSON results, use a tool like Paw (now with Xojo extensions) or RESTy with this URL (a browser will also show the unformatted JSON):

http://thedailywtf.com/api/articles/recent

If you look at the JSON results, you’ll see that it returns an array of articles with a “Title” entry containing the title of the article and a “Url” entry containing the URL of the article.

To call this in the Xojo app, I’ll use an HTTPSocket. In the Library, drag the item called “Generic Object” onto the Layout. It will appear in the Shelf at the bottom. In its Inspector, change the name to WTFSocket and set its super to “Xojo.Net.HTTPSocket”.

Now add an event handler to the socket, right->click on the socket, select “Add To” and then “Event Handler”. Add the PageReceived event handler. In it, put this code to request the articles:

// Convert the binary Content data to JSON text and then
// parse it to an array.
Dim jsonText As Text = TextEncoding.UTF8.ConvertDataToText(Content)
Dim jsonArray() As Auto = Data.ParseJSON(jsonText)

// Loop through the array and add each article to
// the table.
ArticleTable.AddSection("")
For i As Integer = 0 To jsonArray.Ubound
  Dim article As Dictionary = jsonArray(i)

  Dim cell As iOSTableCellData = ArticleTable.CreateCell
  cell.Text = article.Value("Title")
  cell.Tag = article.Value("Url")

  Dim author As Dictionary = article.Value("Author")
  cell.DetailText = article.Value("DisplayDate") + " by " + author.Value("Name")
  ArticleTable.AddRow(0, cell)
Next

The URL is being put into the Tag for the cell so that it can be used later to display the article when its row is tapped.

You’ll also see I’m also accessing the “DisplayDate” value and grabbing the “Name” from the “Author” object in the JSON.

Now you’ll want to call the web service. Add the Open event handler to the View with this code:

// Call the /articles/recent web service
WTFSocket.Send("GET", "http://thedailywtf.com/api/articles/recent")

Run the project and you’ll see the list of recent article appear:

The final step is to display the article when it is tapped in the list. You’ll want another View to display the article (Insert->View). Name the view ArticleView. On this View, set the NavigationBarVisible property to ON and drag an HTML Viewer onto it. Make the HTML Viewer fill the entire View layout and name it ArticleViewer.

Add a method to ArticleView called ShowArticle(url As Text) with this code:

ArticleViewer.LoadURL(url)

This method loads the URL into the HTML Viewer and is called when its row is tapped in the list of articles.

Speaking of which, back on View1 add the Action event handler to the table with this code:

// Get the URL from the tag for the tapped row
Dim url As Text = Me.RowData(section, row).Tag

// Display the article on the new view and show it
Dim v As New ArticleView
v.ShowArticle(url)
PushTo(v)

Now run the project. You’ll see the list of article as before. Tap on an article to show the new view with the article.

Take a look at the full API to see what other cool features you can add to the app. Here are some suggestions:

• Display a random article
• Display more than the last 8 recent articles
• Cache the article contents on the device and use the cache when the article is displayed again
• Display articles by month/year

Text

The new Text data type is a substitute for String and has the benefit of making encodings easier to work with. Essentially if you use Text, you don’t have to worry about the encoding. When you get data from an outside source (a file, a database or even a String), you specify the encoding so it can be stored as Text. Once it is in Text, you don’t worry about the encoding. When you need to send the Text to a file, DB or elsewhere, you convert it to data using whatever encoding is appropriate- usually UTF8.

You can easily use Text with your existing projects as a Text value converts back to a String automatically. For example, you can set a button Caption using a Text variable:

Dim t As Text = "Hello"
MyButton.Caption = t // converts automatically to String

If you have a String (such as a property of a UI control) you can easily convert it to Text by calling the ToText method. For example, you store the Caption of a button as Text:

Dim t As Text = MyButton.Caption.ToText

Dictionary

I prefer Xojo.Core.Dictionary because it is has an easy-to-use iterator, making it crazy-simply to loop through the items in the Dictionary:

Dim myDictionary As New Xojo.Core.Dictionary
myDictionary.Value("Name") = "Bob Roberts"
myDictionary.Value("City") = "Boston"
For Each entry As Xojo.Core.DictionaryEntry In myDictionary
  Dim key As Text = entry.Key
  Dim value As Text = entry.Value
Next

Xojo.Core.Dictionary can also be case-sensitive which is not even an option with the classic Dicitonary class! You just have to subclass (or use AddHandler) and implement the CompareKeys event handler:

Dim leftText As Text = lhs
Dim rightText As Text = rhs
Return leftText.Compare(rightText, Text.CompareCaseSensitive)

JSON

In the new framework, JSON is handled by two methods (Xojo.Data.ParseJSON and Xojo.Data.GenerateJSON), typically with Xojo.Core.Dictionary. Creating JSON text from a Dictionary is one line of code:

Dim jsonText As Text = Xojo.Data.GenerateJSON(myDictionary)

And converting JSON text to a Dictionary is also one line of code:

Dim jsonDict As Xojo.Core.Dictionary = Xojo.Data.ParseJSON(jsonText)

Both of these methods are much faster than using JSONItem in the classic framework.

HTTPSocket

Xojo.Net.HTTPSocket uses HTTP 1.1. This is a big advantage over the classic HTTPSocket which only supports HTTP 1.0 making it not always compatible with some sites.

I recently did a webinar that shows how to use HTTPSocket with a variety of web services.

TextInputStream/TextOutputStream

Lastly, I often work with Text files which means I have to deal with encodings. The TextInputStream and TextOutputStream make it easy to deal with encodings because the encoding is part of the method calls.

You can even use these classes with classic FolderItems by first converting them to Xojo.IO.FolderItem. For example, this prompts the user for a file and then opens it using a TextInputStream:

Dim f As FolderItem = GetOpenFolderItem("")
If f <> Nil Then
  Dim openFile As New Xojo.IO.FolderItem(f.NativePath.ToText)
  Dim input As Xojo.IO.TextInputStream
  input = Xojo.IO.TextInputStream.Open(openFile, Xojo.Core.TextEncoding.UTF8)
End If

If you have not already, try these new Xojo Framework classes in your projects. You’ll appreciate it!

Update (June 2020):

Since this was posted, there have been many updates to Xojo. In particular you should check out these equivalent API 2.0 features:

• Dictionary now also has an iterator.
• GenerateJSON and ParseJSON.
• URLConnection

A little Internet research turned up a set of classes for .NET (in C#) that can do this. I took a few minutes to port these three classes over to a single Xojo class that can format JSON for you.

• Download JSONFormatter

To use the class, add it to your project and then add code like this:

Dim formatter As New JSONFormatter(json)
Dim formattedJSON As Text = formatter.Format

Here is an example of unformatted JSON:

{"Crows":{"players":{"Ben":{"position":"1B"},"Ty":{"position":"2B"}}},"Pigeons":{"players":{"Bill":{"position":"1B"},"Tim":{"position":"2B"}}},"Seagulls":{"players":{"Bob":{"position":"1B"},"Tom":{"position":"2B"}}}}

And what it looks like after being formatted by JSONFormatter:

{
    "Crows":
    {
        "players":
        {
            "Ben":
            {
                "position":"1B"
            },
            "Ty":
            {
                "position":"2B"
            }
        }
    },
    "Pigeons":
    {
        "players":
        {
            "Bill":
            {
                "position":"1B"
            },
            "Tim":
            {
                "position":"2B"
            }
        }
    },
    "Seagulls":
    {
        "players":
        {
            "Bob":
            {
                "position":"1B"
            },
            "Tom":
            { 
                "position":"2B"
            }
        }
    }
}

I hope you find this useful. Want to learn more about using JSON with Xojo? Watch our on-demand JSON webinar, learn to use JSON with Xojo along with slides and a sample project.

Download MP3.

Show Links

• Penn State University
• Blast Image Config
• MacAdmins Conference
• Xojo JSON support
• Sched.org
• Open-Source Xojo Projects
• 5 Reasons to rely on Cloud services
• Git webinars
• XojoUnit
• System 76 Linux laptops
• ElementaryOS
• JackObud arcade cabinets
• Retro game webinar
• Pixel Space Wars

You can also subscribe on iTunes.

In the Classic framework the JSONItem class is used to create, load and output JSON data. With the new “Xojo” framework, you simply use a Dictionary, which you can easily populate from JSON data or output to JSON data.

For example, here is some JSON data to use as an example:

{ "Seagulls":
  { "players":
    { "Bob":{ "position":"1B" },
      "Tom":{ "position":"2B" } }
},
  "Pigeons":
  { "players":
    { "Bill":{ "position":"1B" },
      "Tim":{ "position":"2B" } }
},
  "Crows":
  { "players":
    { "Ben":{ "position":"1B" },
      "Ty":{ "position":"2B" } } }
}

With the above JSON data pasted into a TextArea, you can load it with just a single line of code:

Dim league As Dictionary = Xojo.Data.ParseJSON(JSONArea.Text.ToText)

This is similar to the classic framework, which would look like this:

Dim league As New JSONItem(JSONArea.Text)

Looping through the JSON data is also similar. In the Xojo framework, you just iterate through the Dictionary with each JSON section as its own Dictionary:

Dim teamName, playerName As TextDim team, players, player As Dictionary

For Each t As DictionaryEntry In league
  teamName = t.Key
  team = t.Value
  OutputArea.AppendText(teamName)
  OutputArea.AppendText(EndOfLine)
  players = team.Value("players")
  For Each p As DictionaryEntry In players
    playerName = p.Key
    player = players.Value(playerName)
    OutputArea.AppendText(" " + playerName + " ")
    For Each a As DictionaryEntry In player
      OutputArea.AppendText(a.Value + " ")
    Next
    OutputArea.AppendText(EndOfLine)
  Next
Next

In the Classic framework, you iterate through the count of items in the JSONItem:

Dim teamName, playerName As StringDim team, players, player As JSONItem

For i As Integer = 0 To league.Count-1
  teamName = league.Name(i)
  team = league.Value(teamName)
  OutputArea.AppendText(teamName)
  OutputArea.AppendText(EndOfLine)
  players = team.Value("players")
  For p As Integer = 0 To players.Count-1
    playerName = players.Name(p)
    player = players.Value(playerName)
    OutputArea.AppendText(" " + playerName + " ")
    For a As Integer = 0 To player.Count-1
      OutputArea.AppendText(player.Value(player.Name(a)) + " ")
    Next
    OutputArea.AppendText(EndOfLine)
  Next
Next

An example project for the above code is here.

To create JSON from a Dictionary, you use the the GenerateJSON method:

Dim d As New Xojo.Core.Dictionary
d.Value("Name") = "Bilbo Baggins"
Dim json As Text = Xojo.Data.GenerateJSON(d)

Grab Xojo 2015r2 and start using GenerateJSON and ParseJSON the Xojo framework today!

Update (June 2020):

Since this was written, GenerateJSON and ParseJSON were also added as part of API 2.0.