Document toys examples

Change-Id: I376c4169ffff19e06b55e578e57101a476500b04
Reviewed-by: Martin Jones <martin.jones@nokia.com>

1 files changed, 104 insertions, 0 deletions

diff --git a/doc/src/examples/example-textballoons.qdoc b/doc/src/examples/example-textballoons.qdoc
new file mode 100644
index 0000000000..e475cf15bd
--- /dev/null
+++ b/doc/src/examples/example-textballoons.qdoc
@@ -0,0 +1,104 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms
+** and conditions contained in a signed written agreement between you
+** and Nokia.
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \title Scenegraph Painted Item Example
+    \example declarative/painteditem/textballoons
+
+    The Painted Item example shows how to use the QML Scene Graph framework to
+    implement custom scenegraph items using QPainter.
+
+    \image declarative-textballoons_example.png
+
+    The QQuickPaintedItem class is a class derived from QQuickItem for implementing
+    custom QML Scene Graph items using the QPainter interfaces.
+
+    The example consists of an item class, a plugin class and a QML file
+    to use this plugin. The \c TextBalloon class represents the individual
+    text balloons extending QQuickPaintedItem, the \c TextBalloonPlugin class
+    represents the skeleton code for a QtQuick plugin and the
+    \c textballoons.qml file is used to load the plugin and display the text
+    balloons.
+
+    We will focus on the \c TextBalloon class first and continue with the
+    \c textballoons.qml file. For an example on how to implement a QtQuick
+    plugin please look at \l{declarative/tutorials/extending/chapter6-plugins}
+    {Writing an Extension Plugin}
+
+    \section1 TextBalloon Class Declaration
+
+    The \c TextBalloon class inherits from QQuickPaintedItem. QQuickPaintedItem
+    is the base class for all QPainter based items in the QML Scene Graph
+    framework.
+
+    \snippet examples/declarative/painteditem/textballoons/textballoon.h 0
+
+    To implement a QQuickPaintedItem you must implement QQuickPaintedIem's pure
+    virtual function \l {QQuickPaintedItem::}{paint()} which implements the
+    painting of the element.
+
+    \section1 TextBalloon Class Definition
+
+    We have to be sure to initialize the rightAligned property for a
+    TextBalloon item.
+
+    \snippet examples/declarative/painteditem/textballoons/textballoon.cpp 0
+
+    Then we implement the \c paint() function which is automatically called by
+    the Scenegraph framework to paint the contents of the item. The function
+    paints the item in local coordinates.
+
+    \snippet examples/declarative/painteditem/textballoons/textballoon.cpp 1
+
+    We start with setting the pen and brush on the item to define the look of
+    the item. After that we start drawing. Note that the \l {QQuickPaintedItem::}{boundingRect()}
+    item is called to draw depending on the size of the item. The rectangle
+    returned by the \l {QQuickPaintedItem::}{boundingRect()} function is the size
+    of the item as defined in the QML file.
+
+    \section1 textballoons.qml file
+
+    The Interface consists of two main parts. The scrollable area with the
+    textballoons and the controls button to add new balloons.
+
+    \section2 BalloonView
+
+    \snippet examples/declarative/painteditem/textballoons/textballoons.qml 0
+
+    The balloonModel contains two elements at application start which will be
+    displayed by the balloonView. The balloonView alernates the TextBalloon
+    delegate items between left-aligned and right-aligned.
+
+    \section2 Controls
+
+    \snippet examples/declarative/painteditem/textballoons/textballoons.qml 1
+
+    The controls part of the UI contains a rectangle with a MouseArea which
+    changes color when the mouse hovers over it. This control 'button' adds
+    a new element to the end of the model with a random width.
+
+ */