diff options
author | Eskil Abrahamsen Blomfeldt <eskil.abrahamsen-blomfeldt@digia.com> | 2012-11-20 10:17:47 +0100 |
---|---|---|
committer | Eskil Abrahamsen Blomfeldt <eskil.abrahamsen-blomfeldt@digia.com> | 2012-11-20 10:19:32 +0100 |
commit | 5e975a312412b63cb4993931923360bfe5a105b4 (patch) | |
tree | 5d8f3b4ffe05ed5fb036b84ec1b7820fdab0964a /examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc | |
parent | 48b2d386399341307027efb151f59873c5372407 (diff) | |
parent | 61d35829eed6661c1371d397bbb316ea2f636c50 (diff) |
Merge branch 'newdocs'
Change-Id: Idd7a9837e4f6a1358edf9accdcdc3c71822f4c25
Diffstat (limited to 'examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc')
-rw-r--r-- | examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc | 80 |
1 files changed, 77 insertions, 3 deletions
diff --git a/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc b/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc index aeaf1cec1a..910072aee4 100644 --- a/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc +++ b/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc @@ -25,8 +25,82 @@ ** ****************************************************************************/ + /*! - \title QtQuick Examples - Painted Text Balloons + \title Scenegraph Painted Item Example \example quick/painteditem/textballoons - \brief This is a simple example that draws text balloons using QPainter -*/ + + 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/quick/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/quick/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/quick/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/quick/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/quick/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. + + */ + |