Elaborate on drag and drop and model view examples with snippets.

Change-Id: I8a6874c4bb480ed9bcc59e743b97d439f053840e
Reviewed-by: Alan Alpert <alan.alpert@nokia.com>

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"));
         }
     }
 }

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]
 

examples/quick/draganddrop/tiles/DropTile.qml

@@ -40,6 +40,7 @@
 
 import QtQuick 2.0
 
+//! [0]
 DropArea {
     id: dragTarget
 
@@ -66,3 +67,4 @@ DropArea {
         ]
     }
 }
+//! [0]

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]
     }
 }

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]
 }

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:

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

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]
 }

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]

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 {

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]

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 }