Example application for QtContacts QML API.

This Application is designed to introduce very basic usage
of the API and get you stared with QtContacts library.
It demonstrates how to interact with ContactModel in order to
save, update and delete contact records.

Change-Id: I0588e1591a39f328eecf36444f41b4492301abb6
Sanity-Review: Qt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: Cristiano di Flora <cristiano.di-flora@nokia.com>

6 files changed, 716 insertions, 0 deletions

diff --git a/examples/qmlcontactslistview/ContactEditor.qml b/examples/qmlcontactslistview/ContactEditor.qml
new file mode 100644
index 000000000..ff323f831
--- /dev/null
+++ b/examples/qmlcontactslistview/ContactEditor.qml
@@ -0,0 +1,92 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Pim Module.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms
+** and conditions contained in a signed written agreement between you
+** and Nokia.
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+Rectangle {
+    width: parent.width
+    color: "pink"
+    property variant contact // contact that is shown in editView
+
+    // ![Widgets for manipulating contact details]
+    Column {
+        spacing: 8
+        anchors {
+            fill: parent
+            leftMargin: 10
+            topMargin: 10
+        }
+        DetailEditWidget { id: nameField; label: "Name "; value: contact ? contact.name.firstName : " "}
+        DetailEditWidget { id: emailField; label: "Email Address "; value: contact ? contact.email.emailAddress : " "}
+        DetailEditWidget { id: phoneField; label: "Phone Number "; value: contact ? contact.phoneNumber.number : " "}
+    }
+    // ![Widgets for manipulating contact details]
+
+    function deleteContact() {
+        contactsModel.removeContact(contactEditor.contact.contactId)
+        statusBar.updateMsg("contact successfully deleted")
+     }
+
+    function updateContact() {
+        // read in values from the input fields
+        var values = [nameField.value, emailField.value, phoneField.value]
+        if (!contact) { // create new contact
+            var newContact = Qt.createQmlObject("import QtContacts 5.0; Contact{ }", contactEditor)
+            setDetailValues(newContact, values)
+            newContact.save()
+            contactsModel.saveContact(newContact)
+            statusBar.updateMsg("new contact successfully created")
+        } else { // update existing contact
+            if (contact.modified) {
+                setDetailValues(contact, values)
+                contact.save()
+                statusBar.updateMsg("contact successfully updated")
+            } else {
+                statusBar.updateMsg("nothing to update, contact already is up-to-date")
+            }
+        }
+    }
+
+    function setDetailValues(c, values) {
+        c.name.firstName = values[0]
+        c.email.emailAddress = values[1]
+        c.phoneNumber.number = values[2]
+    }
+
+    function cancel() {
+        contact = ""
+    }
+
+    function resetToDefaults() {
+        nameField.inputFocus = false
+        emailField.inputFocus = false
+        phoneField.inputFocus = false
+        nameField.color = "black"
+        emailField.color = "black"
+        phoneField.color = "black"
+    }
+}
+
diff --git a/examples/qmlcontactslistview/DetailEditWidget.qml b/examples/qmlcontactslistview/DetailEditWidget.qml
new file mode 100644
index 000000000..f7bd637e7
--- /dev/null
+++ b/examples/qmlcontactslistview/DetailEditWidget.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Pim Module.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms
+** and conditions contained in a signed written agreement between you
+** and Nokia.
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+// ![Custom DetailsEditWidget is used for entering new or modifying existing contact detlais]
+Item {
+    width: parent.width - 30
+    height: 20
+
+    property alias label: label.text
+    property alias value: valueText.text
+    property alias color: valueText.color
+    property alias inputFocus: valueText.focus
+
+    property string old
+
+    Text {
+        id: label
+        font {
+            family: "Helvetica"
+            pixelSize: 15
+            bold: true
+            italic: true
+        }
+    }
+
+    Rectangle {
+        width: 180
+        height: 20
+        anchors.left: label.right
+        anchors.leftMargin: 6
+        color: "white"
+        border {
+            width: 2
+            color: "darkgreen"
+        }
+
+        TextInput {
+            id: valueText
+            anchors.fill: parent
+            anchors.leftMargin: 5
+            font {
+                pixelSize: 16
+                family: "Helvetica"
+            }
+            onFocusChanged: {
+                if (focus === true) { // when entering text field
+                    old = valueText.text
+                } else { // when exiting text field
+                    if (valueText.text !== old) {
+                        valueText.color = "red"
+                    }
+                }
+            }
+        }
+    }
+}
+// ![Custom DetailsEditWidget is used for entering new or modifying existing contact detlais]
diff --git a/examples/qmlcontactslistview/GenericButton.qml b/examples/qmlcontactslistview/GenericButton.qml
new file mode 100644
index 000000000..2b1a11032
--- /dev/null
+++ b/examples/qmlcontactslistview/GenericButton.qml
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Pim Module.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms
+** and conditions contained in a signed written agreement between you
+** and Nokia.
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+//![Generic Button]
+//![Create Button Rectangle]
+Rectangle {
+    //radius: 5
+    height: buttonLabel.height
+    color: "black"
+//![Create Button Rectangle]
+
+//![Create Button Border]
+    border {
+        width: 1
+        color: "darkred"
+    }
+//![Create Button Border]
+
+//![Button Clicked]
+    signal clicked
+    property alias buttonText: buttonLabel.text
+//![Button Clicked]
+
+//![Button Text]
+    Text {
+        id: buttonLabel
+        font.pixelSize: 12
+        anchors.centerIn: parent
+        color: "white"
+    }
+//![Button Text]
+
+//![Setup Button Mouse Area]
+    MouseArea {
+        anchors.fill: parent
+        onPressed: {
+            parent.color = "white"
+        }
+        onReleased: {
+            parent.color = "black"
+            parent.clicked()
+        }
+    }
+//![Setup Button Mouse Area]
+
+}
+//![Generic Button]
diff --git a/examples/qmlcontactslistview/example.vcf b/examples/qmlcontactslistview/example.vcf
new file mode 100644
index 000000000..9fbc60421
--- /dev/null
+++ b/examples/qmlcontactslistview/example.vcf
@@ -0,0 +1,159 @@
+BEGIN:VCARD
+VERSION:3.0
+FN:Ms. Aaron Gates
+N:Gates;Aaron;;;
+NICKNAME:Aaron nickname
+EMAIL;TYPE=INTERNET:aaron@example.com
+EMAIL;TYPE=INTERNET:aaron_extra@example.com
+TEL;TYPE=WORK:33333
+TEL;TYPE=HOME:333331
+TEL;TYPE=HOME;TYPE=FAX:333332
+TEL;TYPE=PAGER:333333
+TEL;TYPE=CELL:333334
+ADR;WORK;POSTAL;CHARSET=UTF-8:PO Box;Extended Address;Work Street Address;Work Locality(Town);Work Region(State);Work Post Code;Work Country;Work City;Work State;Work PostCode;Work Country
+ADR;HOME;POSTAL;CHARSET=UTF-8:PO Box;Extended Address;Home Street Address;Home Locality(Town);Home Region(State);Home Post Code;Home Country;Work City;Work State;Work PostCode;Work Country
+LABEL;WORK;ENCODING=QUOTED-PRINTABLE:BusinessOffice=0D=0A=0D=0A,  =0D=0A
+LABEL;HOME;ENCODING=QUOTED-PRINTABLE:=0D=0A,  =0D=0A
+ORG:Example
+TITLE:Engineer
+BDAY:2009-01-01
+PHOTO;ENCODING=BASE64;TYPE=GOOGLECONTACTSPHOTO_1140C7078B06ECD7:/9j/4A
+ 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
+ JXSS45r//Z
+URL;TYPE=WORK:http://qt.nokia.com/logo.png
+URL;TYPE=HOME:http://qt.nokia.com/logo.png
+NOTE:Some notes are here
+END:VCARD
+BEGIN:VCARD
+VERSION:3.0
+FN:Mr. Alexander Mcdonald
+N:Mcdonald;Alexander;;;
+EMAIL;TYPE=INTERNET:alex@example.com
+TEL;TYPE=WORK:111111111
+ADR;TYPE=WORK;POSTAL;CHARSET=UTF-8:PO Box;Extended Address;Work Street Address;Work Locality(Town);Work Region(State);Work Post Code;Work Country;Work City;Work State;Work PostCode;Work Country
+ADR;TYPE=HOME;POSTAL;CHARSET=UTF-8:PO Box;Extended Address;Home Street Address;Home Locality(Town);Home Region(State);Home Post Code;Home Country;Work City;Work State;Work PostCode;Work Country
+ORG:Example
+TITLE:Engineer
+BDAY:2010-02-02
+END:VCARD
+BEGIN:VCARD
+VERSION:3.0
+FN:Mr. Andy Clark
+N:Clark;Andy;;;
+EMAIL;TYPE=INTERNET:andy@example.com
+TEL;TYPE=WORK:07-2342322
+ORG:Example
+TITLE:Engineer
+BDAY:2011-03-03
+PHOTO;VALUE=URL;TYPE=PNG:http://qt.nokia.com/logo.png
+END:VCARD
+BEGIN:VCARD
+VERSION:3.0
+FN:Mr. Bill Chilton
+N:Chilton;Bill;;;
+EMAIL;TYPE=INTERNET:bill@example.com
+TEL;TYPE=WORK:564412232
+ORG:Example
+TITLE:Manager
+BDAY:2012-04-04
+END:VCARD
+BEGIN:VCARD
+VERSION:3.0
+FN:Mr. Bob Green
+N:Green;Bob;;;
+EMAIL;TYPE=INTERNET:bob@example.com
+TEL;TYPE=WORK:07-3242325
+ORG:Example
+TITLE:Engineer
+BDAY:2013-05-05
+END:VCARD
+BEGIN:VCARD
+VERSION:3.0
+FN:Mr. Charles Brows
+N:Brows;Charles;;;
+EMAIL;TYPE=INTERNET:charles@example.com
+TEL;TYPE=WORK:32324534233
+ORG:Example
+TITLE:Engineer
+BDAY:2015-07-07
+END:VCARD
+BEGIN:VCARD
+VERSION:3.0
+FN:Mr. David Edie
+N:Edie;David;;;
+EMAIL;TYPE=INTERNET:david@example.com
+TEL;TYPE=WORK:(07) 3245-2323
+ORG:Example
+TITLE:Manager
+BDAY:2015-08-08
+END:VCARD
+BEGIN:VCARD
+VERSION:3.0
+FN:Mr. Jason Black
+N:Black;Jason;;;
+EMAIL;TYPE=INTERNET:jason@example.com
+TEL;TYPE=WORK:33333333333
+ORG:Example
+TITLE:Engineer
+BDAY:2016-09-09
+END:VCARD
+BEGIN:VCARD
+VERSION:3.0
+FN:Mrs. Carol Eden
+N:Eden;Carol;;;
+EMAIL;TYPE=INTERNET:carol@example.com
+TEL;TYPE=WORK:2323242
+ORG:Example
+TITLE:Manager
+BDAY:2014-06-06
+END:VCARD
diff --git a/examples/qmlcontactslistview/qmlcontactslistview.qml b/examples/qmlcontactslistview/qmlcontactslistview.qml
new file mode 100644
index 000000000..60e58fd31
--- /dev/null
+++ b/examples/qmlcontactslistview/qmlcontactslistview.qml
@@ -0,0 +1,268 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Pim Module.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms
+** and conditions contained in a signed written agreement between you
+** and Nokia.
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import QtContacts 5.0
+
+Rectangle {
+    id: contactsApplication
+    width: 400
+    height: 600
+    state: "listView"
+
+    Rectangle {
+        id: browsingArea
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: contactsApplication.height - btnArea.height - statusBar.height
+        color: "lightblue"
+
+        ContactModel {
+            id: contactsModel
+            manager: "memory"
+            Component.onCompleted: {
+                    contactsModel.importContacts(Qt.resolvedUrl("example.vcf"))
+            }
+            sortOrders: [
+                SortOrder {
+                    detail: ContactDetail.Name
+                    field: Name.FirstName
+                    direction: Qt.AscendingOrder
+                }
+            ]
+        }
+
+        // ![Contact delegate]
+        Component {
+            id: contactDelegate
+
+            Rectangle {
+                id: delRect
+                width: parent.width
+                height: 60
+                border.width: 1
+                border.color: "darkgreen"
+                color: delRect.ListView.isCurrentItem ? "#F5678A" : browsingArea.color
+
+                Column {
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        left: parent.left
+                        leftMargin: 6
+                    }
+                    Text {
+                        text: contact.name.firstName
+                        font.bold: true
+                    }
+                    Text { text: contact.phoneNumber.number }
+                }
+
+                Keys.onReturnPressed: {
+                    contactEditor.contact = contact
+                    goToEditView()
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        contactsView.currentIndex = index
+                    }
+                }
+            }
+        }
+        // ![Contact delegate]
+
+        // ![ListView for showing the contacts]
+        ListView {
+            id: contactsView
+            anchors.fill: browsingArea
+            width: browsingArea.width
+            height: browsingArea.height
+            model: contactsModel
+            focus: true
+            clip: true
+            delegate: contactDelegate
+        }
+        // ![ListView for showing the contacts]
+    }
+
+    // ![Button area]
+    Rectangle {
+        id: btnArea
+        width: parent.width
+        height: 20
+        color: "#C7BFBF"
+        anchors {
+            bottom: statusBar.top
+            right: parent.right
+            left: parent.left
+        }
+        Row {
+            id: btnRow
+            anchors.centerIn: parent
+            spacing: 10
+
+            // buttons for 'listView' state
+            GenericButton {
+                id: btnNew
+                width: 160
+                buttonText: "Add New Contact"
+                visible: true
+                onClicked: {
+                    contactEditor.contact = 0
+                    goToEditView()
+                }
+            }
+            GenericButton {
+                id: btnEdit
+                width: 160
+                buttonText: "Edit Contact"
+                visible: true
+                onClicked: {
+                    contactEditor.contact = contactsView.model.contacts[contactsView.currentIndex]
+                    goToEditView()
+                }
+            }
+            // buttons for 'editView' state
+            GenericButton {
+                id: btnCancel
+                width: 120
+                buttonText: "Cancel"
+                visible: false
+                onClicked: {
+                    contactEditor.cancel()
+                    goToListView()
+                }
+            }
+
+            GenericButton {
+                id: btnDelete
+                width: 120
+                buttonText: "Delete"
+                visible: false
+                onClicked: {
+                    contactEditor.deleteContact()
+                    goToListView()
+                }
+            }
+
+            GenericButton {
+                id: btnSave
+                width: 120
+                buttonText: "Save"
+                visible: false
+                onClicked: {
+                    contactEditor.updateContact()
+                    goToListView()
+                }
+            }
+        }
+    }
+    // ![Button area]
+
+    // ![Status bar area]
+    Rectangle {
+        id: statusBar
+        anchors {
+            bottom: parent.bottom
+            right: parent.right
+            left: parent.left
+        }
+        width: parent.width
+        height: 24
+        color: "gainsboro"
+
+        Text {
+            id: barText
+            anchors.centerIn: parent
+            text: " "
+        }
+
+        Timer {
+            id: barTimer
+            interval: 2000
+            running: false
+            onTriggered: {
+                barText.text = " "
+            }
+        }
+
+        function updateMsg(msg) {
+            barText.text = msg
+            barTimer.restart()
+        }
+    }
+    // ![Status bar area]
+
+    // ![Custom contact editor]
+    ContactEditor {
+        id: contactEditor
+        height: parent.height - statusBar.height - btnArea.height
+        z: -1
+    }
+    // ![Custom contact editor]
+
+    // ![Applications state changes]
+    states: [
+        State {
+            name: "listView"
+            PropertyChanges {
+                target: contactEditor
+                z: -1
+            }
+            PropertyChanges {
+                target: contactsView
+                focus: true
+            }
+        },
+        State {
+            name: "editView"
+            PropertyChanges {
+                target: contactEditor
+                z: 1
+            }
+            PropertyChanges { target: btnNew; visible: false }
+            PropertyChanges { target: btnEdit; visible: false }
+            PropertyChanges { target: btnCancel; visible: true }
+            PropertyChanges { target: btnDelete; visible: true }
+            PropertyChanges { target: btnSave; visible: true }
+            StateChangeScript { script: contactEditor.resetToDefaults() }
+        }
+    ]
+    // ![Applications state changes]
+
+    function goToListView() {
+        contactEditor.contact = ""
+        contactsApplication.state = "listView"
+    }
+
+    function goToEditView() {
+        contactsApplication.state = "editView"
+    }
+}
diff --git a/examples/qmlcontactslistview/qmlcontactslistview.qmlproject b/examples/qmlcontactslistview/qmlcontactslistview.qmlproject
new file mode 100644
index 000000000..6c5439ab9
--- /dev/null
+++ b/examples/qmlcontactslistview/qmlcontactslistview.qmlproject
@@ -0,0 +1,44 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Pim Module.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms
+** and conditions contained in a signed written agreement between you
+** and Nokia.
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QmlProject 1.1
+
+Project {
+    mainFile: "qmlcontactslistview.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ "../exampleplugin" ]
+}