×
Namespaces

Variants
Actions

Building the Italian Tax ID app with Qt Quick components

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how the Italian Tax ID app was designed and built by using Qt Quick components for Symbian.

Article Metadata
Code Example
Installation file: CodiceFiscale.sis
Tested with
SDK: Qt SDK 1.2
Devices(s): Nokia Belle devices
Compatibility
Platform(s): Nokia Belle
Platform Security
Signing Required: Self-Signed
Article
Created: jappit (26 Mar 2012)
Last edited: hamishwillee (20 Apr 2012)

Contents

Introduction

Italian Tax ID is an app that allows users to calculate their Italian Tax ID code, also known as "Codice Fiscale". This article highlights the main design and implementation choices made during the creation of this app.

Qtquick symbian italiantaxid main.png

The Italian Tax ID is calculated starting from various personal data, and more specifically:

  • First name
  • Last name
  • Gender
  • Date of birth
  • Place of birth (city of birth for persons born in Italy, country of births elsewhere)

Main Page

The Italian Tax ID app allows the user to enter his personal data to calculate his/her Tax ID, and so should let the data input be the quickest and easiest possible.

Qt Quick components offer many ready-to-use components that allow data entry from the user: more specifically, the following components are used by the Italian Tax ID for the various data fields:

  • TextField for the first and last name fields

Qtquick symbian italiantaxid namefield.png

TextField {
id: nameField
anchors.left: parent.left
anchors.right: parent.right
}
  • ButtonRow for the gender and country of birth selection

Qtquick symbian italiantaxid field gender.png

ButtonRow {
anchors.left: parent.left
anchors.right: parent.right
Button {
id: maleButton
text: qsTr("Male")
}
Button {
id: femaleButton
text: qsTr("Female")
}
}

Qtquick symbian italiantaxid field dateofbirth.png

DatePickerDialog {
id: dateDialog
minimumYear: 1900
maximumYear: 2020
titleText: qsTr("Date of birth")
acceptButtonText: qsTr("Ok")
rejectButtonText: qsTr("Cancel")
}

Qtquick symbian italiantaxid field region.png

SelectionListItem {
id: provinceButton
title: qsTr("Select a region")
width: parent.width
 
onClicked: regionDialog.open()
 
SelectionDialog {
id: regionDialog
titleText: qsTr("Select a region")
selectedIndex: -1
delegate: MenuItem {
text: name
onClicked: {
// select the clicked region
}
}
model: RegionModel {}
}
}

A QML Flickable element is used to let the user scroll through the various fields.

The resulting Tax ID is presented by using the QueryDialog Qt Quick component, as shown below.

Qtquick symbian italiantaxid calculatedcode.png

Archive Page

The app allows the user to save the evaluated Tax IDs for further consultation, without the need to calculate them every time. The archive page shows the list of saved Tax IDs, implemented with a standard QML ListView element, populated with ListItem and ListHeading Qt Quick components.

Qtquick symbian italiantaxid archive.png

The delegate for the ListItem elements uses the ListItemText component, specifying various role values for the various text elements, as shown in the code snippet below.

ListItem {
height: col.height
Column {
id: col
width: parent.width
 
ListItemText {
role: "Title"
text: name + " " + lastName
}
ListItemText {
role: "Subtitle"
text: qsTr("Born in") + " " + city
}
ListItemText {
role: "SelectionSubTitle"
text: qsTr("Date of birth") + ": " + birthDate
}
ListItemText {
role: "SelectionTitle"
text: qsTr("Tax ID") + ": " + code
color: "#38cc80"
}
}
}

List Item actions

The ContextMenu Qt Quick component is used to implement and show actions related to each of the saved Tax IDs. When the user long-presses a single archive item, he/she is presented with the options below:

  • copy the Tax ID to the device clipboard
  • send the Tax ID by e-mail
  • send the Tax ID by SMS
  • delete the archive item

Qtquick symbian italiantaxid archive actions.png

App Icon

The launcher icon, following the Symbian Design Guidelines, shows the emblem of Italy, that is also reproduced on the standard Tax ID cards that are provided to Italian citizens.

Qtquick symbian italiantaxid icon.png

Download

A self-signed version of the Italian Tax ID app can be downloaded here: CodiceFiscale.sis.

Summary

The Italian Tax ID is an app focused on data entry: the Qt Quick components offer many inbuilt features and elements that can be used to easily implement the needed features, so allowing developers to focus on the overall usability and user experience, without the need to write those functionalities from scratch.

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:43.
59 page views in the last 30 days.