Added content and snippet code to Basic Elements overview page.

Task-number: QTBUG-16071

1 files changed, 91 insertions, 6 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.
 */