×
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)
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Draft]][[Category:Qt Mobility]][[Category:Symbian C++]][[Category:Symbian]][[Category:Code Snippet]][[Category:Code Examples]]
+
[[Category:Qt Mobility]][[Category:Symbian C++]][[Category:Symbian]][[Category:Code Snippet]][[Category:Code Examples]]
 
QMLContactReader application is a very simple application developed in QML using Qt Mobility API.
 
QMLContactReader application is a very simple application developed in QML using Qt Mobility API.
  
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==
<code>
+
<code javascript>
 
import QtMobility.contacts 1.1
 
import QtMobility.contacts 1.1
 
</code>
 
</code>
  
<code>
+
<code javascript>
 
Page {
 
Page {
 
     id: mainPage
 
     id: mainPage
Line 109: Line 110:
  
 
==Dialog Code==
 
==Dialog Code==
<code>
+
<code javascript>
 
CommonDialog{
 
CommonDialog{
 
     id: cdDialog
 
     id: cdDialog

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

63 page views in the last 30 days.
×