From fafbc9f51b3a7180750f008bc41d7e989f8c23ee Mon Sep 17 00:00:00 2001 From: Casper van Donderen Date: Thu, 19 May 2011 11:12:01 +0200 Subject: Add TextBalloon QML Scene Grpah example with documentation. I moved an old example over to a subfolder. Reviewed-by: Gunnar Sletta --- doc/src/declarative/example-textballoons.qdoc | 104 +++++++++++++++++++++ doc/src/declarative/examples.qdoc | 4 + .../images/declarative-textballoons_example.png | Bin 0 -> 29663 bytes 3 files changed, 108 insertions(+) create mode 100644 doc/src/declarative/example-textballoons.qdoc create mode 100644 doc/src/images/declarative-textballoons_example.png (limited to 'doc') diff --git a/doc/src/declarative/example-textballoons.qdoc b/doc/src/declarative/example-textballoons.qdoc new file mode 100644 index 0000000000..90de999265 --- /dev/null +++ b/doc/src/declarative/example-textballoons.qdoc @@ -0,0 +1,104 @@ +/**************************************************************************** +** +** Copyright (C) 2011 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$ +** 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 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. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** $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 QSGPaintedItem class is a class derived from QSGItem 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 QSGPaintedItem, 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 QSGPaintedItem. QSGPaintedItem class + is the base class for all QPainter based items in the QML Scene Graph + framework. + + \snippet examples/declarative/painteditem/textballoons/textballoonplugin/textballoon.h 0 + + To implement a QSGPaintedItem you must implement QSGPaintedIem's pure + virtual function \l {QSGPaintedItem::}{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/textballoonplugin/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/textballoonplugin/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 {QSGPaintedItem::}{boundingRect()} + item is called to draw depending on the size of the item. The rectangle + returned by the \l {QSGPaintedItem::}{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. + + */ diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc index b7420e011b..e230d9f951 100644 --- a/doc/src/declarative/examples.qdoc +++ b/doc/src/declarative/examples.qdoc @@ -229,6 +229,10 @@ The examples can be found in Qt's \c examples/declarative directory. \o \l{declarative/cppextensions/networkaccessmanagerfactory}{Network access manager factory} \endlist +\section2 Scenegraph +\list +\o \l{declarative/painteditem/textballoons}{Painted Item} +\endlist \section1 Labs diff --git a/doc/src/images/declarative-textballoons_example.png b/doc/src/images/declarative-textballoons_example.png new file mode 100644 index 0000000000..d572de597c Binary files /dev/null and b/doc/src/images/declarative-textballoons_example.png differ -- cgit v1.2.3