×
Namespaces

Variants
Actions
(Difference between revisions)

Porting the Premier League app from WRT to Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search
jappit (Talk | contribs)
(Jappit - Added screenshot of the menu opened via the "View menu" toolbar button)
hamishwillee (Talk | contribs)
m (Hamishwillee - Add platform category - not MeeGo as has Symbain QCC dependency)
 
(13 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Qt Quick]][[Category:Symbian Web Runtime]]
+
[[Category:Qt Quick]][[Category:Symbian Web Runtime]][[Category:Porting]][[Category:UI]][[Category:Symbian]]
{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}
+
{{FeaturedArticle|timestamp=20120422}}
 
+
 
{{Abstract|This article shows the main guidelines used to port a Symbian application from WRT to Qt, by using Qt Quick and Qt Quick Components}}
 
{{Abstract|This article shows the main guidelines used to port a Symbian application from WRT to Qt, by using Qt Quick and Qt Quick Components}}
  
''Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use''
 
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
|installfile= http://www.jappit.com/m/qt/premierleague/PremierLeague.sis
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= [http://store.ovi.com/content/271187 http://store.ovi.com/content/271187]
 
|devices= Nokia Belle
 
|devices= Nokia Belle
 
|sdk= Qt SDK 1.2
 
|sdk= Qt SDK 1.2
 
|platform= Symbian^3
 
|platform= Symbian^3
 
|devicecompatability= Nokia Belle OS
 
|devicecompatability= Nokia Belle OS
|signing=Self-Signed
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|capabilities=NetworkServices
+
|signing= Self-Signed
 +
|capabilities= NetworkServices
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate=20120308
+
|creationdate= 20120308
|author=[[User:jappit]]
+
|author= [[User:jappit]]
 
}}
 
}}
  
Line 29: Line 30:
 
Porting applications from other technologies to Qt is a task that can be achieved by following some definite style and functionality guidelines. By using the Qt Quick Components, the porting process can be speeded up, thanks to the reusable components that offer ready-to-use functionality for several use cases and patterns.
 
Porting applications from other technologies to Qt is a task that can be achieved by following some definite style and functionality guidelines. By using the Qt Quick Components, the porting process can be speeded up, thanks to the reusable components that offer ready-to-use functionality for several use cases and patterns.
  
