Diner Example Application

The Diner example application is based on the implementation of QMLRestaurantApp. Where QMLRestaurantApp utilised the UI templates from the​QMLTemplates project, the Diner app has been redesigned to use the official​Qt Quick Components for navigation and UI look&feel.

For the old implementation and design specifications of QMLRestaurantApp, see RestaurantAppWiki.

Design approach

With the updated design of the Diner application, the goal was to follow the latest​Symbian design guidelines and to use the recently released​Qt Quick Components for unified application navigation & UI look&feel and for portability between the Symbian and Harmattan/MeeGo platforms.

UI navigation

• The UI is based on​TabGroup. The bottom of the screen is populated with a​tool bar and upon clicking a tab button the content pane's contents change.
  • Originally, the navigation was based on the​TabBar element, but because that component is not supported in MeeGo 1.2 Harmattan, it was changed to ToolBar. Luckily, switching between the bottom bars is almost a straightforward find/replace.
• A​StatusBar is included at the top of the application to provide information on the battery level, signal strength, and so on.
• The main menu grid view provides a drill-down detail view for each of the menu categories. It also uses​PageStack for navigating deeper into the application's subpages. PageStack also provides automatic transitions when switching between the views.
• The detailed menu view provides Back button navigation for returning to the main tab bar level. The Back button is also used for exiting the application when the user is at the top level of the application.

What is included

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

Technical considerations

The application was created using the QtQuick application wizard of QtCreator. 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 different target platforms. These are defined in a special visual.qml file. The project file Diner.pro exports the QML source files along with the correct visual.qml so that the resulting QML file set is suitable for the current 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 theme in MeeGo platform is by default different from Symbian platforms. I.e. MeeGo uses the "light" theme by default where the Symbian is using the "dark" theme.
  • The MeeGo implementation is simply set to use the inverted theme also by default. Done with setting the context property theme.inverted to true.
• Button Element's implicit size behavior differs a bit. The width & height should be always defined on MeeGo.
• The application was initially implemented with TabButtons & TabBar elements, but the TabBar is completely missing from MeeGo platform.
  • Implementation was changed to use the ToolBar instead of the TabBar. These two are pretty much inter-exchangeable, and the implementation was quite straightforward.
• ToolButtons were changed to ToolIcons on MeeGo, which are meant to show the platform's own "toolbar-back/settings/next" etc. icons.
  • ToolIcon has a bit 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.
• Some pre-defined font sizes exist in the Qt Quick Components Symbian package (e.g. !platformStyle.fontSizeMedium), but unfortunately those are not defined in MeeGo as well.
  • So instead of using the !platformStyle font size definitions, the font (pixel) sizes are being separately defined in the project's platform variation file, Visual.qml.

Application data and storage

The application data is stored in an XML file which can be easily changed to another restaurant's menu. The file is currently local, but it can be fetched over the network simply by changing the 'source' property of InfoModel (and of course taking loading times and such into consideration). The​QML RSS Reader demonstrates network transparency with XmlListModel, so that project can be used as an example for doing this.

The Diner app also demonstrates appending and using reservations data in ListModel (ReservationsModel.qml). It also shows how to store/restore that data into/from an SQL database by using the JSON format when saving/loading ListModel entries.

Network usage

Currently, the Diner application only uses the network for launching the device browser and opening the restaurant's website from InfoView. However, as described above, one could use the network, for example, for downloading the latest Diner menu XML from the web. Also, it is possible to modify OviMapTile.qml to fetch the real map tile over the network. There are already functions implemented for this purpose, so changing the map tiles to be fetched over the network should be doable just by taking those functions into use.

If you modify the application so that it uses networking extensively instead of local data, remember to add an indication to the user that something time-consuming is happening. One possibility would be to use the​BusyIndicator from the Qt Quick Components.

Map view

As Qt Mobility 1.2 was not available when this application was created, the map view is implemented with the Ovi Maps Tile Rendering API. This demo uses only local data, so the network-based Ovi Maps tiles are commented out. Instead, the tiles are downloaded and bundled in the content directory according to zoom level. The model XML describes which zoom levels are available for the map tile component, which then knows to use those from the content directory. The address box can also be zoomed in, so it can easily be shown to, for example, a taxi driver.

Local storage

All the data in the application is provided as an XML file and related icon graphics. This enables that the content can be changed by simply modifying the XML model data and icons.

Utilised​Qt Quick Components:

• ​ToolBar for navigation (one could also use the​TabBar on Symbian)
• ​TabButtons and​TabGroup, used to switch between the views
• ​ToolBarLayouts,​ToolButtons, and​ButtonRows (for grouping) are used to provide intuitive navigation and a native look and feel.
• ​Page and​PageStack. Handy with ToolBar/TabBar navigation, provides neat automation (for instance, changing the ToolBar)
• ​Buttons, of course
• ​Dialogs
• ​Slider

The Qt Quick ​Extras Components used:

• ​DatePickerDialog
• ​TimePickerDialog

Used​QML templates:

• ​Persistent Model

Release downloads

ID	File	Description	Size	Uploaded	Dls	Uploader	Component	Version	Platform	Type
33	diner_1.5.0.zip	Diner application sources.	7.2 MB	21 Dec 2011	1990	VilluNikolaiV		1.5.0-QtQuick_Components	Project	Source
32	diner_1.5.0_armel.deb	Diner application for N9 and other MeeGo/Harmattan? devices. Utilizes the Qt Quick Components.	4.0 MB	21 Dec 2011	149	VilluNikolaiV		1.5.0-QtQuick_Components	Harmattan	Binary
31	Diner_1.5.0_installer.sis	Diner application for Symbian devices. Utilizes the Qt Quick Components.	4.0 MB	21 Dec 2011	211	VilluNikolaiV		1.5.0-QtQuick_Components	Symbian	Binary