RSS Reader example application

This RSS Reader Example app was originally created as a showcase for the​QML templates project. Following the release of the ​Qt Quick Components, which are delivered as part of the​Qt SDK, the application was redesigned. The redesign follows the new Symbian​design guidelines and platform look and feel.

If you're looking for the earlier implementation, please see OldRSSReaderWiki.

Design approach

The goal was to keep the UI flow simple. The views are laid out to give the impression that they are next to each other horizontally, so that the user can easily keep track of where they are in the application. The horizontal layout also enables a simple implementation for 'sliding' left and right between views. Most views offer a list layout, so the overall look is consistent. The​PageStack Qt Quick Component provides the ideal solution, with automated slide in/slide out transitions when navigating through the app. The UI navigation controls are kept simple and intuitive: the Back button pops the user out of lower levels and reverts to being the exit button on the entry level (the subscribed feeds list).

The landscape layout doesn't differ much from the portrait mode. The header and container, as well as the elements inside them, are scaled according to the screen dimensions.

You can read more about the overall design approach in the​Porting to Qt guide, which uses this application as one of its​examples.

UI navigation

The default navigation direction is to the right, towards more detailed data in the hierarchy: feeds to feed articles to feed article details. The Back button takes the user to the previous view. The UI is laid out in four views, from left to right:

• Discovery
  • You select which feeds to subscribe to.
• Subscribed feeds
  • Shows you all your subscribed feeds, categorised in an​accordion list. You can expand/collapse the accordion by category.
  • You can exit the application from this level with the Back button.
• Selected feed
  • When clicking on a feed in the subscribed feeds view, you move to the right to the selected feed view that shows the items in the feed.
  • You can navigate back to the subscribed feeds view with the Back button.
• Selected feed item
  • When clicking on a feed in the selected feed view, you move to the right to the selected feed item view. This view will show the item text and any enclosure images related to the item.
  • You can navigate back to the selected feed view with the Back button.
• Settings
  • You can choose between light and dark themes. On MeeGo 1.2 Harmattan phones the platform look and feel (for Buttons, ToolBars, StatusBar, and so on) will also change.
  • You can navigate back to the previous view with the Back button.

What is included?

The RSS reader example contains a fully functional, multi-platform (Windows/Linux desktop, Symbian, MeeGo 1.2 Harmattan) example app that can be loaded into​Qt SDK 1.1.4 from the PRO file.

Technical considerations

The application was developed using the Qt Quick application wizard of Qt Creator. The main.qml file contains application views, and handles transitions between them. Each view is a separate QML file. Additional UI components are used throughout the application. AppStateVars.qml is a special component containing application state information.

Different target platforms

Even though QML is cross-platform, some visual adjustments are required for the various target platforms. These are defined in a special visual.qml file. The project file RssReader.pro exports the QML source files along with the correct visual.qml file, so that the resulting QML file set is suitable for the target platform.

Also some other QML files required differentiation between Symbian and MeeGo 1.2 Harmattan, because the Qt Quick Components Harmattan maturation is still ongoing at the time of writing this. Please note that in the future porting between the two platforms should be more straightforward, and not much differentiation should be needed as the Harmattan version of the Qt Quick Components reaches its final release stages.

The encountered​Symbian and​MeeGo Qt Quick Components differences during the implementation, and the solutions / work-arounds listed below:

• The RSSReader application has two different themes, "light" and "dark", and also the platform theme is being changed accordingly when selecting between the two themes. Now, platform theme selection is a bit different between the MeeGo Symbian platforms. MeeGo has just one context property (named theme.inverted), which will control the whole UI-wide Qt Quick Components, whereas the Symbian Qt Quick Components each have the platformInverted property separately.
  • In MeeGo, this is being differentiated so that changing the theme on simply changes the​theme.inverted value.
  • In Symbian, each of the utilized Qt Quick Component has its platformInverted property bound to app wide appState.isInverted property.
• ​Button element's implicit size behavior differs a bit. The width & height should be always defined on MeeGo.
• ​ToolButtons were changed to​ToolIcons on MeeGo, which are meant to show the platform's own "toolbar-back/settings/next" etc. icons.
  • ​ToolIcon has somewhat different properties, use !iconId property instead of the !iconSource property when using platform defined icons.
  • The Back button for exiting the application isn't being used on MeeGo, as it has its own swipe gesture for hiding/exiting the application.
• Originally the application was using the​Switch element, and​on MeeGo it doesn't have the clicked signal, which had to be variated.
  • Though in the current implementation the​Switch has been changed to a​ButtonRow + 2​Buttons.

Application data and storage

The application stores data in AccordionListModel (AccordionListModel.qml). It contains feed categories and the subscribed feeds in each category. The model is saved in permanent storage on exit, and restored on application start. AccordionListModel uses JavaScript in Store.js to store and restore content into local database storage. List model entries are easily converted to and from JSON strings, so the JSON format is used for saving the data.

In the discovery view (DiscoveryView.qml, DiscoveryViewModel.qml), new feeds can be subscribed to from a fixed set. These are defined in the local file discovery.xml, which is in​OPML format.

Network use

Network access is handled by XmlListModel. The feed view (FeedView.qml, FeedViewModel.qml) loads the selected feed items from the internet using XmlListModel.

Utilised​Qt Quick Components:

• ​StatusBar to provide information on the battery level, signal strength, and so on.
• ​ToolBar,​Pages,​PageStack, along with lots of .push()ing abd -pop()ing for navigating deeper and shallower within the application.
• ​ScrollDecorator for information about the current location of the view within a long list.
• ​Buttons,​ToolBarLayout, and​ToolButtons (with native look and feel).

Utilised​QML templates:

• ​Accordion List
• ​Persistent Model

Release downloads

ID	File	Description	Size	Uploaded	Dls	Uploader	Component	Version	Platform	Type
45	rssreader_1.5.0.zip	QMLRSSReader application sources.	2.3 MB	12 Apr 2012	69	VilluNikolaiV		1.5.0-QtQuick_Components	Project	Source
44	rssreadercomponents_1.5.0_armel.deb	QMLRSSReader application for N9 and other MeeGo / Harmattan devices. Utilises the Qt Quick Components.	615.3 KB	11 Apr 2012	36	VilluNikolaiV		1.5.0-QtQuick_Components	Harmattan	Binary
43	RssReaderComponents_1.5.0_installer.sis	QMLRSSReader application for Symbian devices. Utilises the Qt Quick Components.	480.7 KB	11 Apr 2012	81	VilluNikolaiV		1.5.0-QtQuick_Components	Symbian	Binary