[[File:Wrt_to_qtquick_premierleague_results.png]]
+
[[File:Wrt to qtquick premierleague results.png]]
  
 
This article highlights some of the steps and considerations done while porting the Premier League app, available on the Nokia Store (http://store.ovi.com/content/66117), from Web Runtime to Qt Quick.
 
This article highlights some of the steps and considerations done while porting the Premier League app, available on the Nokia Store (http://store.ovi.com/content/66117), from Web Runtime to Qt Quick.
Line 50: Line 51:
 
* the tab bar
 
* the tab bar
  
[[File:Wrt_to_qtquick_premierleague_main_ui.png]]
+
[[File:Wrt to qtquick premierleague main ui.png]]
  
 
The following sub-sections show how each of these elements are ported to Qt Quick by following the design guidelines.
 
The following sub-sections show how each of these elements are ported to Qt Quick by following the design guidelines.
Line 70: Line 71:
 
=== The header ===
 
=== The header ===
  
The design guidelines give clear indications about [http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/#!common-pitfalls.html;#toc_Headers the usage of headers in Symbian Belle apps]:
+
The design guidelines give clear indications about [http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/#!common-pitfalls.html;#toc_Headers the usage of headers in Nokia Belle apps]:
 
* in an app without tabs, a header can be used, and it should scroll together with the content
 
* in an app without tabs, a header can be used, and it should scroll together with the content
 
* in app with tabs, as the Premier League app is, header must not be used - the tab themselves must give enough indication about the content
 
* in app with tabs, as the Premier League app is, header must not be used - the tab themselves must give enough indication about the content
Line 88: Line 89:
 
The other actions, that are less frequently used, are placed in a [http://doc.qt.nokia.com/qt-components-symbian/qml-menu.html Menu] that is opened via the "View Menu" button placed on the toolbar.
 
The other actions, that are less frequently used, are placed in a [http://doc.qt.nokia.com/qt-components-symbian/qml-menu.html Menu] that is opened via the "View Menu" button placed on the toolbar.
  
<gallery>
+
[[File:Wrt to qtquick premierleague menu.png|frame|none|The Menu]]
File:Wrt_to_qtquick_premierleague_menu.png|The Menu
+
</gallery>
+
  
 
=== The Inverted Style ===
 
=== The Inverted Style ===
Line 96: Line 95:
 
Many Qt Quick components provide a [http://doc.qt.nokia.com/qtquick-components-symbian-1.1/qml-window.html#platformInverted-prop platformInverted] property that can be used to change their graphic style, including the used color scheme. Given the color scheme of the app, that mainly uses light background colors, using the inverted style results in a better overall UI effect, as shown in the picture below.
 
Many Qt Quick components provide a [http://doc.qt.nokia.com/qtquick-components-symbian-1.1/qml-window.html#platformInverted-prop platformInverted] property that can be used to change their graphic style, including the used color scheme. Given the color scheme of the app, that mainly uses light background colors, using the inverted style results in a better overall UI effect, as shown in the picture below.
  
[[File:Wrt_to_qtquick_premierleague_invertedstyle.png]]
+
[[File:Wrt to qtquick premierleague invertedstyle.png]]
  
 
More info about the inverted style is available [http://doc.qt.nokia.com/qtquick-components-symbian-1.1/inverted-style.html here].
 
More info about the inverted style is available [http://doc.qt.nokia.com/qtquick-components-symbian-1.1/inverted-style.html here].
Line 104: Line 103:
 
The overall UI of the Qt Quick version, with the above considerations, is shown below:
 
The overall UI of the Qt Quick version, with the above considerations, is shown below:
  
[[File:Wrt_to_qtquick_premierleague_main_ui_qt.png]]
+
[[File:Wrt to qtquick premierleague main ui qt.png]]
  
 
== Porting the app views ==
 
== Porting the app views ==
Line 125: Line 124:
 
Qt Quick components are instead used to create the matchday selection menu, that was implemented with a standard HTML '''SELECT''' element in the WRT version: specifically, the [http://doc.qt.nokia.com/qt-components-symbian/qml-selectiondialog.html SelectionDialog component] provides all the necessary functionality to present the user with the list of available matchdays, allowing him to pick the one he desire. The SelectionDialog is opened through a custom item placed just above the match list, as in the original WRT version.
 
Qt Quick components are instead used to create the matchday selection menu, that was implemented with a standard HTML '''SELECT''' element in the WRT version: specifically, the [http://doc.qt.nokia.com/qt-components-symbian/qml-selectiondialog.html SelectionDialog component] provides all the necessary functionality to present the user with the list of available matchdays, allowing him to pick the one he desire. The SelectionDialog is opened through a custom item placed just above the match list, as in the original WRT version.
  
[[File:Wrt_to_qtquick_premierleague_matchdays.png]]
+
[[File:Wrt to qtquick premierleague matchdays.png]]
  
 
=== The Match view ===
 
=== The Match view ===
Line 131: Line 130:
 
By pressing on a match in the Results view, the user is brought to the Match view, containing the main match data: team names and scores, scorers and lineups with substitutions/cards details. To maximize the readability, all the content scrolls so that space is occupied by fixed UI elements.
 
By pressing on a match in the Results view, the user is brought to the Match view, containing the main match data: team names and scores, scorers and lineups with substitutions/cards details. To maximize the readability, all the content scrolls so that space is occupied by fixed UI elements.
  
[[File:Wrt_to_qtquick_premierleague_match.png]]
+
[[File:Wrt to qtquick premierleague match.png]]
  
 
Given the specific needs of the UI, the whole view is built by using custom QML elements.
 
Given the specific needs of the UI, the whole view is built by using custom QML elements.
Line 139: Line 138:
 
The Standings and Scorers view are structurally identical, presenting the user with a list of teams/players together with their points/scored goals. Here no Qt Quick components are used: custom QML elements are instead created to better maintain the original look-and-feel of the app.
 
The Standings and Scorers view are structurally identical, presenting the user with a list of teams/players together with their points/scored goals. Here no Qt Quick components are used: custom QML elements are instead created to better maintain the original look-and-feel of the app.
  
<gallery>
+
<gallery widths=600px heights=390px>
 
File:Wrt_to_qtquick_premierleague_table.png|The standings view
 
File:Wrt_to_qtquick_premierleague_table.png|The standings view
 
File:Wrt_to_qtquick_premierleague_scorers.png|The scorers view
 
File:Wrt_to_qtquick_premierleague_scorers.png|The scorers view
 
</gallery>
 
</gallery>
  
The table headers, containing the labels indicating the standing content, scroll together with the content itself, so that the space used to display data is maximied.
+
The table headers, containing the labels indicating the standing content, scroll together with the content itself, so that the space used to display data is maximized.
 +
 
 +
== Icon design ==
 +
 
 +
Following the [http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/#!iconography-guidelines/launcher-icon-basics.html design guidelines for the launcher icons], the app icon is redesigned using the [http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/#!iconography-guidelines/launcher-icon-basics/ai-launcher-template-1.html Adobe Illustrator template]. The resulting icon is shown below.
 +
 
 +
[[File:Wrt to qtquick premierleague icon.png]]
  
 
== Porting functionality ==
 
== Porting functionality ==
Line 151: Line 156:
 
* '''networking''': the XMLHttpRequest object is available in both the WRT and Qt Quick environments, so it was used to perform network requests in both cases
 
* '''networking''': the XMLHttpRequest object is available in both the WRT and Qt Quick environments, so it was used to perform network requests in both cases
 
* '''data handling''': the same JavaScript data structures are used to hold and manage the data, so no modifications were needed on this side
 
* '''data handling''': the same JavaScript data structures are used to hold and manage the data, so no modifications were needed on this side
 +
 +
=== View management ===
 +
 +
While the WRT version implemented a custom view management logic using JavaScript, basically showing and hiding '''DIV''' elements representing the different views, the Qt Quick version uses the [http://doc.qt.nokia.com/qt-components-symbian/qml-pagestack.html PageStack component], that implements and provides a complete stack-based navigation model.
  
 
== Final considerations ==
 
== Final considerations ==
Line 163: Line 172:
 
== Download ==
 
== Download ==
  
The Qt version of the Premier League app is available for download here: [http://www.jappit.com/m/qt/premierleague/PremierLeague.sis PremierLeague.sis] (as soon as the new version will be approved on the Nokia Store the link will be updated).
+
The Qt version of The Football App, built following the guidelines described in this article, is available for download here: http://store.ovi.com/content/271187.
 +
 
 +
{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}

Latest revision as of 08:26, 2 May 2012

Featured Article
22 Apr
2012

This article shows the main guidelines used to port a Symbian application from WRT to Qt, by using Qt Quick and Qt Quick Components

Article Metadata
Code ExampleTested with
SDK: Qt SDK 1.2
Devices(s): Nokia Belle
Compatibility
Platform(s): Symbian^3
Symbian
Device(s): Nokia Belle OS
Platform Security
Signing Required: Self-Signed
Capabilities: NetworkServices
Article
Created: jappit (08 Mar 2012)
Last edited: hamishwillee (02 May 2012)

Contents

[edit] Introduction

Porting applications from other technologies to Qt is a task that can be achieved by following some definite style and functionality guidelines. By using the Qt Quick Components, the porting process can be speeded up, thanks to the reusable components that offer ready-to-use functionality for several use cases and patterns.

Wrt to qtquick premierleague results.png

This article highlights some of the steps and considerations done while porting the Premier League app, available on the Nokia Store (http://store.ovi.com/content/66117), from Web Runtime to Qt Quick.

[edit] UI porting

The porting process was performed with two main focuses:

To put into practice that, the UI porting process involved two different kinds of activity:

  • replacing some HTML components with Qt Quick components
  • building some QML components from scratch, when suitable Qt Quick components were not available

[edit] Porting the main UI structure

Three main UI elements characterize the overall user interface of the WRT app:

  • the header, containing the app name and a reload button
  • the softkeys bar
  • the tab bar

Wrt to qtquick premierleague main ui.png

The following sub-sections show how each of these elements are ported to Qt Quick by following the design guidelines.

[edit] The tab bar

The app uses three different tabs to allow users to browse the different available data:

  • Results
  • Teams standings
  • Scorers standings

The tab bar, in the WRT version, is positioned in the lower area of the screen, just above the softkeys.

Porting this component to Qt Quick is quite straightforward:

  • the TabBar component provides all the needed functionality, so it is used
  • by following the Design Guidelines for the Tab Bar component, the tab bar is repositioned in the upper area of the screen
  • while in the WRT version the tabs only show a label, the Qt Quick version will use a combination of an icon and a label for each tab, as stated in the mentioned guidelines

[edit] The header

The design guidelines give clear indications about the usage of headers in Nokia Belle apps:

  • in an app without tabs, a header can be used, and it should scroll together with the content
  • in app with tabs, as the Premier League app is, header must not be used - the tab themselves must give enough indication about the content

For this reason, the WRT header is totally removed in the Qt Quick version. The reload button, originally placed in the header bar, will be repositioned in the toolbar, as shown in the following section.

[edit] The softkeys

Classical softkeys in the Nokia Belle user interface style were replaced by a common toolbar, placed at the bottom of the screen, and containing buttons for the various available actions.

Converting the softkeys of the WRT version to the Qt Quick toolbar involves these steps:

  • the Toolbar component is used
  • the back button is placed on the left side of the toolbar, as stated in the guidelines for the Toolbar component
  • the rest of the toolbar is used as follows: the important actions are displayed as Tool buttons on the toolbar, while the less important ones are placed in a menu by using the View menu button, placed on the right side of the toolbar

In the Premier League app, the important action that the user could perform in every section of the app is the "refresh content", that reloads the data he is currently viewing. So, the reload button originally placed in the header bar is now placed in the toolbar by using the ToolButton component. The other actions, that are less frequently used, are placed in a Menu that is opened via the "View Menu" button placed on the toolbar.

The Menu

[edit] The Inverted Style

Many Qt Quick components provide a platformInverted property that can be used to change their graphic style, including the used color scheme. Given the color scheme of the app, that mainly uses light background colors, using the inverted style results in a better overall UI effect, as shown in the picture below.

Wrt to qtquick premierleague invertedstyle.png

More info about the inverted style is available here.

[edit] The overall ported UI

The overall UI of the Qt Quick version, with the above considerations, is shown below:

Wrt to qtquick premierleague main ui qt.png

[edit] Porting the app views

The app contains three main views, accessible via the main tabs:

  • a Results view, containing the list of available matches for the selected matchday
  • a Table view, showing the team standings
  • a Scorers view, showing the top scorers standings

The other important view, accessible through the Results view, is the Match view, that allows users to see all the details of a single match, as scorers and lineups.

[edit] The Results view

The Results view shows a scrollable list of matches, and a selection item that allows the user to change the selected matchday.

While trying to maintain the original look-and-feel of the app, the color scheme is changed to better integrate in the default design of the Qt Quick components.

The match list is composed of a standard QML ListView element with custom Item elements used as delegates for the headers and items. Custom items are chosen against the ListItem and ListHeading components, provided by the Qt Quick components, to re-build the UI style of the original WRT app.

Qt Quick components are instead used to create the matchday selection menu, that was implemented with a standard HTML SELECT element in the WRT version: specifically, the SelectionDialog component provides all the necessary functionality to present the user with the list of available matchdays, allowing him to pick the one he desire. The SelectionDialog is opened through a custom item placed just above the match list, as in the original WRT version.

Wrt to qtquick premierleague matchdays.png

[edit] The Match view

By pressing on a match in the Results view, the user is brought to the Match view, containing the main match data: team names and scores, scorers and lineups with substitutions/cards details. To maximize the readability, all the content scrolls so that space is occupied by fixed UI elements.

Wrt to qtquick premierleague match.png

Given the specific needs of the UI, the whole view is built by using custom QML elements.

[edit] The Standings and Scorers views

The Standings and Scorers view are structurally identical, presenting the user with a list of teams/players together with their points/scored goals. Here no Qt Quick components are used: custom QML elements are instead created to better maintain the original look-and-feel of the app.

The table headers, containing the labels indicating the standing content, scroll together with the content itself, so that the space used to display data is maximized.

[edit] Icon design

Following the design guidelines for the launcher icons, the app icon is redesigned using the Adobe Illustrator template. The resulting icon is shown below.

Wrt to qtquick premierleague icon.png

[edit] Porting functionality

The original app was built with Web Runtime, so functionality was written in the JavaScript language. Since JavaScript is also available in the Qt Quick environment, much of the app logic can be brought to Qt Quick with a little effort. Examples of functionality easily ported include:

  • networking: the XMLHttpRequest object is available in both the WRT and Qt Quick environments, so it was used to perform network requests in both cases
  • data handling: the same JavaScript data structures are used to hold and manage the data, so no modifications were needed on this side

[edit] View management

While the WRT version implemented a custom view management logic using JavaScript, basically showing and hiding DIV elements representing the different views, the Qt Quick version uses the PageStack component, that implements and provides a complete stack-based navigation model.

[edit] Final considerations

The porting process for the Premier League app was easy for various reasons, including the availability of Qt Quick components and the similarities among the WRT and Qt Quick environments.

Among the advantages of porting an application to Qt Quick, these can be mentioned:

  • compliance to the Symbian Design Guidelines, so definitely a better integration of the app in the overall device UI style
  • better performances that bring an overall better and smoother user experience to the user
  • more possibilities: having access to all the device functionality, thanks to Qt, allows to build more powerful and useful apps

[edit] Download

The Qt version of The Football App, built following the guidelines described in this article, is available for download here: http://store.ovi.com/content/271187.

Note.pngNote: This is an entry in the Symbian Qt Quick Components Competition 2012Q1

This page was last modified on 2 May 2012, at 08:26.
99 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×