From b0497cf5405e7ca95fa7a3eb51ff9c7f897c0e9e Mon Sep 17 00:00:00 2001 From: Andrew den Exter Date: Fri, 27 Apr 2012 16:35:12 +1000 Subject: Elaborate on drag and drop and model view examples with snippets. Change-Id: I8a6874c4bb480ed9bcc59e743b97d439f053840e Reviewed-by: Alan Alpert --- examples/quick/draganddrop/draganddrop.qml | 26 ++++++++++-- examples/quick/draganddrop/tiles/DragTile.qml | 7 +++- examples/quick/draganddrop/tiles/DropTile.qml | 2 + examples/quick/draganddrop/views/gridview.qml | 5 ++- .../quick/modelviews/gridview/gridview-example.qml | 26 +++++------- examples/quick/modelviews/listview/dynamiclist.qml | 6 ++- .../modelviews/listview/expandingdelegates.qml | 14 +++++-- examples/quick/modelviews/listview/highlight.qml | 2 + .../quick/modelviews/listview/highlightranges.qml | 8 +++- examples/quick/modelviews/modelviews.qml | 46 ++++++++++++++++++---- examples/quick/modelviews/package/Delegate.qml | 4 +- .../modelviews/visualitemmodel/visualitemmodel.qml | 3 +- 12 files changed, 106 insertions(+), 43 deletions(-) (limited to 'examples/quick') diff --git a/examples/quick/draganddrop/draganddrop.qml b/examples/quick/draganddrop/draganddrop.qml index 9f56177f23..f30ca7d70f 100644 --- a/examples/quick/draganddrop/draganddrop.qml +++ b/examples/quick/draganddrop/draganddrop.qml @@ -49,9 +49,27 @@ import "../../shared" as Examples This is a collection of small QML examples relating to drag and drop functionality. - Tiles adds drag and drog to simple rectangles, which you can drag into a specific grid. + \section2 Tiles adds drag and drop to simple rectangles, which you can drag into a specific grid. - GridView adds drag and drog to a GridView, allowing you to reorder the list. + It has a DragTile component which uses a MouseArea to move an item when dragged: + + \snippet examples/quick/draganddrop/tiles/DragTile.qml 0 + \snippet examples/quick/draganddrop/tiles/DragTile.qml 1 + + And a DropTile component which the dragged tiles can be dropped onto: + + \snippet examples/quick/draganddrop/tiles/DropTile.qml 0 + + The keys property of the DropArea will only allow an item with matching key in + it's Drag.keys property to be dropped on it. + + \section2 GridView adds drag and drop to a GridView, allowing you to reorder the list. + + It uses a VisualDataModel to move a delegate item to the position of another item + it is dragged over. + + \snippet examples/quick/draganddrop/views/gridview.qml 0 + \snippet examples/quick/draganddrop/views/gridview.qml 1 */ Item { @@ -61,8 +79,8 @@ Item { id: ll anchors.fill: parent Component.onCompleted: { - addExample("Tiles", "", Qt.resolvedUrl("tiles/tiles.qml")); - addExample("GridView", "", Qt.resolvedUrl("views/gridview.qml")); + addExample("Tiles", "Press and drag tiles to move them into the matching colored boxes", Qt.resolvedUrl("tiles/tiles.qml")); + addExample("GridView", "Press and drag to re-order items in the grid", Qt.resolvedUrl("views/gridview.qml")); } } } diff --git a/examples/quick/draganddrop/tiles/DragTile.qml b/examples/quick/draganddrop/tiles/DragTile.qml index 1f4a8c2bea..f5e008a171 100644 --- a/examples/quick/draganddrop/tiles/DragTile.qml +++ b/examples/quick/draganddrop/tiles/DragTile.qml @@ -40,6 +40,7 @@ import QtQuick 2.0 +//! [0] Item { id: root property string colorKey @@ -69,7 +70,7 @@ Item { Drag.active: mouseArea.drag.active Drag.hotSpot.x: 32 Drag.hotSpot.y: 32 - +//! [0] Text { anchors.fill: parent color: "white" @@ -78,13 +79,15 @@ Item { horizontalAlignment:Text.AlignHCenter verticalAlignment: Text.AlignVCenter } - +//! [1] states: State { when: mouseArea.drag.active ParentChange { target: tile; parent: root } AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined } } + } } } +//! [1] diff --git a/examples/quick/draganddrop/tiles/DropTile.qml b/examples/quick/draganddrop/tiles/DropTile.qml index 98fedeb775..025f6df617 100644 --- a/examples/quick/draganddrop/tiles/DropTile.qml +++ b/examples/quick/draganddrop/tiles/DropTile.qml @@ -40,6 +40,7 @@ import QtQuick 2.0 +//! [0] DropArea { id: dragTarget @@ -66,3 +67,4 @@ DropArea { ] } } +//! [0] diff --git a/examples/quick/draganddrop/views/gridview.qml b/examples/quick/draganddrop/views/gridview.qml index b18078f48d..d156ca0c48 100644 --- a/examples/quick/draganddrop/views/gridview.qml +++ b/examples/quick/draganddrop/views/gridview.qml @@ -49,7 +49,9 @@ GridView { NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad } } +//! [0] model: VisualDataModel { +//! [0] id: visualModel model: ListModel { id: colorModel @@ -78,7 +80,7 @@ GridView { ListElement { color: "crimson" } ListElement { color: "teal" } } - +//! [1] delegate: MouseArea { id: delegateRoot @@ -125,5 +127,6 @@ GridView { onEntered: visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex) } } +//! [1] } } diff --git a/examples/quick/modelviews/gridview/gridview-example.qml b/examples/quick/modelviews/gridview/gridview-example.qml index ea3bb5cec9..bf7846f0c2 100644 --- a/examples/quick/modelviews/gridview/gridview-example.qml +++ b/examples/quick/modelviews/gridview/gridview-example.qml @@ -54,11 +54,16 @@ Rectangle { ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" } ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" } } +//! [0] + GridView { + anchors.fill: parent + cellWidth: 100; cellHeight: 100 + focus: true + model: appModel - Component { - id: appDelegate + highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" } - Item { + delegate: Item { width: 100; height: 100 Image { @@ -76,18 +81,5 @@ Rectangle { } } } - - Component { - id: appHighlight - Rectangle { width: 80; height: 80; color: "lightsteelblue" } - } - - GridView { - anchors.fill: parent - cellWidth: 100; cellHeight: 100 - highlight: appHighlight - focus: true - model: appModel - delegate: appDelegate - } +//! [0] } diff --git a/examples/quick/modelviews/listview/dynamiclist.qml b/examples/quick/modelviews/listview/dynamiclist.qml index e6d43a0d61..0bd4e05cdc 100644 --- a/examples/quick/modelviews/listview/dynamiclist.qml +++ b/examples/quick/modelviews/listview/dynamiclist.qml @@ -84,8 +84,9 @@ Rectangle { // The delegate for each fruit in the model: Component { id: listDelegate - +//! [0] Item { +//! [0] id: delegateItem width: listView.width; height: 100 clip: true @@ -169,7 +170,7 @@ Rectangle { } // Animate adding and removing of items: - +//! [1] ListView.onAdd: SequentialAnimation { PropertyAction { target: delegateItem; property: "height"; value: 0 } NumberAnimation { target: delegateItem; property: "height"; to: 55; duration: 250; easing.type: Easing.InOutQuad } @@ -183,6 +184,7 @@ Rectangle { PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false } } } +//! [1] } // The view: diff --git a/examples/quick/modelviews/listview/expandingdelegates.qml b/examples/quick/modelviews/listview/expandingdelegates.qml index 02d5edc1d1..bf0d0f642a 100644 --- a/examples/quick/modelviews/listview/expandingdelegates.qml +++ b/examples/quick/modelviews/listview/expandingdelegates.qml @@ -53,7 +53,7 @@ Rectangle { // 2. Details mode, which also shows the ingredients and method. Component { id: recipeDelegate - +//! [0] Item { id: recipe @@ -62,7 +62,7 @@ Rectangle { // rather than having a "PropertyChanges" line for each element we // want to fade. property real detailsOpacity : 0 - +//! [0] width: listView.width height: 70 @@ -78,6 +78,7 @@ Rectangle { // This mouse region covers the entire delegate. // When clicked it changes mode to 'Details'. If we are already // in Details mode, then no change will happen. +//! [1] MouseArea { anchors.fill: parent onClicked: recipe.state = 'Details'; @@ -86,6 +87,7 @@ Rectangle { // Lay out the page: picture, title and ingredients at the top, and method at the // bottom. Note that elements that should not be visible in the list // mode have their opacity set to recipe.detailsOpacity. + Row { id: topLayout x: 10; y: 10; height: recipeImage.height; width: parent.width @@ -96,7 +98,7 @@ Rectangle { width: 50; height: 50 source: picture } - +//! [1] Column { width: background.width - recipeImage.width - 20; height: recipeImage.height spacing: 5 @@ -121,12 +123,14 @@ Rectangle { } } +//! [2] Item { id: details x: 10; width: parent.width - 20 + anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 } opacity: recipe.detailsOpacity - +//! [2] SmallText { id: methodTitle anchors.top: parent.top @@ -155,6 +159,7 @@ Rectangle { source: "content/pics/moreDown.png" opacity: flick.atYEnd ? 0 : 1 } +//! [3] } // A button to close the detailed view, i.e. set the state back to default (''). @@ -190,6 +195,7 @@ Rectangle { } } } +//! [3] } // The actual list diff --git a/examples/quick/modelviews/listview/highlight.qml b/examples/quick/modelviews/listview/highlight.qml index 239a946523..3f2a3dc0c4 100644 --- a/examples/quick/modelviews/listview/highlight.qml +++ b/examples/quick/modelviews/listview/highlight.qml @@ -76,6 +76,7 @@ Rectangle { } } +//! [0] // Define a highlight with customised movement between items. Component { id: highlightBar @@ -100,4 +101,5 @@ Rectangle { highlight: highlightBar highlightFollowsCurrentItem: false } +//! [0] } diff --git a/examples/quick/modelviews/listview/highlightranges.qml b/examples/quick/modelviews/listview/highlightranges.qml index 1cf5c06f45..be5a40d152 100644 --- a/examples/quick/modelviews/listview/highlightranges.qml +++ b/examples/quick/modelviews/listview/highlightranges.qml @@ -41,6 +41,7 @@ import QtQuick 2.0 import "content" +//! [0] Rectangle { id: root property int current: 0 @@ -57,6 +58,7 @@ Rectangle { to: 0 } } +//! [0] MouseArea{ id: ma z: 1 @@ -89,7 +91,7 @@ Rectangle { // The first ListView sets root.current whenever its currentIndex changes // due to keyboard interaction. // Flicking the third ListView with the mouse also changes root.current. - +//! [1] ListView { id: list1 height: 160; width: parent.width @@ -131,7 +133,7 @@ Rectangle { preferredHighlightBegin: 125; preferredHighlightEnd: 125 highlightRangeMode: ListView.StrictlyEnforceRange } - +//! [1] // The delegate for each list Component { id: petDelegate @@ -151,4 +153,6 @@ Rectangle { } } } +//! [2] } +//! [2] diff --git a/examples/quick/modelviews/modelviews.qml b/examples/quick/modelviews/modelviews.qml index ce0880c057..ab92fead4c 100644 --- a/examples/quick/modelviews/modelviews.qml +++ b/examples/quick/modelviews/modelviews.qml @@ -49,21 +49,51 @@ import "../../shared" as Examples This is a collection of small QML examples relating to model and view functionality. - GridView and PathView demonstrate usage of these elements to display views. + \section2 GridView and PathView demonstrate usage of these elements to display views. + \snippet examples/quick/modelviews/gridview/gridview-example.qml 0 - Dynamic List demonstrates runtime modification of a ListModel. + \section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView. - Expanding Delegates demonstrates delegates that expand when activated. + The ListView.onAdd signal handler runs an animation when new items are added to the + view, and the ListView.onRemove another when they are removed. + \snippet examples/quick/modelviews/listview/dynamiclist.qml 0 + \snippet examples/quick/modelviews/listview/dynamiclist.qml 1 - Highlight demonstrates adding a custom highlight to a ListView. + \section2 Expanding Delegates demonstrates delegates that expand when activated. - Highlight Ranges shows the three different highlight range modes of ListView. + It has a complex delegate the size and appearance of which can change, displacing + other items in the view. + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 0 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 1 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 2 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 3 - Sections demonstrates the various section headers and footers available to ListView. + \section2 Highlight demonstrates adding a custom highlight to a ListView. + \snippet examples/quick/modelviews/listview/highlight.qml 0 - Packages demonstrates using Packages to transition delegates between two views. + \section2 Highlight Ranges shows the three different highlight range modes of ListView. + \snippet examples/quick/modelviews/listview/highlightranges.qml 0 + \snippet examples/quick/modelviews/listview/highlightranges.qml 1 + \snippet examples/quick/modelviews/listview/highlightranges.qml 2 - VisualItemModel uses a VisualItemModel for the model instead of a ListModel. + \section2 Sections demonstrates the various section headers and footers available to ListView. + \snippet examples/quick/modelviews/listview/sections.qml 0 + + \section2 Packages demonstrates using Packages to transition delegates between two views. + + It has a Package which defines delegate items for each view and an item that can + be transferred between delegates. + + \snippet examples/quick/modelviews/package/Delegate.qml 0 + + A VisualDataModel allows the individual views to access their specific items from + the shared package delegate. + + \snippet examples/quick/modelviews/package/view.qml 0 + + \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel. + + \snippet examples/quick/modelviews/visualitemmodel/visualitemmodel.qml 0 */ Item { diff --git a/examples/quick/modelviews/package/Delegate.qml b/examples/quick/modelviews/package/Delegate.qml index 3028318f10..14bba471af 100644 --- a/examples/quick/modelviews/package/Delegate.qml +++ b/examples/quick/modelviews/package/Delegate.qml @@ -40,7 +40,7 @@ import QtQuick 2.0 -//![0] +//! [0] Package { Text { id: listDelegate; width: parent.width; height: 25; text: 'Empty'; Package.name: 'list' } Text { id: gridDelegate; width: parent.width / 2; height: 50; text: 'Empty'; Package.name: 'grid' } @@ -75,4 +75,4 @@ Package { ] } } -//![0] +//! [0] diff --git a/examples/quick/modelviews/visualitemmodel/visualitemmodel.qml b/examples/quick/modelviews/visualitemmodel/visualitemmodel.qml index 2e012adec6..61a03ee1a4 100644 --- a/examples/quick/modelviews/visualitemmodel/visualitemmodel.qml +++ b/examples/quick/modelviews/visualitemmodel/visualitemmodel.qml @@ -50,6 +50,7 @@ Rectangle { height: 480 property bool printDestruction: false +//! [0] VisualItemModel { id: itemModel @@ -86,7 +87,7 @@ Rectangle { snapMode: ListView.SnapOneItem; flickDeceleration: 2000 cacheBuffer: 200 } - +//! [0] Rectangle { width: root.width; height: 30 anchors { top: view.bottom; bottom: parent.bottom } -- cgit v1.2.3