×
Namespaces

Variants
Actions
(Difference between revisions)

QML contact reader application using QtMobility API

From Nokia Developer Wiki
Jump to: navigation, search
kkrish (Talk | contribs)
(Kkrish -)
hamishwillee (Talk | contribs)
m (Hamishwillee - Change to use new video player which works with Lumia 920 and other mobile browsers)
Line 28: Line 28:
 
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.
 
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:{{#ev:youtube|e7kFSInOhaM}}
+
Video from emulator:
 +
<mediaplayer>http://www.youtube.com/watch?v=e7kFSInOhaM</mediaplayer>
  
 
==Qt Mobility Package==
 
==Qt Mobility Package==

Revision as of 07:48, 30 January 2013

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

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: hamishwillee (30 Jan 2013)

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.

Video from emulator: The media player is loading...

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

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

×