Update QML Documents example

Task-number: QTBUG-12526
(cherry picked from commit eef2e72976f3f8d10a34c9dfb3f60f40616f4df9)

3 files changed, 98 insertions, 26 deletions

diff --git a/doc/src/declarative/pics/anatomy-component.png b/doc/src/declarative/pics/anatomy-component.png
index 70ed983..6125b00 100644
--- a/doc/src/declarative/pics/anatomy-component.png
+++ b/doc/src/declarative/pics/anatomy-component.png
diff --git a/doc/src/declarative/qdeclarativedocument.qdoc b/doc/src/declarative/qdeclarativedocument.qdoc
index a2ed205..f12e547 100644
--- a/doc/src/declarative/qdeclarativedocument.qdoc
+++ b/doc/src/declarative/qdeclarativedocument.qdoc
@@ -73,51 +73,57 @@ document - such as \c Rectangle and \c ListView - including those made within an
 import statements.  QML does not import any modules by default, so at least one \c import
 statement must be present or no elements will be available!
 
+
+\section1 Documents as Component Definitions
+
 A QML document defines a single, top-level \l {QDeclarativeComponent}{QML component}.  A QML component 
 is a template that is interpreted by the QML runtime to create an object with some predefined 
 behaviour.  As it is a template, a single QML component can be "run" multiple times to 
 produce several objects, each of which are said to be \e instances of the component.  
 
 Once created, instances are not dependent on the component that created them, so they can 
-operate on independent data.  Here is an example of a simple "Button" component that is 
-instantiated four times, each with a different value for its \c text property.
+operate on independent data.  Here is an example of a simple "Button" component (defined
+in a \c Button.qml file) that is instantiated four times by \c application.qml.
+Each instance is created with a different value for its \c text property:
 
-\raw HTML
-<table><tr><td>
-\endraw
-\code
+\table
+\row
+\o Button.qml
+\o application.qml
+
+\row
+\o \snippet doc/src/snippets/declarative/qmldocuments.qml 0
+\o 
+\qml
 import Qt 4.7
 
-BorderImage {
-    property alias text: textElement.text
-    width: 100; height: 30; source: "images/toolbutton.sci"
-
-    Text {
-        id: textElement
-        anchors.centerIn: parent
-        font.pointSize: 20
-        style: Text.Raised
-        color: "white"
-    }
+Column {
+    spacing: 10
+
+    Button { text: "Apple" }
+    Button { text: "Orange" }
+    Button { text: "Pear" }
+    Button { text: "Grape" }
 }
-\endcode
-\raw HTML
-</td> <td>
-\endraw
+\endqml
+
 \image anatomy-component.png
-\raw HTML
-</td> </tr> </table>
-\endraw
+
+\endtable
 
 Any snippet of QML code can become a component, just by placing it in the file "<Name>.qml"
-where <Name> is the new element name, and begins with an uppercase letter.  Note that
+where <Name> is the new element name, and begins with an \bold uppercase letter.  Note that
 the case of all characters in the <Name> are significant on some filesystems, notably
 UNIX filesystems.  It is recommended that the case of the filename matches the case of
 the component name in QML exactly, regardless of the platform the QML will be deployed to.
 
-These QML files automatically become available as new QML element types
+These QML component files automatically become available as new QML element types
 to other QML components and applications in the same directory.
 
+
+
+\section1 Inline Components
+
 In addition to the top-level component that all QML documents define, and any reusable
 components placed in separate files, documents may also 
 include \e inline components.  Inline components are declared using the 
diff --git a/doc/src/snippets/declarative/qmldocuments.qml b/doc/src/snippets/declarative/qmldocuments.qml
new file mode 100644
index 0000000..c19a658
--- /dev/null
+++ b/doc/src/snippets/declarative/qmldocuments.qml
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+//![0]
+import Qt 4.7
+
+Rectangle {
+    property alias text: textItem.text
+
+    width: 100; height: 30
+    border.width: 1 
+    radius: 5
+    smooth: true
+
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: "darkGray" }
+        GradientStop { position: 0.5; color: "black" }
+        GradientStop { position: 1.0; color: "darkGray" }
+    }
+
+    Text {
+        id: textItem
+        anchors.centerIn: parent
+        font.pointSize: 20
+        color: "white"
+    }
+
+}
+//![0]