qmlorganizerlistview.qml Example File

 /****************************************************************************
 **
 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
 ** Contact: http://www.qt-project.org/
 **
 ** 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 QtOrganizer 5.0
 import "content"

 Rectangle {
     id: organizerApplication
     width: 400
     height: 600
     state: "EventListView"

     function createEmptyItem() {
         var newEvent = Qt.createQmlObject("import QtOrganizer 5.0; Event { }",
                                           organizer)
         newEvent.displayLabel = "NEW Event"
         newEvent.startDateTime = new Date()
         newEvent.endDateTime = new Date()
         return newEvent
     }

     function setListViewMouseItem(mouseX, mouseY) {
         var indexedItem = eventView.indexAt(mouseX, mouseY)
         if (indexedItem != -1)
             eventView.currentIndex = indexedItem
     }

     Rectangle {
         id: organizerTitle
         border.color: "black"
         border.width: 4
         radius: 5
         anchors {
             top: parent.top
             left: parent.left
             right: parent.right
         }
         height: organizerTitleLabel.height

         Text {
             id: organizerTitleLabel

             height: font.pixelSize + 5
             anchors.horizontalCenter: parent.horizontalCenter
             text: "Organizer Events"
             font.pixelSize: style.fontPixelSize * 1.4
         }
     }

     Rectangle {
         id: organizerRectangle
         anchors {
             top: organizerTitle.bottom
             left: parent.left
             right: parent.right
         }
         height: organizerApplication.height - organizerTitle.height - eventButtons.height
         color: "white"

         Component {
             id: eventHighlight
             Rectangle {
                 height: eventView.currentItem.height
                 width: organizerRectangle.width

                 color: "lightsteelblue"
                 radius: 5
                 border {
                     color: "black"
                     width: 1
                 }

                 y: eventView.currentItem.y
                 Behavior on y {
                     SpringAnimation {
                         spring: 3
                         damping: 0.2
                     }
                 }
             }
         }

         ListView {
             id: eventView
             anchors.fill: parent
             clip: true
             property bool readOnlyEvent: true

             delegate: eventDelegate
             model: organizer
             focus: true
             highlight: eventHighlight

             MouseArea {
                 anchors.fill: parent
                 id: listViewMouseArea
                 onClicked: {
                     setListViewMouseItem(mouseX, mouseY)
                     organizerApplication.state = "EventEditorView"
                     eventEditor.eventItem = organizer.items[eventView.currentIndex]
                 }
             }
         }
     }

     OrganizerModel {
         id: organizer
         startPeriod: new Date("1970-01-01")
         endPeriod: new Date("2012-12-31")
         //manager:"jsondb"
         manager: "memory"

         Component.onCompleted: {
                 organizer.importItems(Qt.resolvedUrl(
                                           "content/organizer_ical_test.ics"))
         }
     }

     Component {
         id: eventDelegate

         Column {
             id: eventDelegateWrapper
             width: organizerRectangle.width
             height: ListView.isCurrentItem ? (displayLabel.height
                                               + startTime.height + endTime.height)
                                              * 1.6 : (displayLabel.height + startTime.height
                                                       + endTime.height) * 1.2

             Grid {
                 columns: 2
                 spacing: 3

                 Text {
                     font.pixelSize: 14
                     text: "Event: "
                 }
                 TextEdit {
                     id: displayLabel
                     font.pixelSize: 14
                     text: (model.item) ? model.item.displayLabel : ""
                     readOnly: true
                 }
                 Text {
                     font.pixelSize: 12
                     text: "Start: "
                 }
                 TextEdit {
                     id: startTime
                     font.pixelSize: 12
                     text: (model.item) ? Qt.formatDate(
                                              model.item.startDateTime) : ""
                     readOnly: true
                 }
                 Text {
                     font.pixelSize: 12
                     text: "End: "
                 }
                 TextEdit {
                     id: endTime
                     font.pixelSize: 12
                     text: (model.item) ? Qt.formatDate(
                                              model.item.endDateTime) : ""
                     readOnly: true
                 }
             }
         }
     }

     Row {
         spacing: 2
         id: eventButtons
         anchors {
             top: organizerRectangle.bottom
             left: parent.left
             right: parent.right
         }

         GenericButton {
             width: parent.width / 2
             buttonText: "Add New Event"

             onClicked: {
                 organizerApplication.state = "EventEditorView"
                 eventEditor.eventItem = organizerApplication.createEmptyItem()
             }
         }
     }

     EventEditor {
         id: eventEditor
         anchors.fill: parent
         color: "white"
     }

     states: [
         State {
             name: "EventListView"
             PropertyChanges {
                 target: eventEditor
                 visible: false
             }
             PropertyChanges {
                 target: eventView
                 visible: true
             }
         },
         State {
             name: "EventEditorView"
             PropertyChanges {
                 target: eventEditor
                 visible: true
             }
             PropertyChanges {
                 target: eventView
                 visible: false
             }
         }
     ]

 }