QML contact reader application using QtMobility API

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

Article Metadata

---

Code Example

Source file: Media:Qmlcontactreader.zip

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: croozeus (05 Mar 2012)

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.

Video from emulator:

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