×
Namespaces

Variants
Actions

Rotary Dialer: mixing Qt Quick components and custom UI

From Nokia Developer Wiki
Jump to: navigation, search

This article explains shows the main UI elements and design choices of the Rotary Dialer Symbian app, available on Nokia Store

Article Metadata
Code ExampleTested with
SDK: Qt SDK 1.2
Compatibility
Platform(s): Symbian^3
Article
Created: jappit (26 Mar 2012)
Last edited: hamishwillee (20 Apr 2012)

Contents

Introduction

Rotary Dialer is a little application that allows users to start phone calls via an old-fashioned, stylish rotary dialer telephone.

Wrt to qtquick rotarydialer main.png

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.

Wrt to qtquick rotarydialer toolbar.png

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

Wrt to qtquick rotarydialer viewmenu.png

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.

Wrt to qtquick rotarydialer about.png

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

Qtquick symbian rotarydialer customui.png

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.

Qtquick symbian rotarydialer icon.png

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.

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

This page was last modified on 20 April 2012, at 06:42.
66 page views in the last 30 days.