Porting QML Diner to Windows Phone

Changes to design

When examining QML Diner app, it is apparent that straight-forward porting of the look and feel to the Windows Phone environment is not sensible. The QML version features a vivid color theme that is against Windows Phone design guidelines. Also, the navigation model of the QML version is based on using a tab bar control for which no direct equivalent is available in Windows Phone. Therefore a decision was made not to attempt to port the look and feel of the application to Windows Phone. Instead, a new application theme more close to other Windows Phone applications was designed, and a new navigation model based on panorama control was introduced. The porting aspect of the project was not centered on look and feel but on the features of the application.

The look and feel of panorama-based applications is dominated by the background image of the panorama. For this reason, special attention was given to the selection of the background image. To be in accordance with the dark default theme of Windows Phone, a relatively dark, warm-colored, and restaurant-themed image was selected. A white text color was selected for the application, also because of the dark theme of Windows Phone. This selection of a dark background image and overall theme means that the default platform theme is overridden: even if the user is using a light Windows Phone theme, Diner app still features a dark theme.

As a smaller detail, orientation switching is a major design goal in the QML application. In the Windows Phone environment, orientation switching is recommended to be used only in views that require user input while the user's device is equipped with a physical keyboard. For this reason, the Windows Phone version of the application is locked to portrait mode in all views except for the view for making reservations.

Porting the user interface

The Windows Phone version introduces the use of panorama-based navigation instead of using a tab bar. The main views in the QML application (accessible through push buttons in the Qt Quick Toolbar) are now panorama views which the user can access by swiping left or right.

Image 1. Comparing the main screens and navigation

The categories of the restaurant menu are shown in a pivot control. This also provides an enhancement compared to the QML version: users can switch between categories by swiping left or right whereas in the QML version users must return to the À la carte view if they want to view a different category.

Image 2. Comparing the à la carte views

Image 3. Comparing the menu list views

Another deviation from the QML version of the application is the handling of reservations. In the QML version, the reservation creation is started from the 'Information' view and this is where the created reservations are also shown (with a button to cancel the reservation). The Windows Phone version uses a panorama instead of a tab bar, and as guidelines state that the panorama views should not include user input elements, a different approach was needed for Windows Phone. Created reservations are shown using a listbox in a panorama view and the user is able to cancel reservations by long-tapping the reservation in the listbox.

Image 4. Comparing making reservations

In both applications, a dedicated view for entering the details of the new reservation is launched through the button. The actual views are quite similar subtask views with basic input elements and Done and Cancel buttons at the bottom of the view.

Image 5. New reservation view

The QML version of the application features an embedded map within its own tabbed view, whereas in Windows Phone 7 a button is required for navigating to a full screen map view in order to utilise the map component provided by the platform. Both versions use a fullscreen map view in order to maximally utilise the screen real estate.

Image 6. Comparing the location views

Porting the application data

QML Restaurant App has two sources of application data: an XML file that is read for restaurant details, and SQL for reading and writing reservations from/to disk (in JSON format).

The general approach to this application does not require changes for Windows Phone: restaurant details and reservations should and can be saved separately. However, Windows Phone offers extensive frameworks for both parsing and generating XML-formatted data. Loading and storing reservations from/to disk in XML format requires less code than using SQL+JSON. Therefore, in Windows Phone version the XML format is used for both restaurant details and reservations.