×
Namespaces

Variants
Actions
Revision as of 09:58, 29 February 2012 by kkrish (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

QML contact reader application using QtMobility API

From Nokia Developer Wiki
Jump to: navigation, search

QMLContactReader application is a very simple application developed in QML using Qt Mobility API.

Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use

Article Metadata
Code Example
Installation file: Not available
Tested with
SDK: Qt SDK 1.1.4
Devices(s): emulator
Compatibility
Platform(s): Symbian
Device(s): Symbian device with Qt SDK
Dependencies: None
Platform Security
Signing Required: Developer Cert
Capabilities: ReadUserData WriteUserData
Article
Keywords: ContactModel, contact reader, QML contact reader
Created: kkrish (29 Feb 2012)
Last edited: kkrish (29 Feb 2012)

Contents

Introduction

QMLContactReader application is a very simple application with two screens. First screen have contacts in the list from the phone book with first name, last name and number and when you tap on the number you will get the dialog with more details.

Qt Mobility Package

import QtMobility.contacts 1.1
Page {
id: mainPage
 
 
Text {
id: titleText
text: "Contacts Book"
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 6
color: platformStyle.colorNormalLight
 
}
Component {
id: contactListDelegate
Rectangle {
height: 80
width: parent.width
color: "black"
border.color: "gray"
border.width: 2
Text {
id: nameText
text: contact.name.firstName + " " + contact.name.lastName
color: "red"
anchors{left: parent.left; right: parent.right; top: parent.top; }
anchors.leftMargin: 10
font.pixelSize: 30
}
Text {
id: numberText
text: contact.phoneNumber.number
color: "white"
anchors{left: parent.left; right: parent.right; top: nameText.bottom; bottom: parent.bottom}
anchors.leftMargin: 20
font.pixelSize: 30
}
MouseArea{
anchors.fill: parent
onClicked: {
cdDetails.contactFields = contact
cdDetails.open()
}
}
}
}
 
ContactModel {
id: contactModel
sortOrders:
SortOrder {
detail: ContactDetail.Name
field: Name.LastName
direction: Qt.AscendingOrder
}
}
 
ListView {
id: contactList
anchors{top: titleText.bottom; bottom: parent.bottom; left: parent.left; right: parent.right}
model: contactModel
delegate: contactListDelegate
clip: true
}
 
ContactDetails{
id: cdDetails
anchors.fill: parent
}
}

Dialog Code

CommonDialog{
id: cdDialog
titleText: "Contact Details"
buttonTexts: ["OK"]
 
property Contact contactFields
 
content :Flickable{
height: parent.height
width: parent.width
contentHeight: contentItem.height
contentWidth: contentItem.width
flickableDirection: Flickable.VerticalFlick
 
Item {
id: contentItem
Text {
id: fNametext
text: qsTr("First Name")
color: "white"
anchors{top: parent.top; left: parent.left; right: parent.right; topMargin: 10; leftMargin: 10}
font.pixelSize: 30
}
 
Text {
id: fNametextEdit
text: contactFields.name.firstName
color: "lightblue"
anchors{top: fNametext.bottom; left: parent.left; right: parent.right; topMargin: 10; leftMargin: 20}
font.pixelSize: 30
}
 
Text {
id: lNametext
text: qsTr("Last Name")
anchors{top: fNametextEdit.bottom; left: parent.left; right: parent.right; topMargin: 30; leftMargin: 10}
color: "white"
font.pixelSize: 30
}
Text {
id: lNametextEdit
text: contactFields.name.lastName
anchors{top: lNametext.bottom; left: parent.left; right: parent.right; topMargin: 10; leftMargin: 20}
color: "lightblue"
font.pixelSize: 30
}
 
Text {
id: lNumbertext
text: qsTr("Number")
anchors{top: lNametextEdit.bottom; left: parent.left; right: parent.right; topMargin: 30; leftMargin: 10}
color: "white"
font.pixelSize: 30
}
Text {
id: lNumbertextEdit
text: contactFields.phoneNumber.number
anchors{top: lNumbertext.bottom; left: parent.left; right: parent.right; topMargin: 10; leftMargin: 20}
color: "lightblue"
font.pixelSize: 30
}
Text {
id: lEmailText
text: qsTr("Email")
anchors{top: lNumbertextEdit.bottom; left: parent.left; right: parent.right; topMargin: 30; leftMargin: 10}
color: "white"
font.pixelSize: 30
}
Text {
id: lEmailtextEdit
text: contactFields.email.emailAddress
anchors{top: lEmailText.bottom; left: parent.left; right: parent.right; topMargin: 10; leftMargin: 20}
color: "lightblue"
font.pixelSize: 30
}
Text {
id: lAddressText
text: qsTr("Address")
anchors{top: lEmailtextEdit.bottom; left: parent.left; right: parent.right; topMargin: 30; leftMargin: 10}
color: "white"
font.pixelSize: 30
}
Text {
id: lAddresstextEdit
text: contactFields.address.street + " " + contactFields.address.postcode + " " + contactFields.address.state + " " + contactFields.address.district + + " " + contactFields.address.county
anchors{top: lAddressText.bottom; left: parent.left; right: parent.right; topMargin: 10; leftMargin: 20}
color: "lightblue"
font.pixelSize: 30
wrapMode: Text.WordWrap
}
Text {
id: lorganizationText
text: qsTr("Organization")
anchors{top: lAddresstextEdit.bottom; left: parent.left; right: parent.right; topMargin: 30; leftMargin: 10}
color: "white"
font.pixelSize: 30
}
Text {
id: lorganizationtextEdit
text: contactFields.organization.title
anchors{top: lorganizationText.bottom; left: parent.left; right: parent.right; topMargin: 10; leftMargin: 20}
color: "lightblue"
font.pixelSize: 30
}
}
}
}

Example Code

http://www.developer.nokia.com/Community/Wiki/File:Qmlcontactreader.zip

Reference links

http://doc.qt.nokia.com/qtmobility/index.html http://doc.qt.nokia.com/qtmobility/qml-contacts.html

78 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.

×