If you work in the technologiy industry, I’m sure you’ve heard of the Daily WTF site. Their fun stories about technology gone wrong makes it one of my favorite web sites.
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
