×
Namespaces

Variants
Actions

Porting the Italian Teletext app from WRT to Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search

This article explains the main steps and guidelines followed to port the Italian Teletext app from the original WRT version to Qt using Symbian Qt Quick components

Article Metadata
Code Example
Installation file: TeletextItaly.sis
Tested with
SDK: Qt SDK 1.2
Compatibility
Platform(s): Symbian^3
Symbian
Platform Security
Signing Required: Self-Signed
Article
Created: jappit (26 Mar 2012)
Last edited: hamishwillee (02 May 2012)

Contents

Introduction

Teletext Italy is a Web Runtime application that allows users to easily browse the Italian teletext pages. This article will highlight the main design and implementation choices made to port the app to Qt Quick.

Wrt to qtquick teletextitaly main.png

Porting the UI

The Teletext app is mainly a single-page app, presenting all the necessary information in one screen.

The toolbar

While the WRT version placed buttons on the app header, the Qt Quick UI is redesigned in order to place the more relevant actions' buttons in the page's ToolBar. Following the Symbian Design Guidelines, the left button is used to exit the app, and the right one to open a menu with extra options. The center buttons are used to allow the user to manually enter a page number or to reload the currently displayed page.

Wrt to qtquick teletextitaly toolbar.png

Navigation buttons

The WRT version implemented a buttom toolbar, placed just above the softkeys, with four buttons that allow user to navigate pages and subpages. This custom component is easily ported to Qt Quick by using the ButtonRow component together with four Buttons.

Wrt to qtquick teletextitaly navigationbuttons.png

ButtonRow {
exclusive: false
Button {
iconSource: "images/page_prev.png"
onClicked: switchPage(-1)
}
Button {
iconSource: "images/subpage_prev.png"
onClicked: switchSubpage(-1)
}
Button {
iconSource: "images/subpage_next.png"
onClicked: switchSubpage(1)
}
Button {
iconSource: "images/page_next.png"
onClicked: switchPage(1)
}
}

Page selection dialog

While the WRT app implemented the page selection dialog with a custom view, Qt Quick components offer the ready-to-use CommonDialog component that can be used to build dialogs with platform-style title area and custom content.

Wrt to qtquick teletextitaly pagenumberdialog.png

A TextField is used to allow the user to enter the page number. To improve user experience, the inputMethodHints: Qt.ImhDigitsOnly attribute is used, to present the user with the numeric keyboard, so that the number input is faster and easier.

TextField {
id: pageNumberField
anchors.centerIn: parent
maximumLength: 3
inputMethodHints: Qt.ImhDigitsOnly
inputMask: "000"
}

A ToolButton is placed in the page ToolBar to allow the user to open the page number dialog.

ToolButton {
flat: true
iconSource: "toolbar-dialer"
onClicked: numberKeypadClicked()
}

The JavaScript numerKeypadClicked() opens the dialog, focuses the text field, and forces the virtual keyboard to appear, so that the user must not manually touch the text field to activate that. All these operations are implemented with the following code, and area geared at improving the overall user experience.

function numberKeypadClicked()
{
pageNumberDialog.open();
 
pageNumberField.forceActiveFocus();
 
pageNumberField.openSoftwareInputPanel();
 
}

Region selection

The WRT version used the HTML <SELECT> element to implement the region selection dialog, allowing the user to pick one of the available regional teletext editions.

Wrt to qtquick teletextitaly regionselection.png

Porting this element to Qt Quick is straightforward thanks to the SelectionDialog component, that is used as shown below.

SelectionDialog {
id: regionDialog
titleText: qsTr("Select a region")
model: regionModel
onAccepted: {
_region = _regionIds[selectedIndex]
loadHomePage()
}
}

Landscape support

Following the Symbian Design Guidelines, the app supports landscape mode, nicely repositioning its UI elements in order to provide an optimal user experience.

Wrt to qtquick teletextitaly landscape.png

Since vertical space is smaller in landscape mode, the following UI changes are performed:

  • the ad unit is hidden, since it would take up too much space, leaving little room for the relevant UI elements (mainly, the teletext page itself)
  • for the page-navigation Buttons, a ButtonColumn is used in place of the ButtonRow used in portrait mode. The ButtonColumn is placed on the right side of the screen, so that the maximum available space is left free for the teletext page
  • the teletext page image is zoomed up, allowing the user to scroll it up and down

