Improve examples documentation

Add more details and snippets to the examples for text and
imageelements.

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

5 files changed, 57 insertions, 3 deletions

diff --git a/examples/quick/text/fonts/availableFonts.qml b/examples/quick/text/fonts/availableFonts.qml
index 63a74d269b..d89b454a14 100644
--- a/examples/quick/text/fonts/availableFonts.qml
+++ b/examples/quick/text/fonts/availableFonts.qml
@@ -44,13 +44,21 @@ Rectangle {
     width: 320; height: 480; color: "steelblue"
 
     ListView {
-        anchors.fill: parent; model: Qt.fontFamilies()
+        anchors.fill: parent
+//! [model]
+        model: Qt.fontFamilies()
+//! [model]
 
         delegate: Item {
             height: 40; width: ListView.view.width
             Text {
                 anchors.centerIn: parent
-                text: modelData; font.family: modelData; font.pixelSize: 20; color: "white"
+                text: modelData
+//! [delegate]
+                font.family: modelData
+//! [delegate]
+                font.pixelSize: 20
+                color: "white"
             }
         }
     }
diff --git a/examples/quick/text/fonts/fonts.qml b/examples/quick/text/fonts/fonts.qml
index f0e9b60bc5..7a6b27538d 100644
--- a/examples/quick/text/fonts/fonts.qml
+++ b/examples/quick/text/fonts/fonts.qml
@@ -46,9 +46,15 @@ Rectangle {
     width: 320; height: 480
     color: "steelblue"
 
+//! [fontloader]
     FontLoader { id: fixedFont; name: "Courier" }
+//! [fontloader]
+//! [fontloaderlocal]
     FontLoader { id: localFont; source: "content/fonts/tarzeau_ocr_a.ttf" }
+//! [fontloaderlocal]
+//! [fontloaderremote]
     FontLoader { id: webFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" }
+//! [fontloaderremote]
 
     Column {
         anchors { fill: parent; leftMargin: 10; rightMargin: 10; topMargin: 10 }
@@ -59,7 +65,10 @@ Rectangle {
             color: "lightsteelblue"
             width: parent.width
             wrapMode: Text.WordWrap
-            font.family: "Times"; font.pixelSize: 20
+//! [name]
+            font.family: "Times"
+//! [name]
+            font.pixelSize: 20
         }
         Text {
             text: myText
diff --git a/examples/quick/text/fonts/hello.qml b/examples/quick/text/fonts/hello.qml
index 8920329ddb..024895b8b4 100644
--- a/examples/quick/text/fonts/hello.qml
+++ b/examples/quick/text/fonts/hello.qml
@@ -58,6 +58,7 @@ Rectangle {
             font.pixelSize: 32
             smooth: true
 
+//! [letterspacing]
             SequentialAnimation on font.letterSpacing {
                 loops: Animation.Infinite;
                 NumberAnimation { from: 0; to: 50; easing.type: Easing.InQuad; duration: 3000 }
@@ -68,6 +69,7 @@ Rectangle {
                     }
                 }
             }
+//! [letterspacing]
 
             SequentialAnimation on opacity {
                 loops: Animation.Infinite;
diff --git a/examples/quick/text/styledtext-layout.qml b/examples/quick/text/styledtext-layout.qml
index cb5e1ad277..8ae288b037 100644
--- a/examples/quick/text/styledtext-layout.qml
+++ b/examples/quick/text/styledtext-layout.qml
@@ -60,6 +60,7 @@ Rectangle {
 
         text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at ante dui <a href=\"www.nokia.com\">www.nokia.com</a>.<br/>Curabitur ante est, pulvinar quis adipiscing a, iaculis id ipsum. Nunc blandit condimentum odio vel egestas.<br><ul type=\"bullet\"><li>Coffee<ol type=\"a\"><li>Espresso<li>Cappuccino<li>Latte</ol><li>Juice<ol type=\"1\"><li>Orange</li><li>Apple</li><li>Pineapple</li><li>Tomato</li></ol></li></ul><p><font color=\"#434343\"><i>Proin consectetur <b>sapien</b> in ipsum lacinia sit amet mattis orci interdum. Quisque vitae accumsan lectus. Ut nisi turpis, sollicitudin ut dignissim id, fermentum ac est. Maecenas nec libero leo. Sed ac leo eget ipsum ultricies viverra sit amet eu orci. Praesent et tortor risus, viverra accumsan sapien. Sed faucibus eleifend lectus, sed euismod urna porta eu. Quisque vitae accumsan lectus. Ut nisi turpis, sollicitudin ut dignissim id, fermentum ac est. Maecenas nec libero leo. Sed ac leo eget ipsum ultricies viverra sit amet eu orci."
 
+//! [layout]
         onLineLaidOut: {
             line.width = width / 2  - (margin)
 
@@ -68,6 +69,7 @@ Rectangle {
                 line.x = width / 2 + margin
             }
         }
+//! [layout]
     }
 
 }
diff --git a/examples/quick/text/text.qml b/examples/quick/text/text.qml
index e8be93cb69..06d10e65ba 100644
--- a/examples/quick/text/text.qml
+++ b/examples/quick/text/text.qml
@@ -49,6 +49,39 @@ import "../../shared"
     This is a collection of  small QML examples relating to text. Each example is
     a small QML file, usually containing or emphasizing a particular element or
     feature. You can run and observe the behavior of each example.
+
+    'Hello' shows how to change and animate the letter spacing of a Text element.
+    It uses a sequential animation to first animate the font.letterSpacing property
+    from 0 to 50 over 3 seconds and then move the text to a random position on screen:
+    \snippet examples/quick/text/fonts/hello.qml letterspacing
+
+    'Fonts' shows different ways of using fonts with the Text element.
+    Simply by name, using the font.family property directly:
+    \snippet examples/quick/text/fonts/fonts.qml name
+    or using a FontLoader element:
+    \snippet examples/quick/text/fonts/fonts.qml fontloader
+    or using a FontLoader and specifying a local font file:
+    \snippet examples/quick/text/fonts/fonts.qml fontloaderlocal
+    or finally using a FontLoader and specifying a remote font file:
+    \snippet examples/quick/text/fonts/fonts.qml fontloaderremote
+
+    'Available Fonts' shows how to use the QML global Qt object and a list view
+    to display all the fonts available on the system.
+    The ListView element uses the list of fonts available as its model:
+    \snippet examples/quick/text/fonts/availableFonts.qml model
+    Inside the delegate, the font family is set with the modelData:
+    \snippet examples/quick/text/fonts/availableFonts.qml delegate
+
+    'Banner' is a simple example showing how to create a banner using a row of text
+    elements and a NumberAnimation.
+
+    'Img tag' shows different ways of displaying images in a text elements using
+    the <img> tag.
+
+    'Text Layout' shows how to create a more complex layout for a text element.
+    This example lays out the text in two colums using the onLineLaidOut handler
+    that allows you to position and resize each line:
+    \snippet examples/quick/text/styledtext-layout.qml layout
 */
 
 Item {