Incorporating RSS feeds into a Cascades application using QML

Details

Category: Cascades Tutorials

Published on Friday, 19 October 2012 02:11

Written by J. Duke

I have been building websites and utilizing web development tools for several years, so all of my applications currently available for PlayBook are web apps compiled using the BlackBerry WebWorks SDK. My developer skill set lies in web development, and that is where I am most comfortable. That being said, after attending Jam Americas in San Jose, I began dabbling with the BlackBerry 10 NDK and with Cascades. I am now a believer and advocate for utilizing the Cascades UI framework on BlackBerry 10.

This post is the first in a series of blog posts that will detail how to implement features that are most commonly needed in a mobile application. All the posts in this series will be based on my experience taking my Space TV app for PlayBook (WebWorks application) and porting it using QML/Cascades to the upcoming BlackBerry 10 handsets.

Space TV for PlayBook has been downloaded over 15,000 times since launching in App World in mid August, 2012, and with Cascades “frosting” I expect even more success with this application on BB10.

Each post in this series will feature code samples and a detailed tutorial, so let’s get started.

Choosing and creating an appropriate UI for your application

In creating Space TV for BB10, creating the UI and implementing the live video feed were obviously the most important to me, and the first two elements I wanted to implement. In addition to the live video feed, I wanted to include a news section, so in this tutorial we will dive into designing and implementing a UI and using a RSS news feed into a Cascades application.

(In a later tutorial, I will demonstrate how to implement a video player into your application.)

When creating a new Cascades project in the BlackBerry 10 NDK, several starter templates are available.  For Space TV I decided to use the TabbedPane model with NavigationPanes within some of the tabs, and that is the model used in this tutorial.

With the TabbedPane model, a number of tabs are defined in the main.qml file. Tabs can be displayed on the action bar and spill over into the tab overflow menu on the left of the action bar. Alternatively, all tabs can be selectable from the tab overflow menu (see figure 1.1). 

For this example, all tabs will reside on the Action Bar (See figure 1.2).

Figre 1.2: Tabs On Action Bar

Ready? Let’s Code!

In the NDK, start a new Cascades project and choose the Tabbed Pane template, and name the project tutorial1

The basic layout for the main.qml file is as follows:

Each tab contains content specific only to that tab. The content of a tab can include a Page or a NavigationPane. The purpose of this tutorial is to help developers add content to their apps, so for more detailed information about using the TabbedPane, see Cascades documentation.

Implementing an RSS news feed

One of the most commonly used features in mobile apps is the implementation of news feeds generated from RSS.  Cascades for BB10 makes incorporating news into an application very simple and requires only QML elements to achieve. 

Cascades elements used in this section:

• NavigationPane
•  Page
• Container
• ListView
• ListItemComponent
• StandardListItem
• GroupDataModel
• DataSource
• ComponentDefinition
• ScrollView
• WebView
• ActivityIndicator

In the above TabbedPane let’s add our first news feed to Tab 1.

So with this tab, we begin by defining a NavigationPane and we can assign an id of “newsPane”.  Within the NavigationPane, define a Page and a ListView.

Within the ListView we need to define some listItemComponents:

To make our newly created ListView populate with news stories, we need to attach a DataModel and a DataSource to our Page so the app will know from where to pull the list items. The following code sample will contain all that is needed to populate our list with a news stories, and a detailed explanation will follow the code sample.

GroupDataModel allows the list to be sorted.  In this case we are sorting the news items by “pubDate” which means they will be sorted based on the date each news item was published.

DataSource defines where the RSS feed is located. For this example we are using the RSS url from the BlackBerry Developer Blog. Within DataSource the format of the data is also defined (xml). The query property defined above is standard for RSS news feeds.

onDataLoaded: {} defines what happens once the data is fetched and loaded. In this example, the data is loaded, and inserted into our list view. However, in order to populate our list, we need to do one more thing. We have to use the datamodel property in our ListView to tell the list where to get the data from.

Now, let’s bring all the code together. 

If we compiled the application now it would not work, but we are very close to having a working application.

Almost there…

Just a few more steps need to taken. First we need to add “import bb.data 1.0” to the top of our mail.qml file.

We also need to open the tutorial1.cpp file and modify it slightly

Lastly, we need to open tutorial1.pro in the editor and add the following:

The last few steps simply pull in libraries needed for our application to function properly. You can also right click on the project name in Project Explorer, select configure, and add a library to add the needed libraries to your project. However, you will still need to manually add the library to the tutorial1.pro file as outlined above.

Compile!

Now, to compile the application and see the fruits of your labor, right click the project name in the Project Explorer and click Build.

Once the project is built, you can run the application in a simulator or on your Dev Alpha device. If all went as planned, the application should look like this:

Neat! So now what?

So, we have a list of news items, but when we select an item nothing happens L. Never fear. By adding just a few elements to the newly created app we can open the individual news stories using a WebView.

Study the source code below to learn how to do that. ;) 

I'd prefer anyone reading this tutorial study the final code sample above and attempt to peice together exactly which steps were taken.  Using the RIM documentation is the best way to do this.

Also, the source files and a presigned bar can be downloaded below to help and get you up and running with an RSS news feed in your Cascades BlackBerry 10 app.

Download all assets needed for this tutorial here:

Share this: