Rotary Dialer: mixing Qt Quick components and custom UI
This article explains shows the main UI elements and design choices of the Rotary Dialer Symbian app, available on Nokia Store
Article Metadata
Code Example
Tested with
Compatibility
Article
Contents |
Introduction
Rotary Dialer is a little application that allows users to start phone calls via an old-fashioned, stylish rotary dialer telephone.
The app UI mixes the standard Qt Quick components with custom QML elements.
Standard Qt Quick components
The PageStackWindow and Page components are used for the base structure of the app.
Within the app's main Page, that contains the rotary dialer UI, a standard ToolBar with four ToolButtons are used. The standard Exit and View menu buttons are placed respectively on the left and right side of the toolbar, while the center buttons allow the user to start a phone call and to clear the dialed digits.
ToolBarLayout {
id: phoneTools
visible: true
ToolButton { iconSource: "toolbar-back"; onClicked: Qt.quit()}
ToolButton { iconSource: "pics/icon-call.png"; onClicked: startCall() }
ToolButton { iconSource: "toolbar-delete"; onClicked: clearDigits()}
ToolButton { iconSource: "toolbar-menu"; onClicked: mainMenu.open()}
}
The View menu ToolButton allows to open a menu with extra options, and more specifically:
- turn on/turn off the rotary dialer audio feedback
- show the about dialog
- browse more apps on Nokia Store
The above menu is implemented as follows:
Menu {
id: mainMenu
content: MenuLayout {
MenuItem {
text: volumeOn ? "Turn off audio" : "Turn on audio"
onClicked: switchVolume()
}
MenuItem {
text: "About"
onClicked: aboutDialog.open()
}
MenuItem {
text: "More apps"
onClicked: Qt.openUrlExternally("http://store.ovi.mobi/publisher/Jappit/");
}
}
}
The about dialog is implemented through a standard QueryDialog component, as shown below.
QueryDialog {
id: aboutDialog
titleText: "Rotary Dialer"
message: "Realized by Jappit\nVersion 1.0.0\n"
acceptButtonText: "OK"
onAccepted: aboutDialog.accept()
}
Custom UI elements
The rotary dialer interface is divided into two main sections:
- the main rotary element, that the user can rotate with his finger
- the digits display, showing the numbers dialed by the user
The custom UI is mainly built by using Image and Item elements.
Feedback effects
The QML SoundEffect element, from the Multimedia API of Qt Mobility, is used to add audio feedback to the rotary dialer, reproducing the standard rotary audio sound.
In order to add even more realism to the dialer, the HapticsEffect element from the Feedback API is used to add vibration feedback while the dialer rotates.
Custom font
In order to better reproduce the style of a real rotary dialer, a custom font is used for the digits display. The custom font is integrated and loaded via the standard FontLoader QML element.
FontLoader {
id: localFont;
source: "myFont.ttf"
}
Text {
id: dialerDisplay
font.pixelSize: 45
color: "white"
elide: Text.ElideLeft
font.family: localFont.name
}
App Icon
The app icon is designed to match the Symbian Design Guidelines and to give a clear indication of the app functionality, by representing a small and stylized rotary dialer in the typical Belle icon style.
Download
The Rotary Dialer app can be downloaded for free on Nokia Store: Rotary Dialer.
Summary
While offering a comprehensive set of ready-to-use UI elements, the Symbian Qt Quick components allow to easily mix both standard and custom elements, in order to design and build user interfaces that can suit the most different needs.
Among the many benefits of using the Symbian Qt Quick components, it is worth to mention the ease of deployment towards different platforms.
The Rotary Dialer app, with few modifications mainly due to the call-management code, was also published for MeeGo devices: the Nokia N9/N950 version can be downloaded here.
(no comments yet)