Added content and snippet code to Basic Elements overview page.

Task-number: QTBUG-16071

4 files changed, 97 insertions, 8 deletions

diff --git a/doc/src/declarative/basicelements.qdoc b/doc/src/declarative/basicelements.qdoc
index d0c16b6..4253e4c 100644
--- a/doc/src/declarative/basicelements.qdoc
+++ b/doc/src/declarative/basicelements.qdoc
@@ -26,12 +26,97 @@
 ****************************************************************************/
 
 /*!
-    \page qmlbasicelements.html
-    \ingroup qml-features
-    \contentspage QML Features
-    \previouspage {QML Basic Types}{Data Types}
-    \nextpage {Using QML Positioner and Repeater Items}{Component Layouts}
+\page qmlbasicelements.html
+\ingroup qml-features
+\contentspage QML Features
+\previouspage QML Syntax
+\nextpage {QML Basic Types}{Data Types}
 
-    \title QML Basic Elements
+\title QML Basic Elements
 
+QML's basic elements allow the easy inclusion of objects into the
+scene.
+
+\section1 Basic Elements
+This is a list of some of the elements readily available for users.
+\list
+\o \l {Item}
+\o \l {Rectangle}
+\o \l {Image}
+\o \l {Text}
+\o \l {TextInput}
+\o \l {TextEdit}
+\o \l {FocusScope}
+\o \l {Component}
+\o \l {MouseArea}
+\endlist
+
+For a complete list of QML elements, please visit the \l {QML Elements} page.
+
+\section1 Properties and Qt Declarative Module
+
+When using QML elements, keep in mind that elements may possess properties that
+other elements also possess. This is because QML and its underlying engine is
+implemented in C++ using Qt. More importantly, the chain of property inheritance
+is directly due to QML's use of the \l {Qt Declarative Module} and Qt's
+\l {Meta-Object System}{meta-object} and \l {The Property System}{property} systems. For example, visual elements that have C++ implementation are sublcasses of
+\l {QDeclarativeItem}. As a result, elements such as \l {Rectangle} and
+\l {Text} elements inherit properties such as \c clip and \c smooth.
+
+\section1 Item Element
+
+Many QML elements inherit \l Item properties. \c Item possesses important properties
+such as \c focus, \c children, and dimension properties such as \c width and
+\c height. Although \c Item has physical properties, it is not a visual element.
+Using \c Item as the top-level QML element (as the screen) will not produce a
+visual result, use the \l {Rectangle} element instead. Use the \c Item to create
+opacity effects, such as when creating an invisible container to hold other
+components.
+
+\section1 Rectangle Element
+
+The \l Rectangle element is the basic visual element, for displaying different
+types of items onto the screen. The \c Rectangle is customizable and utilizes
+other elements such as \l Gradient and \l BorderImage for displaying advanced
+customized graphics.
+
+\section1 Image Element
+
+To insert an image into a QML scene, merely declare an \l Image element. The
+\c Image element can load images in formats supported by Qt.
+
+\section1 Text Elements
+
+The \l Text and \l TextEdit elements display formatted text onto the screen.
+\c TextEdit features multi-line editing while the \l TextInput element is for
+single line text input.
+
+\section1 Using Elements as the Top-Level Component
+
+For creating components (or displaying a simple scene), there are different
+elements that could be used as the top-level component. To display a simple scene,
+a \l Rectangle as the top-level component may suffice. \l Rectangle,
+\l FocusScope, \l Component, \l {QML:QtObject} {QtObject}, \l Item, are some of
+the commonly used elements as the top-level component.
+
+When importing components, the top-level component is important because the
+top-level component's properties are the only properties exposed to the parent.
+
+For example, a \c Button component may be implemented using different elements as
+its top-level component. When this component is loaded into another QML scene,
+the component will retain the top-level component's properties. If a non-visual
+component is the top-level component, the visual properties should be aliased to
+the top-level to display the component properly.
+
+A component implemented using a \c Rectangle as the top-level component:
+\snippet doc/src/snippets/declarative/focus/mywidget.qml document
+
+A component that uses a \c FocusScope as the top-level component:
+\snippet doc/src/snippets/declarative/focus/myfocusscopewidget.qml document
+Note that the visual properties need to be passed to the parent. The
+\l {Keyboard Focus in QML}{focus} article provides more details about the
+\c FocusScope element.
+
+For more information on how to build upon QML elements, see the
+\l{Importing Reusable Components} document.
 */
diff --git a/doc/src/snippets/declarative/focus/focusscopewidget.qml b/doc/src/snippets/declarative/focus/focusscopewidget.qml
index 48e5750..3e35ec5 100644
--- a/doc/src/snippets/declarative/focus/focusscopewidget.qml
+++ b/doc/src/snippets/declarative/focus/focusscopewidget.qml
@@ -37,6 +37,7 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
+//! [document]
 import QtQuick 1.0
 
 //! [focusscope window]
@@ -59,3 +60,4 @@ Rectangle {
 
 }
 //! [focusscope window]
+//! [document]
diff --git a/doc/src/snippets/declarative/focus/myfocusscopewidget.qml b/doc/src/snippets/declarative/focus/myfocusscopewidget.qml
index 231ae3a..cec4462 100644
--- a/doc/src/snippets/declarative/focus/myfocusscopewidget.qml
+++ b/doc/src/snippets/declarative/focus/myfocusscopewidget.qml
@@ -37,12 +37,13 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
+//! [document]
 import QtQuick 1.0
 
 //! [widget in focusscope]
 FocusScope {
 
-    //FocusScope needs to bind to visual properties of the children
+    //FocusScope needs to bind to visual properties of the Rectangle
     property alias color: rectangle.color
     x: rectangle.x; y: rectangle.y
     width: rectangle.width; height: rectangle.height
@@ -64,3 +65,4 @@ FocusScope {
     }
 }
 //! [widget in focusscope]
+//! [document]
diff --git a/doc/src/snippets/declarative/focus/mywidget.qml b/doc/src/snippets/declarative/focus/mywidget.qml
index bea723d..e0b22a1 100644
--- a/doc/src/snippets/declarative/focus/mywidget.qml
+++ b/doc/src/snippets/declarative/focus/mywidget.qml
@@ -37,10 +37,10 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
+//! [document]
 import QtQuick 1.0
 
 //! [mywidget]
-//MyWidget code
 Rectangle {
     id: widget
     color: "lightsteelblue"; width: 175; height: 25; radius: 10; smooth: true