From softkeys to toolbar menu

The original WRT version used softkeys to present the user with some additional options. Since softkeys are removed in the Nokia Belle user interface paradigm, those options are then moved to the menu that is opened via the toolbar "view menu" button, placed on the right of the toolbar.

Wrt to qtquick teletextitaly viewmenu.png

App Icon

The app icon is redesigned to match the new Nokia Belle style, as visible below.

Wrt to qtquick teletextitaly icon.png

Adding new features

Thanks to the usage of Qt, many new useful features can be implemented in the new version. This section shows how some of those new features are implemented.

In-App Advertising

Thanks to the recently released InnerActive's QML SDK, integrating In-App Advertising in the app is quick and easy.

Wrt to qtquick teletextitaly advertising.png

To show ads within the app, it is enough to use and place a QML AdItem element, as shown below, specifying the App ID provided by InnerActive.

AdItem {
id: adItem
parameters: AdParameters {
applicationId: "My_Application_Id"
}
 
anchors.horizontalCenter: parent.horizontalCenter
}

Pinch-zooming

Qt Quick allows to easily implement the pinch-to-zoom feature by using the PinchArea element together with the Flickable element, so that the user can freely navigate the zoomed-up page. The main implementation code is shown below.

Wrt to qtquick teletextitaly pinchtozoom.png

Flickable {
id: flick
anchors.fill: parent
contentWidth: width
contentHeight: height
 
PinchArea {
width: Math.max(flick.contentWidth, flick.width)
height: Math.max(flick.contentHeight, flick.height)
 
property real initialWidth
property real initialHeight
onPinchStarted: {
initialWidth = flick.contentWidth
initialHeight = flick.contentHeight
}
 
onPinchUpdated: {
flick.contentX += pinch.previousCenter.x - pinch.center.x
flick.contentY += pinch.previousCenter.y - pinch.center.y
flick.resizeContent(Math.max(flick.width, initialWidth * pinch.scale), Math.max(flick.height, initialHeight * pinch.scale), pinch.center)
}
 
onPinchFinished: {
flick.returnToBounds()
}
}
Item {
id: pageImageContainer
width: flick.contentWidth
height: flick.contentHeight
}
}


Save teletext page

The user is given the possibility to save a teletext page to the device gallery.

Wrt to qtquick teletextitaly savepageimage.png

The UI uses the ContextMenu Qt Quick component to show a menu just above the teletext page.

ContextMenu {
id: pageContextMenu
 
MenuLayout {
MenuItem {
text: qsTr("Save in gallery")
onClicked: savePageImage()
}
[ ... ]
}
}

The context menu is opened when the user long-presses the teletext page, feature implemented with the code snippet below.

Item {
id: pageImageContainer
width: flick.contentWidth
height: flick.contentHeight
 
[...]
 
MouseArea {
anchors.fill: parent
onPressAndHold: pageContextMenu.open()
}
}

Favorites management

The app allows the user to save and manage his favorite teletext pages, so that he can easily browse those. While the core functionality is implemented using the SQLite support provided by Qt Quick, the UI uses a second Page element used to display the favorites section.

Wrt to qtquick teletextitaly favorites.png

This page is implemented by using the ListItem and ListHeading Qt Quick components to populate a standard QML ListView element. Following the Symbian Design Guidelines, the page header scroll together with the content, so leaving up the maximum available space for the content.

Long-pressing an item in the favorites list shows a ContextMenu that allows the user to remove a page from the favorites.

Download

A self-signed version of the Qt Quick porting can be downloaded here: TeletextItaly.sis.

Summary

The benefits of porting the Teletext app from WRT to Qt Quick range from UI to functionality, and include:

  • a UI style more coherent and integrated with the device UI
  • access to more functionality, that allow to build and integrate new features in the app
  • a smoother, more responsive user interface
  • a fast and easy porting process

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

This page was last modified on 2 May 2012, at 05:33.
80 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.

×