Building the Italian Tax ID app with Qt Quick components
This article explains how the Italian Tax ID app was designed and built by using Qt Quick components for Symbian.
Article Metadata
Code Example
Tested with
Compatibility
Platform Security
Article
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.
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
TextField {
id: nameField
anchors.left: parent.left
anchors.right: parent.right
}
- ButtonRow for the gender and country of birth selection
ButtonRow {
anchors.left: parent.left
anchors.right: parent.right
Button {
id: maleButton
text: qsTr("Male")
}
Button {
id: femaleButton
text: qsTr("Female")
}
}
- DatePickerDialog for the date of birth
DatePickerDialog {
id: dateDialog
minimumYear: 1900
maximumYear: 2020
titleText: qsTr("Date of birth")
acceptButtonText: qsTr("Ok")
rejectButtonText: qsTr("Cancel")
}
- SelectionListItem and SelectionDialog for the country/region/city of birth
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.
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.
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
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.
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.
