An error occurred while loading the file. Please try again.
-
Gabriel de Dietrich authored
In the near future, we hope that QML types like Creator/Instantiator (currently under review) will help simplify model binding, and object creation and deletion. Also, given the differences between QML models and QAbstractItemModel APIs, it's hard to provide a unified and elegant solution for this right now. ComboBox gets the part of the logic that ContextMenu was responsible for, extended to support string list and number models. Auto-tests updated and XFAIL removed where applicable. Change-Id: I9f5d4059644c495bffff76fb7c353e6fe7fde62e Reviewed-by:Frederik Gladhorn <frederik.gladhorn@digia.com>
8cc52b9d
/******************************************************************************** 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.0import QtQuick.Controls 1.0import QtQuick.Controls.Private 1.0/*! \qmltype TableView \inqmlmodule QtQuick.Controls 1.0 \ingroup views \brief Provides a list view with scroll bars, styling and header sections. \image tableview.png A TableView is similar to \l ListView and adds scroll bars, selection and resizable header sections. As with \l ListView, data for each row is provided through a \l model: \code ListModel { id: libraryModel ListElement{ title: "A Masterpiece" ; author: "Gabriel" } ListElement{ title: "Brilliance" ; author: "Jens" } ListElement{ title: "Outstanding" ; author: "Frederik" } } \endcode You provide title and size of a column header by adding a \l TableViewColumn to the default \l header property as demonstrated below. \code TableView {7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
TableViewColumn{ role: "title" ; title: "Title" ; width: 100 }
TableViewColumn{ role: "author" ; title: "Author" ; width: 200 }
model: libraryModel
}
\endcode
The header sections are attached to values in the \l model by defining
the model role they attach to. Each property in the model, will
then be shown in their corresponding column.
You can customize the look by overriding the \l itemDelegate,
\l rowDelegate or \l headerDelegate properties.
The view itself does not provide sorting. This has to
be done on the model itself. However you can provide sorting
on the model and enable sort indicators on headers.
\list
\li sortColumn - The index of the currently selected sort header
\li sortIndicatorVisible - If sort indicators should be enabled
\li sortIndicatorDirection - "up" or "down" depending on state
\endlist
*/
ScrollArea {
id: root
/*! This property holds the model providing data for the list.
The model provides the set of data that is used to create the items in the view.
Models can be created directly in QML using ListModel, XmlListModel or VisualItemModel,
or provided by C++ model classes. \sa ListView::model
Example model:
\code
model: ListModel {
ListElement{ column1: "value 1" ; column2: "value 2" }
ListElement{ column1: "value 3" ; column2: "value 4" }
}
\endcode */
property variant model
width: 200
height: 200
/*! \internal */
__scrollBarTopMargin: styleitem.style == "mac" ? headerrow.height : 0
/*! This property sets if the frame should paint the focus frame around its contents.
The default value is \c false.
\note Only certain platforms such as Mac OS X will be affected by this property */
property bool highlightOnFocus: false
/*! This property is set to \c true if the view alternates the row color.
The default value is \c true. */
property bool alternateRowColor: true
/*! This property determines if the header is visible.
The default value is \c true. */
property bool headerVisible: true
/*! This property defines a delegate to draw a specific cell.
In the item delegate you have access to the following special properties:
\list
\li itemHeight - default platform size of item
\li itemWidth - default platform width of item
\li itemSelected - if the row is currently selected
\li itemValue - The text for this item
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
\li itemForeground - The default text color for an item
\endlist
Example:
\code
itemDelegate: Item {
Text {
anchors.verticalCenter: parent.verticalCenter
color: itemForeground
elide: Text.ElideRight
text: itemValue
}
}
\endcode */
property Component itemDelegate: standardDelegate
/*! This property defines a delegate to draw a row. */
property Component rowDelegate: rowDelegate
/*! This property defines a delegate to draw a header. */
property Component headerDelegate: headerDelegate
/*! \qmlproperty color TableView::backgroundColor
This property sets the background color of the viewport.
The default value is the base color of the SystemPalette. */
property alias backgroundColor: colorRect.color
/*! This property sets if the frame should be visible.
The default value is \c true. */
frame: true
/*! Index of the currently selected sort column
The default value is \c 0. */
property int sortColumn
/*! This property shows or hides the sort indicator
The default value is \c false.
\note The view itself does not sort the data. */
property bool sortIndicatorVisible: false
/*! This sets the sorting direction of the sort indicator
The allowed values are:
\list
\li "up"
\li "down" - the default
\endlist */
property string sortIndicatorDirection: "down"
/*! \qmlproperty Component TableView::header
This property contains the TableViewHeader items */
default property alias header: listView.columnheader
/*! \qmlproperty Component TableView::contentHeader
This is the content header of the TableView */
property alias contentHeader: listView.header
/*! \qmlproperty Component TableView::contentFooter
This is the content footer of the TableView */
property alias contentFooter: listView.footer
/*! \qmlproperty Item TableView::currentItem
This is the current item of the TableView */
property alias currentItem: listView.currentItem
/*! \qmlproperty int TableView::count
The current number of rows */
property alias count: listView.count
/*! \qmlproperty string TableView::section
The section of the view. \sa ListView::section */
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
readonly property alias section: listView.section
/*! \qmlproperty int TableView::currentIndex
The current row index of the view. */
property alias currentIndex: listView.currentIndex
Accessible.role: Accessible.Table
/*! \qmlsignal TableView::activated()
Emitted when a new row is selected by the user. */
signal activated
/*! \internal */
function __decrementCurrentIndex() {
__scroller.blockUpdates = true;
listView.decrementCurrentIndex();
__scroller.blockUpdates = false;
}
/*! \internal */
function __incrementCurrentIndex() {
__scroller.blockUpdates = true;
listView.incrementCurrentIndex();
__scroller.blockUpdates = false;
}
ListView {
id: listView
anchors.topMargin: tableHeader.height
anchors.fill: parent
flickableDirection: Flickable.HorizontalFlick
SystemPalette {
id: palette
colorGroup: enabled ? SystemPalette.Active : SystemPalette.Disabled
}
Rectangle {
id: colorRect
parent: viewport
anchors.fill: parent
color: palette.base
z: -1
}
StyleItem {
id: itemstyle
elementType: "item"
visible: false
}
MouseArea {
id: mousearea
anchors.fill: listView
property bool autoincrement: false
property bool autodecrement: false
onReleased: {
autoincrement = false
autodecrement = false
}
// Handle vertical scrolling whem dragging mouse outside boundraries
Timer { running: mousearea.autoincrement && __scroller.verticalScrollBar.visible; repeat: true; interval: 20 ; onTriggered: __incrementCurrentIndex()}
Timer { running: mousearea.autodecrement && __scroller.verticalScrollBar.visible; repeat: true; interval: 20 ; onTriggered: __decrementCurrentIndex()}
onPositionChanged: {
if (mouseY > listView.height && pressed) {
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
if (autoincrement) return;
autodecrement = false;
autoincrement = true;
} else if (mouseY < 0 && pressed) {
if (autodecrement) return;
autoincrement = false;
autodecrement = true;
} else {
autoincrement = false;
autodecrement = false;
}
var y = Math.min(flickableItem.contentY + listView.height - 5, Math.max(mouseY + flickableItem.contentY, flickableItem.contentY));
var newIndex = listView.indexAt(0, y);
if (newIndex >= 0)
listView.currentIndex = listView.indexAt(0, y);
}
onPressed: {
listView.forceActiveFocus()
var x = Math.min(flickableItem.contentWidth - 5, Math.max(mouseX + flickableItem.contentX, 0))
var y = Math.min(flickableItem.contentHeight - 5, Math.max(mouseY + flickableItem.contentY, 0))
listView.currentIndex = listView.indexAt(x, y)
}
onDoubleClicked: { root.activated() }
// Note by prevent stealing we are keeping the flickable from
// eating our mouse press events
preventStealing: true
}
// Fills extra rows with alternate color
Column {
id: rowfiller
property int rowHeight: flickableItem.contentHeight/count
property int paddedRowCount: height/rowHeight
property int count: flickableItem.count
y: flickableItem.contentHeight
width: parent.width
visible: flickableItem.contentHeight > 0 && alternateRowColor
height: viewport.height - flickableItem.contentHeight
Repeater {
model: visible ? parent.paddedRowCount : 0
Loader {
width: rowfiller.width
height: rowfiller.rowHeight
sourceComponent: root.rowDelegate
property bool itemAlternateBackground: (index + count) % 2 === 1
property bool itemSelected: false
property variant model: listView.model
property variant modelData: null
}
}
}
property list<TableViewColumn> columnheader
highlightFollowsCurrentItem: true
model: root.model
Keys.onUpPressed: root.decrementCurrentIndex()
Keys.onDownPressed: root.incrementCurrentIndex()
Keys.onPressed: {
if (event.key === Qt.Key_PageUp) {
verticalScrollBar.value = __scroller.verticalScrollBar.value - listView.height
} else if (event.key === Qt.Key_PageDown)
verticalScrollBar.value = __scroller.verticalScrollBar.value + listView.height
}
Keys.onReturnPressed: root.activated();
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
delegate: Item {
id: rowitem
width: row.width
height: rowstyle.height
property int rowIndex: model.index
property bool itemAlternateBackground: alternateRowColor && rowIndex % 2 == 1
property variant itemModelData: typeof modelData == "undefined" ? null : modelData
property variant itemModel: model
Loader {
id: rowstyle
// row delegate
sourceComponent: root.rowDelegate
// Row fills the view width regardless of item size
// But scrollbar should not adjust to it
width: parent.width + __scroller.horizontalScrollBar.width
x: flickableItem.contentX
property bool itemAlternateBackground: rowitem.itemAlternateBackground
property bool itemSelected: rowitem.ListView.isCurrentItem
property int index: rowitem.rowIndex
property variant model: listView.model
property variant modelData: rowitem.itemModelData
property variant itemModel: rowitem.itemModel
}
Row {
id: row
anchors.left: parent.left
height: parent.height
Repeater {
id: repeater
model: root.header.length
Loader {
id: itemDelegateLoader
height: parent.height
visible: header[index].visible
sourceComponent: header[index].delegate ? header[index].delegate : itemDelegate
property variant model: listView.model
property variant role: header[index].role
property variant modelData: itemModelData
width: header[index].width
function getValue() {
if (header[index].role.length && itemModel.hasOwnProperty(header[index].role))
return itemModel[header[index].role] // Qml ListModel and QAbstractItemModel
else if (modelData != undefined && modelData.hasOwnProperty(header[index].role))
return modelData[header[index].role] // QObjectList / QObject
else if (modelData != undefined)
return modelData // Models without role
else
return ""
}
property variant itemValue: getValue()
property bool itemSelected: rowitem.ListView.isCurrentItem
property color itemForeground: itemSelected ? rowstyleitem.highlightedTextColor : rowstyleitem.textColor
property int rowIndex: rowitem.rowIndex
property int columnIndex: index
property int itemElideMode: header[index].elideMode
property int itemTextAlignment: header[index].horizontalAlignment
}
}
onWidthChanged: listView.contentWidth = width
}
}
Text{ id:text }
421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
Item {
id: tableHeader
clip: true
parent: __scroller
visible: headerVisible
anchors.top: parent.top
anchors.margins: viewport.anchors.margins
anchors.rightMargin: __scroller.frameWidth +
(__scroller.outerFrame && __scrollBarTopMargin ? 0 : __scroller.verticalScrollBar.width
+ __scroller.scrollBarSpacing)
anchors.left: parent.left
anchors.right: parent.right
height: headerVisible ? headerrow.height : 0
Behavior on height { NumberAnimation{ duration: 80 } }
Row {
id: headerrow
x: -listView.contentX
Repeater {
id: repeater
property int targetIndex: -1
property int dragIndex: -1
model: header.length
delegate: Item {
z:-index
width: header[index].width
visible: header[index].visible
height: headerStyle.height
Loader {
id: headerStyle
sourceComponent: root.headerDelegate
anchors.left: parent.left
anchors.right: parent.right
property string itemValue: header[index].title
property string itemSort: (sortIndicatorVisible && index == sortColumn) ? (sortIndicatorDirection == "up" ? "up" : "down") : "";
property bool itemPressed: headerClickArea.pressed
property bool itemContainsMouse: headerClickArea.containsMouse
property string itemPosition: header.length === 1 ? "only" :
index===header.length-1 ? "end" :
index===0 ? "beginning" : ""
}
Rectangle{
id: targetmark
width: parent.width
height:parent.height
opacity: (index == repeater.targetIndex && repeater.targetIndex != repeater.dragIndex) ? 0.5 : 0
Behavior on opacity { NumberAnimation{duration:160}}
color: palette.highlight
}
MouseArea{
id: headerClickArea
drag.axis: Qt.YAxis
hoverEnabled: true
anchors.fill: parent
onClicked: {
if (sortColumn == index)
sortIndicatorDirection = sortIndicatorDirection === "up" ? "down" : "up"
sortColumn = index
}
// Here we handle moving header sections
// NOTE: the direction is different from the master branch
491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
// so this indicates that I am using an invalid assumption on item ordering
onPositionChanged: {
if (pressed) { // only do this while dragging
for (var h = header.length-1 ; h >= 0 ; --h) {
if (drag.target.x > headerrow.children[h].x) {
repeater.targetIndex = h
break
}
}
}
}
onPressed: {
repeater.dragIndex = index
draghandle.x = parent.x
}
onReleased: {
if (repeater.targetIndex >= 0 && repeater.targetIndex != index ) {
// Rearrange the header sections
var items = new Array
for (var i = 0 ; i< header.length ; ++i)
items.push(header[i])
items.splice(index, 1);
items.splice(repeater.targetIndex, 0, header[index]);
header = items
if (sortColumn == index)
sortColumn = repeater.targetIndex
}
repeater.targetIndex = -1
}
drag.maximumX: 1000
drag.minimumX: -1000
drag.target: draghandle
}
Loader {
id: draghandle
property string itemValue: header[index].title
property string itemSort: (sortIndicatorVisible && index == sortColumn) ? (sortIndicatorDirection == "up" ? "up" : "down") : "";
property bool itemPressed: headerClickArea.pressed
property bool itemContainsMouse: headerClickArea.containsMouse
property string itemPosition
parent: tableHeader
width: header[index].width
height: parent.height
sourceComponent: root.headerDelegate
visible: headerClickArea.pressed
opacity: 0.5
}
MouseArea {
id: headerResizeHandle
property int offset: 0
property int minimumSize: 20
anchors.rightMargin: -width/2
width: 16 ; height: parent.height
anchors.right: parent.right
onPositionChanged: {
var newHeaderWidth = header[index].width + (mouseX - offset)
header[index].width = Math.max(minimumSize, newHeaderWidth)
}
property bool found:false
onDoubleClicked: {
var row
var minWidth = 0
var listdata = listView.children[0]
561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
for (row = 0 ; row < listdata.children.length ; ++row){
var item = listdata.children[row+1]
if (item && item.children[1] && item.children[1].children[index] &&
item.children[1].children[index].children[0].hasOwnProperty("implicitWidth"))
minWidth = Math.max(minWidth, item.children[1].children[index].children[0].implicitWidth)
}
if (minWidth)
header[index].width = minWidth
}
onPressedChanged: if (pressed) offset=mouseX
cursorShape: Qt.SplitHCursor
}
}
}
}
Loader {
id: loader
property string itemValue
property string itemSort
property bool itemPressed
property bool itemContainsMouse
property string itemPosition
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: headerrow.bottom
anchors.rightMargin: -2
sourceComponent: root.headerDelegate
width: root.width - headerrow.width + 2
visible: root.header.length
z:-1
}
Component {
id: standardDelegate
Item {
height: Math.max(16, styleitem.implicitHeight)
property int implicitWidth: sizehint.paintedWidth + 4
Text {
id: label
objectName: "label"
width: parent.width
anchors.margins: 6
font: itemstyle.font
anchors.left: parent.left
anchors.right: parent.right
horizontalAlignment: itemTextAlignment
anchors.verticalCenter: parent.verticalCenter
elide: itemElideMode
text: itemValue != undefined ? itemValue : ""
color: itemForeground
renderType: Text.NativeRendering
}
Text {
id: sizehint
font: label.font
text: itemValue ? itemValue : ""
visible: false
}
}
}
Component {
id: nativeDelegate
// This gives more native styling, but might be less performant
StyleItem {
elementType: "item"
text: itemValue
selected: itemSelected
active: root.activeFocus
631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677
}
}
Component {
id: headerDelegate
StyleItem {
elementType: "header"
activeControl: itemSort
raised: true
sunken: itemPressed
text: itemValue
hover: itemContainsMouse
hints: itemPosition
}
}
Component {
id: rowDelegate
StyleItem {
id: rowstyle
elementType: "itemrow"
activeControl: itemAlternateBackground ? "alternate" : ""
selected: itemSelected ? true : false
height: Math.max(16, styleitem.implicitHeight)
active: root.activeFocus
}
}
StyleItem {
id: styleitem
elementType: "header"
visible:false
contentWidth: 16
contentHeight: font.pixelSize
}
StyleItem {
id: rowstyleitem
property color textColor: styleHint("textColor")
property color highlightedTextColor: styleHint("highlightedTextColor")
elementType: "item"
visible: false
}
}
}
}