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

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

4 files changed, 22 insertions, 8 deletions

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]