diff options
Diffstat (limited to 'examples/quick/controls/tableview/main.qml')
| -rw-r--r-- | examples/quick/controls/tableview/main.qml | 427 |
1 files changed, 427 insertions, 0 deletions
diff --git a/examples/quick/controls/tableview/main.qml b/examples/quick/controls/tableview/main.qml new file mode 100644 index 000000000..92901bf61 --- /dev/null +++ b/examples/quick/controls/tableview/main.qml @@ -0,0 +1,427 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + + + + + +import QtQuick 2.1 +import QtQuick.Controls 1.0 +import QtQuick.XmlListModel 2.0 + +Rectangle { + + width: 538 + frame.margins * 2 + height: 360 + frame.margins * 2 + + ToolBar { + id: toolbar + width: parent.width + + ListModel { + id: delegatemenu + ListElement { text: "Shiny delegate" } + ListElement { text: "Scale selected" } + ListElement { text: "Editable items" } + } + + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.RightButton + onPressed: editmenu.show(mouseX, mouseY) + } + + ComboBox { + id: delegateChooser + opacity: frame.currentIndex === 3 ? 1 : 0 + Behavior on opacity{ NumberAnimation{} } + model: delegatemenu + width: 150 + anchors.left: parent.left + anchors.leftMargin: 8 + anchors.verticalCenter: parent.verticalCenter + } + + CheckBox { + id: enabledCheck + text: "Enabled" + checked: true + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + } + } + + SystemPalette {id: syspal} + color: syspal.window + + XmlListModel { + id: flickerModel + source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags=" + "Qt" + query: "/rss/channel/item" + namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";" + XmlRole { name: "title"; query: "title/string()" } + XmlRole { name: "imagesource"; query: "media:thumbnail/@url/string()" } + XmlRole { name: "credit"; query: "media:credit/string()" } + } + + ListModel { + id: nestedModel + ListElement{attributes: ListElement { description: "Core" ; color:"#ffaacc"}} + ListElement{attributes: ListElement { description: "Second" ; color:"#ffccaa"}} + ListElement{attributes: ListElement { description: "Third" ; color:"#ffffaa"}} + } + + ListModel { + id: largeModel + Component.onCompleted: { + for (var i=0 ; i< 500 ; ++i) + largeModel.append({"name":"Person "+i , "age": Math.round(Math.random()*100), "gender": Math.random()>0.5 ? "Male" : "Female"}) + } + } + + Column { + anchors.top: toolbar.bottom + anchors.right: parent.right + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.margins: 8 + + TabView { + id:frame + focus:true + enabled: enabledCheck.checked + + property int margins: Qt.platform.os === "mac" ? 16 : 0 + + height: parent.height - 34 + anchors.right: parent.right + anchors.left: parent.left + anchors.margins: margins + + Tab { + title: "XmlListModel" + + TableView { + model: flickerModel + anchors.fill: parent + anchors.margins: 12 + + TableViewColumn { + role: "title" + title: "Title" + width: 120 + } + TableViewColumn { + role: "credit" + title: "Credit" + width: 120 + } + TableViewColumn { + role: "imagesource" + title: "Image source" + width: 200 + visible: true + } + + frameVisible: frameCheckbox.checked + headerVisible: headerCheckbox.checked + sortIndicatorVisible: sortableCheckbox.checked + alternatingRowColors: alternateCheckbox.checked + } + } + Tab { + title: "Multivalue" + + TableView { + model: nestedModel + anchors.fill: parent + anchors.margins: 12 + + TableViewColumn { + role: "attributes" + title: "Text and Color" + width: 220 + } + + itemDelegate: Item { + Rectangle{ + color: itemValue.get(0).color + anchors.top:parent.top + anchors.right:parent.right + anchors.bottom:parent.bottom + anchors.margins: 4 + width:32 + border.color:"#666" + } + Text { + width: parent.width + anchors.margins: 4 + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + elide: itemElideMode + text: itemValue.get(0).description + color: itemTextColor + } + } + + frameVisible: frameCheckbox.checked + headerVisible: headerCheckbox.checked + sortIndicatorVisible: sortableCheckbox.checked + alternatingRowColors: alternateCheckbox.checked + } + } + Tab { + title: "Generated" + + TableView { + model: largeModel + anchors.margins: 12 + anchors.fill: parent + TableViewColumn { + role: "name" + title: "Name" + width: 120 + } + TableViewColumn { + role: "age" + title: "Age" + width: 120 + } + TableViewColumn { + role: "gender" + title: "Gender" + width: 120 + } + frameVisible: frameCheckbox.checked + headerVisible: headerCheckbox.checked + sortIndicatorVisible: sortableCheckbox.checked + alternatingRowColors: alternateCheckbox.checked + } + } + + Tab { + title: "Delegates" + Item { + anchors.fill: parent + + Component { + id: delegate1 + Item { + clip: true + Text { + width: parent.width + anchors.margins: 4 + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + elide: itemElideMode + text: itemValue !== undefined ? itemValue : "" + color: itemTextColor + } + } + } + + Component { + id: slickRowDelegate + Rectangle { color: alternateBackground ? "#cef" : "white" } + } + + Component { + id: delegate2 + Item { + height: itemSelected? 60 : 20 + Behavior on height{ NumberAnimation{} } + Text { + width: parent.width + anchors.margins: 4 + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + elide: itemElideMode + text: itemValue !== undefined ? itemValue : "" + color: itemTextColor + } + } + } + + Component { + id: editableDelegate + Item { + + Text { + width: parent.width + anchors.margins: 4 + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + elide: itemElideMode + text: itemValue !== undefined ? itemValue : "" + color: itemTextColor + visible: !itemSelected + } + Loader { // Initialize text editor lazily to improve performance + id: loaderEditor + anchors.fill: parent + anchors.margins: 4 + Connections { + target: loaderEditor.item + onAccepted: { + if (typeof itemValue === 'number') + model.setProperty(rowIndex, role, Number(parseFloat(loaderEditor.item.text).toFixed(0))) + else + model.setProperty(rowIndex, role, loaderEditor.item.text) + } + } + sourceComponent: itemSelected ? editor : null + Component { + id: editor + TextInput { + id: textinput + color: itemTextColor + text: itemValue + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + onClicked: textinput.forceActiveFocus() + } + } + } + } + } + } + TableView { + model: largeModel + anchors.margins: 12 + anchors.fill:parent + frameVisible: frameCheckbox.checked + headerVisible: headerCheckbox.checked + sortIndicatorVisible: sortableCheckbox.checked + alternatingRowColors: alternateCheckbox.checked + + TableViewColumn { + role: "name" + title: "Name" + width: 120 + } + TableViewColumn { + role: "age" + title: "Age" + width: 120 + } + TableViewColumn { + role: "gender" + title: "Gender" + width: 120 + } + + headerDelegate: BorderImage{ + source: "images/header.png" + border{left:2;right:2;top:2;bottom:2} + Text { + text: itemValue + anchors.centerIn:parent + color:"#333" + } + } + + rowDelegate: Rectangle { + height: 20 + color: rowSelected ? "#448" : (alternateBackground ? "#eee" : "#fff") + border.color:"#ccc" + border.width: 1 + anchors.left: parent ? parent.left : undefined + anchors.leftMargin: -2 + anchors.rightMargin: -1 + BorderImage{ + id: selected + anchors.fill: parent + source: "images/selectedrow.png" + visible: rowSelected + border{left:2; right:2; top:2; bottom:2} + SequentialAnimation { + running: true; loops: Animation.Infinite + NumberAnimation { target:selected; property: "opacity"; to: 1.0; duration: 900} + NumberAnimation { target:selected; property: "opacity"; to: 0.5; duration: 900} + } + } + } + + itemDelegate: { + switch (delegateChooser.currentIndex) { + case 0: + return delegate1 + case 1: + return delegate2 + case 2: + return editableDelegate + } + } + } + } + } + } + Row{ + x: 12 + height: 34 + CheckBox{ + id: alternateCheckbox + checked: true + text: "Alternate" + anchors.verticalCenter: parent.verticalCenter + } + CheckBox{ + id: sortableCheckbox + checked: false + text: "Sortindicator" + anchors.verticalCenter: parent.verticalCenter + } + CheckBox{ + id: frameCheckbox + checked: true + text: "Frame" + anchors.verticalCenter: parent.verticalCenter + } + CheckBox{ + id: headerCheckbox + checked: true + text: "Headers" + anchors.verticalCenter: parent.verticalCenter + } + } + } +} |