Skip to content

Make an RSS Reader with Xojo…in 26 lines of code.

You have heard it many times: coding with Xojo is not just powerful and fun, it is fast, really fast! This is thanks to the fact that you have at your disposal the powerful Xojo Framework, with a lot of classes ready to use doing the hard work behind the scenes. In fact, this article shows you how can create a multi-platform RSS Reader…writing just 26 lines of code!


RSS Reader Made in Xojo

 

 

 

It won’t be an RSS Reader with all the bells and whistles – 26 lines of code does have its limits. But you will learn how useful some of the available Xojo classes are, and you can use the code as the starting point for your own more dazzling RSS Reader. Ready? Start your engines with the Xojo IDE!

HTTPSocket, the class to talk HTTP

Undoubtedly, HTTPSocket is the main class we are going to use in this tutorial. In fact, we will create our own subclass based on HTTPSocket, so we can write the specialized behaviour that we expect from an RSS feed parser.

But before that, and as you can read in the documentation available about the HTTPSocket, this class allows us to receive and send information using the HTTP protocol. So, using a new instance (object) from our class we will be able to get the XML data associated with an RSS feed. For that we just have to make the request against the remote Web Server using the “Get” method from our HTTPSocket sublcass.

For instance, we can get the data associated with an RSS feed using the standard HTTPSocket class this way:

Dim http as new HTTPSocket
dim feedXML as string = http.get("http://blog.xojo.com/feed/“, 30)

As you can see, the “Get” method expects two parameters. The first one is the source URL we are going to use to get the response (the data). The second parameter is optional and it allows us to set the timeout period associated with the request.

Whether we use the timeout parameter or not, we would be using this method in a synchronous way. That is, the code execution flow will stop until it has received the expected data, or the request has expired.

Probably you’ll want to run it as an asynchronous request; that is, without stopping the code execution and allowing a responsive UI after launching the HTTPSocket request. For that to happen we need to create a subclass from HTTPSocket where we will not use the timeout parameter. One significant difference in respect to the previous HTTPRequest is that in this case we will receive the data on the PageReceived event available on the HTTPRequest class.

This is, in fact, the plan we are going to follow in this tutorial. And as an extra for our HTTPSocket subclass, we will support the suscription of an interested object, so we can get back to that once the class has done its work.

Class Interface: RSSReaderDelegate

As you probably know, Xojo does not work with multiple inheritance. In some way, that means that an object can’t be an “apple” and a “lemon” at the same time (inheriting the methods and properties from both class hierarchies).

Personally, I think that is a good thing. Anyway we can achieve or implement this kind of behaviour partially thanks to the Class Interfaces. That way, our classes can “behave” as if they were two (or even more) types, as far they implement the methods defined by the Class Interfaces they ensures to support.

If it helps, you can think about the Class Interfaces as if they were contracts or promises that you made. So, once you have implemented the code for the mandatory methods exposed by the Class Interfaces you want to support on your class, the new instances created from the class can be treated as their original Type or any of the other types exposed from the Class Interfaces.

  1. After you have created a new Xojo Desktop project, choose Insert > Class Interface. Write “RSSReaderDelegate” for the “Name” field of the associated Inspector.
  2. Select the RSSReaderDelegate item on the Project Browser (the leftmost column) and choose the Insert > Method option.
  3. Write “Refresh” as the Method Name in the resulting Inspector, and “Items() as Pair” for the Parameters field, as shown in the following screenshots:

Ajustes-de-interfaz-de-clase-RSSReaderDelegate_thumb

The RSSReader Class

Now is time to write the subclass that will do the main work: get the XML data associated with the RSS source, and parse the nodes to retrieve just the information we want to use. For instance, in this tutorial we are interested only on the “Title” and the associated URL, so when the user selects any of the available items, we can show the full article on an HTML Viewer.

  1. Add a new Class to the project using Insert > Class, and write “RSSReader” as the Class “Name” on the associated Inspector.
  2. Add “HTTPSocket” on the “Super” field of the Inspector. This is the way we have to identify our class as a subclass of the standard HTTPSocket, thus inheriting its exposed methods, events and properties.
  3. With our added Class selected on the Project Browser, add a new Property (Insert > Property). Write “rssReaderDelegate” for the “Name” field, and “RSSReaderDelegate” on the Type Field of the associated Inspector Panel. This will be the property pointing to the object we will use to execute the “Refresh” method once has finished the work with the RSS feed.
  4. Add a second Property, using “items(-1)” for the “Name” field of the associated Inspector, and “Pair” for the “Type” field. This will be Array in charge of storing all the retrieved items from the RSS feed.
  5. Add a new Method named “setDelegate”, typing “objectDelegate as RSSReaderDelegate” on the “Parameters” field of the associated Inspector. Write this line of code in the Code Editor for the method (we could have opted for using a Computed Property or assigning directly the property with a Public scope, at your choice!):
rssReaderDelegate = objectDelegate

PageReceived, here comes the data

Let’s write the code in charge of parsing the received data from the requested URL! For that, we need to add the PageReceived Event to our Class.

Anadir-evento-PageReceived_thumb

Make sure to select the RSSReader item in the Project Browser and choose the Insert > Event Definition option from the menu. On the resulting window, select the PageReceived item and confirm pushing the “OK” button. As result, Xojo will add the selected event to our class, with the Code Editor avilable and ready so you can write the following code:

if httpStatus = 200 then
  content = DefineEncoding(content, encodings.UTF8)
  parseNodes(content)
  if rssReaderDelegate <> nil then rssReaderDelegate.refresh(items)
end if

After we define the text encoding for the received content (UTF8), the following line calls the “parseNodes” method (not created yet). This method is the one responsible of parsing the received data. Once this has been done, the next line of code will invoke the registered object in the case there is a valid one.

XMLDocument and XPath

Time to add the “parseNodes” method to the RSSReader Class, typing “content as String” as Parameter on the associated Inspector. Don’t forget to define the Scope of this method as Private, so it can’t be called from outside the class. Then, write the following code for the just created method:

dim xml as new XmlDocument(content)
dim nodes as XmlNodeList = xml.Xql("//item")
dim title, url as string
for n as integer = 0 to nodes.Length - 1
  title = nodes.item(n).Xql("title").Item(0).firstChild.value
  url = nodes.item(n).Xql("link").Item(0).firstChild.value
  items.Append(new pair(title, url))
next

The XMLDocument class available in the Xojo Framework allows us to easily edit and travel the XML structure, as is the case of the RSS feeds! In addition, we can use XPath (1.0) to make the queries on the XML structure. As you can see, I used the “//item” expression combined with the Xql method to get a list with all the nodes of interest from the XML document.

Once we have the nodes, we just need to use the For… Next loop in order to retrieve the “fields” that we are interested on from each available node. For that, we are going to use the Xql method too. Finally, we just need to create a new Pair with that information and store it on the Items property.

The User Interface

We have finished all the “hard work”, so now is time to create the user interface for our RSS Reader!

Choose the Window1 control in the Navigator to access its Layout Window. Then, add a new ListBox and HTMLViewer from the Library and arrange these controls as shown by the following image:

Interfaz-de-usuario-de-nuestra-aplicacion-RSSReader_thumb

RSSReaderDelegate, Class Interfaces in action!

Our Window1 control will be a Window Type and also a RSSReaderDelegate type, so it can receive the notification once the RSSReader instance finishes its work. For that, you have to select the Window1 control on the Project Browser and push the “Choose…” Interfaces button on the associated Inspector. This action will show the following window:

Panel-para-anadir-conformidad-con-Interfaz-de-clase-en-Xojo_thumb

As you can see, the RSSReaderDelegate is listed as one of the available Interface classes you can choose from! So, please, go ahead and select the RSSReaderDelegate checkbox control and confirm the selection pushing the “OK” button. As result, you’ll notice that Xojo has added the “Refresh” method to the Window1 Control (that is the “contract” that you promise to fulfill as an RSSReaderDelegate, remember?).

Write the following code snippet for the added “Refresh” method:

Listbox1.DeleteAllRows
for each item as pair in items
  Listbox1.AddRow(item.Left.StringValue)
  Listbox1.RowTag(Listbox2.LastIndex) = item.Right.StringValue
next

Showing a Webpage on the HTMLViewer

Choose the Listbox1 control on the Project Browser an add the Change Event. The only line of code you have to write is the responsible to load the webpage associated with the item choosen by the user on the ListBox:

if me.ListIndex <> -1 then HTMLViewer1.LoadURL(me.RowTag(me.ListIndex))

Start engines!

In order to finish the tutorial, we just need to add a Property under the Window1 control and that will be the responsible to store a new instance of our RSSReader class. Select the Window1 control on the Project Browser and choose Insert > Property. Type “myRSSReader” as the Name for the Property and “RSSReader” for the Type field.

Finally, add the Open Event to the Window1 control and write the following code:

myRSSReader = new RSSReader
myRSSReader.setdelegate(me)
myRSSReader.get("http://blog.xojo.com/feed/")

As you can see, we are creating a new instance from our RSSReader class, we set the Window1 as the Delegate control to be noticed once the RSSReader has done his work and, finally, we make the request to retrieve the RSS feed of our interest from the given URL.

You can download the Xojo Project from this link.

Final RSS Reader Made In Xojo

You can watch the video (in Spanish only) that talks you though this example.

Javier Rodríguez has been the Xojo Spanish Evangelist since 2008, he’s also a Developer, Consultant and Trainer who has used Xojo since 1998. He is in charge of AprendeXojo.com and the developer behind the GuancheMOS plug-in for Xojo Developers and the Snippery app, among others.

*Read this post in Spanish

Read More Posts from Javier.

One Comment

  1. Mark Mark

    Awesome article. Xojo\’s simplicity always belies the power available to developers.