From 6aeccc0f8b592d835d9ec32daecc0b5d104f132b Mon Sep 17 00:00:00 2001 From: Warwick Allison Date: Fri, 1 May 2009 16:11:54 +1000 Subject: doc --- src/declarative/fx/qfxlayouts.cpp | 360 +++++++++++++++++++--------------- src/declarative/fx/qfxlistview.cpp | 4 +- src/declarative/fx/qfxmouseregion.cpp | 8 +- src/declarative/fx/qfxparticles.cpp | 166 +++++++++++----- src/declarative/fx/qfxpath.cpp | 36 ++-- src/declarative/fx/qfxrect.cpp | 58 ++++-- 6 files changed, 381 insertions(+), 251 deletions(-) diff --git a/src/declarative/fx/qfxlayouts.cpp b/src/declarative/fx/qfxlayouts.cpp index 76afeb0..85b198e 100644 --- a/src/declarative/fx/qfxlayouts.cpp +++ b/src/declarative/fx/qfxlayouts.cpp @@ -127,15 +127,18 @@ void QFxBaseLayout::setMargin(int s) \property QFxBaseLayout::move \brief the transition when moving an item. - \code - - - - - - - - \endcode + \qml +BaseLayout { + id: layout + y: 0 + move: Transition { + NumericAnimation { + properties: "y" + ease: "easeOutBounce" + } + } +} + \endqml */ QmlTransition *QFxBaseLayout::move() const { @@ -153,15 +156,21 @@ void QFxBaseLayout::setMove(QmlTransition *mt) \property QFxBaseLayout::add \brief the transition when adding an item. - \code - - - - - - - - \endcode + \qml +BaseLayout { + id: layout + y: 0 + add: Transition { + NumericAnimation { + target: layout.item + properties: "opacity" + from: 0 + to: 1 + duration: 500 + } + } +} + \endqml */ QmlTransition *QFxBaseLayout::add() const { @@ -182,15 +191,21 @@ void QFxBaseLayout::setAdd(QmlTransition *add) Note that the item may be 'removed' because its opacity is zero. This can make certain transitions difficult to see. - \code - - - - - - - - \endcode + \qml +BaseLayout { + id: layout + y: 0 + remove: Transition { + NumericAnimation { + target: layout.item + properties: "opacity" + from: 1 + to: 0 + duration: 500 + } + } +} + \endqml */ QmlTransition *QFxBaseLayout::remove() const { @@ -433,10 +448,10 @@ void QFxBaseLayout::applyRemove(const QList >& changes, QML_DEFINE_TYPE(QFxVerticalLayout, VerticalLayout); /*! \qmlclass VerticalLayout - \brief The VerticalLayout element arranges its children in a vertical layout. + \brief The VerticalLayout item arranges its children in a vertical layout. \inherits Item - The VerticalLayout element arranges its child elements so that they are vertically + The VerticalLayout item arranges its child items so that they are vertically aligned and not overlapping. Spacing between items can be added, as can a margin around all the items. The below example lays out differently shaped rectangles using a VerticalLayout. @@ -444,32 +459,34 @@ QML_DEFINE_TYPE(QFxVerticalLayout, VerticalLayout); \row \o \image verticalLayout_example.png \o - \code - - - - - - \endcode + \qml +VerticalLayout { + spacing: 2 + Rect { color: "red"; width: 50; height: 50 } + Rect { color: "green"; width: 20; height: 50 } + Rect { color: "blue"; width: 50; height: 20 } +} + \endqml \endtable VerticalLayout also provides for transitions to be set when items are added, moved, - or removed in the layout. Adding and removing apply both to elements which are deleted + or removed in the layout. Adding and removing apply both to items which are deleted or have their position in the document changed so as to no longer be children of the layout, - as well as to elements which have their opacity set to or from zero so as to appear or disappear. + as well as to items which have their opacity set to or from zero so as to appear or disappear. \table \row \o \image verticalLayout_transition.gif \o - \code - - ... - ... - ... - ... - - \endcode + \qml +VerticalLayout { + spacing: 2 + remove: ... + add: ... + move: ... + ... +} + \endqml \endtable @@ -486,17 +503,20 @@ QML_DEFINE_TYPE(QFxVerticalLayout, VerticalLayout); \row \o \image layout-remove.gif \o - \code - - - - - - - - \endcode + \qml +VerticalLayout { + id: layout + remove: Transition { + NumericAnimation { + target: layout.item + properties: "opacity" + from: 1 + to: 0 + duration: 500 + } + } +} + \endqml \endtable */ @@ -510,17 +530,20 @@ QML_DEFINE_TYPE(QFxVerticalLayout, VerticalLayout); \row \o \image layout-add.gif \o - \code - - - - - - - - \endcode + \qml +VerticalLayout { + id: layout + add: Transition { + NumericAnimation { + target: layout.item + properties: "opacity" + from: 0 + to: 1 + duration: 500 + } + } +} + \endqml \endtable */ @@ -534,15 +557,17 @@ QML_DEFINE_TYPE(QFxVerticalLayout, VerticalLayout); \row \o \image layout-move.gif \o - \code - - - - - - - - \endcode + \qml +VerticalLayout { + id: layout + move: Transition { + NumericAnimation { + properties: "y" + ease: "easeOutBounce" + } + } +} + \endqml \endtable */ /*! @@ -624,19 +649,20 @@ void QFxVerticalLayout::doLayout() QML_DEFINE_TYPE(QFxHorizontalLayout,HorizontalLayout); /*! \qmlclass HorizontalLayout - \brief The HorizontalLayout element arranges its children in a horizontal layout. + \brief The HorizontalLayout item arranges its children in a horizontal layout. \inherits Item - The HorizontalLayout element arranges its child elements so that they are horizontally aligned and not overlapping. Spacing can be added between the items, and a margin around all items can also be added. It also provides for transitions to be set when items are added, moved, or removed in the layout. Adding and removing apply both to elements which are deleted or have their position in the document changed so as to no longer be children of the layout, as well as to elements which have their opacity set to or from zero so as to appear or disappear. + The HorizontalLayout item arranges its child items so that they are horizontally aligned and not overlapping. Spacing can be added between the items, and a margin around all items can also be added. It also provides for transitions to be set when items are added, moved, or removed in the layout. Adding and removing apply both to items which are deleted or have their position in the document changed so as to no longer be children of the layout, as well as to items which have their opacity set to or from zero so as to appear or disappear. The below example lays out differently shaped rectangles using a HorizontalLayout. - \code - - - - - - \endcode + \qml +HorizontalLayout { + spacing: 2 + Rect { color: "red"; width: 50; height: 50 } + Rect { color: "green"; width: 20; height: 50 } + Rect { color: "blue"; width: 50; height: 20 } +} + \endqml \image horizontalLayout_example.png */ @@ -648,15 +674,20 @@ QML_DEFINE_TYPE(QFxHorizontalLayout,HorizontalLayout); Note that if the item counts as removed because its opacity is zero it will not be visible during the transition unless you set the opacity in the transition, like in the below example. - \code - - - - - - - - \endcode + \qml +HorizontalLayout { + id: layout + remove: Transition { + NumericAnimation { + target: layout.item + properties: "opacity" + from: 1 + to: 0 + duration: 500 + } + } +} + \endqml */ /*! @@ -665,15 +696,20 @@ QML_DEFINE_TYPE(QFxHorizontalLayout,HorizontalLayout); Added can mean that either the object has been created or reparented, and thus is now a child or the layout, or that the object has had its opacity increased from zero, and thus is now visible. - \code - - - - - - - - \endcode + \qml +HorizontalLayout { + id: layout + add: Transition { + NumericAnimation { + target: layout.item + properties: "opacity" + from: 0 + to: 1 + duration: 500 + } + } +} + \endqml */ /*! @@ -682,15 +718,17 @@ QML_DEFINE_TYPE(QFxHorizontalLayout,HorizontalLayout); This can happen when other items are added or removed from the layout, or when items resize themselves. - \code - - - - - - - - \endcode + \qml +HorizontalLayout { + id: layout + move: Transition { + NumericAnimation { + properties: "x" + ease: "easeOutBounce" + } + } +} + \endqml */ /*! @@ -776,21 +814,21 @@ QML_DEFINE_TYPE(QFxGridLayout,GridLayout); /*! \qmlclass GridLayout QFxGridLayout - \brief The GridLayout element arranges its children in a grid layout. + \brief The GridLayout item arranges its children in a grid layout. \inherits Item - The GridLayout element arranges its child elements so that they are + The GridLayout item arranges its child items so that they are aligned in a grid and are not overlapping. Spacing can be added between the items, and a margin around all the items can also be defined. It also provides for transitions to be set when items are added, moved, or removed in the layout. Adding and removing apply - both to elements which are deleted or have their position in the + both to items which are deleted or have their position in the document changed so as to no longer be children of the layout, as - well as to elements which have their opacity set to or from zero so + well as to items which have their opacity set to or from zero so as to appear or disappear. The GridLayout defaults to using four columns, and as many rows as - are necessary to fit all the child elements. The number of rows + are necessary to fit all the child items. The number of rows and/or the number of columns can be constrained by setting the rows or columns properties. The grid layout calculates a grid with rectangular cells of sufficient size to hold all items, and then @@ -802,15 +840,17 @@ QML_DEFINE_TYPE(QFxGridLayout,GridLayout); \row \o \image gridLayout_example.png \o - \code - - - - - - - - \endcode + \qml +GridLayout { + columns: 3 + spacing: 2 + Rect { color: "red"; width: 50; height: 50 } + Rect { color: "green"; width: 20; height: 50 } + Rect { color: "blue"; width: 50; height: 20 } + Rect { color: "cyan"; width: 50; height: 50 } + Rect { color: "magenta"; width: 10; height: 10 } +} + \endqml \endtable */ /*! @@ -826,15 +866,20 @@ QML_DEFINE_TYPE(QFxGridLayout,GridLayout); zero it will not be visible during the transition unless you set the opacity in the transition, like in the below example. - \code - - - - - - - - \endcode + \qml +GridLayout { + id: layout + remove: Transition { + NumericAnimation { + target: layout.item + properties: "opacity" + from: 1 + to: 0 + duration: 500 + } + } +} + \endqml */ /*! @@ -846,15 +891,20 @@ QML_DEFINE_TYPE(QFxGridLayout,GridLayout); object has had its opacity increased from zero, and thus is now visible. - \code - - - - - - - - \endcode + \qml +GridLayout { + id: layout + add: Transition { + NumericAnimation { + target: layout.item + properties: "opacity" + from: 0 + to: 1 + duration: 500 + } + } +} + \endqml */ /*! @@ -864,15 +914,17 @@ QML_DEFINE_TYPE(QFxGridLayout,GridLayout); This can happen when other items are added or removed from the layout, or when items resize themselves. - \code - - - - - - - - \endcode + \qml +GridLayout { + id: layout + move: Transition { + NumericAnimation { + properties: "x,y" + ease: "easeOutBounce" + } + } +} + \endqml */ /*! diff --git a/src/declarative/fx/qfxlistview.cpp b/src/declarative/fx/qfxlistview.cpp index 98fa606..9d076d0 100644 --- a/src/declarative/fx/qfxlistview.cpp +++ b/src/declarative/fx/qfxlistview.cpp @@ -795,7 +795,7 @@ void QFxListViewPrivate::fixupX() /*! \qmlclass ListView \inherits Flickable - \brief The ListView element provides a list view of items provided by a model. + \brief The ListView item provides a list view of items provided by a model. The model is typically provided by a QAbstractListModel "C++ model object", but can also be created directly in QML. The items are laid out vertically or horizontally and may be flicked to scroll. @@ -840,7 +840,7 @@ QFxListView::~QFxListView() The C++ model object must be a \l QAbstractItemModel subclass, a \l VisualModel, or a simple list. - Models can also be created directly in QML, using the \l ListModel element. + Models can also be created directly in QML, using a \l ListModel. */ QVariant QFxListView::model() const { diff --git a/src/declarative/fx/qfxmouseregion.cpp b/src/declarative/fx/qfxmouseregion.cpp index 3b318e3..a60ddc4 100644 --- a/src/declarative/fx/qfxmouseregion.cpp +++ b/src/declarative/fx/qfxmouseregion.cpp @@ -145,12 +145,12 @@ void QFxDrag::setYmax(int m) /*! \qmlclass MouseRegion - \brief The MouseRegion element enables simple mouse handling. + \brief The MouseRegion item enables simple mouse handling. \inherits Item - A MouseRegion is typically used in conjunction with a visible element, + A MouseRegion is typically used in conjunction with a visible item, where the MouseRegion effectively 'proxies' mouse handling for that - element. For example, we can put a MouseRegion in a Rect that changes + item. For example, we can put a MouseRegion in a Rect that changes the Rect color to red when clicked: \snippet doc/src/snippets/declarative/mouseregion.qml 0 @@ -164,7 +164,7 @@ void QFxDrag::setYmax(int m) For basic key handling, see \l KeyActions. - MouseRegion is an invisible element: it is never painted. + MouseRegion is an invisible item: it is never painted. \sa MouseEvent */ diff --git a/src/declarative/fx/qfxparticles.cpp b/src/declarative/fx/qfxparticles.cpp index 16b3570..45de1a3 100644 --- a/src/declarative/fx/qfxparticles.cpp +++ b/src/declarative/fx/qfxparticles.cpp @@ -151,7 +151,7 @@ void QFxParticleMotion::destroy(QFxParticle &particle) /*! \qmlclass ParticleMotionLinear - \brief The ParticleMotionLinear element moves particles linearly. + \brief The ParticleMotionLinear object moves particles linearly. \sa Particles */ @@ -175,7 +175,7 @@ void QFxParticleMotionLinear::advance(QFxParticle &p, int interval) /*! \qmlclass ParticleMotionGravity - \brief The ParticleMotionGravity element moves particles towards a point. + \brief The ParticleMotionGravity object moves particles towards a point. \sa Particles */ @@ -234,23 +234,37 @@ void QFxParticleMotionGravity::advance(QFxParticle &p, int interval) /*! \qmlclass ParticleMotionWander - \brief The ParticleMotionWander element moves particles in a somewhat random fashion. + \brief The ParticleMotionWander object moves particles in a somewhat random fashion. The particles will continue roughly in the original direction, however will randomly drift to each side. The code below produces an effect similar to falling snow. - \code - - - - - - \endcode + \qml +Rect { + width: 240 + height: 320 + color: "black" + + Particles { + y: 0 + width: parent.width + height: 30 + src: "star.png" + lifeSpan: 5000 + count: 50 + angle: 70 + angleDeviation: 36 + velocity: 30 + velocityDeviation: 10 + ParticleMotionWander { + xvariance: 30 + pace: 100 + } + } +} + \endqml \sa Particles */ @@ -508,35 +522,59 @@ QML_DEFINE_TYPE(QFxParticles,Particles); /*! \qmlclass Particles - \brief The Particles element generates and moves particles. + \brief The Particles object generates and moves particles. \inherits Item - The particles created by this element cannot be dealt with directly, they can only be controlled through the parameters of the Particles element. The particles are all the same pixmap, specified by the user. + The particles created by this object cannot be dealt with directly, they can only be controlled through the parameters of the Particles object. The particles are all the same pixmap, specified by the user. - The particles are painted relative to the parent of the Particles element. Moving the - Particles element will not move the particles already emitted. + The particles are painted relative to the parent of the Particles object. Moving the + Particles object will not move the particles already emitted. The below example creates two differently behaving particle sources. The top one has particles falling from the top like snow, the lower one has particles expelled up like a fountain. - \code - - - - - - - - - \endcode + \qml +Rect { + width: 240 + height: 320 + color: "black" + Particles { + y: 0 + width: parent.width + height: 30 + src: "star.png" + lifeSpan: 5000 + count: 50 + angle: 70 + angleDeviation: 36 + velocity: 30 + velocityDeviation: 10 + ParticleMotionWander { + xvariance: 30 + pace: 100 + } + } + Particles { + y: 300 + x: 120 + width: 1 + height: 1 + src: "star.png" + lifeSpan: 5000 + count: 200 + angle: 270 + angleDeviation: 45 + velocity: 50 + velocityDeviation: 30 + ParticleMotionGravity { + yattractor: 1000 + xattractor: 0 + acceleration: 25 + } + } +} + \endqml \image particles.gif */ @@ -658,9 +696,13 @@ void QFxParticles::setCount(int cnt) example, the following creates particles whose lifeSpan will vary from 150ms to 250ms: - \code - - \endcode + \qml +Particles { + src: "star.png" + lifeSpan: 200 + lifeSpanDeviation: 100 +} + \endqml */ /*! @@ -691,9 +733,13 @@ void QFxParticles::setLifeSpan(int ls) example, the following creates particles whose lifeSpan will vary from 150ms to 250ms: -\code - -\endcode +\qml +Particles { + src: "star.png" + lifeSpan: 200 + lifeSpanDeviation: 100 +} +\endqml \sa QFxParticles::lifeSpan */ @@ -765,9 +811,13 @@ void QFxParticles::setFadeOutDuration(int dur) example, the following creates particles whose initial direction will vary from 15 degrees to 105 degrees: - \code - - \endcode + \qml +Particles { + src: "star.png" + angle: 60 + angleDeviation: 90 +} + \endqml */ /*! @@ -796,9 +846,13 @@ void QFxParticles::setAngle(qreal angle) example, the following creates particles whose initial direction will vary from 15 degrees to 105 degrees: -\code - -\endcode +\qml +Particles { + src: "star.png" + angle: 60 + angleDeviation: 90 +} +\endqml \sa QFxParticles::angle */ @@ -824,9 +878,13 @@ void QFxParticles::setAngleDeviation(qreal dev) example, the following creates particles whose initial velocity will vary from 40 to 60. - \code - - \endcode + \qml +Particles { + src: "star.png" + velocity: 50 + velocityDeviation: 20 +} + \endqml */ /*! @@ -855,9 +913,13 @@ void QFxParticles::setVelocity(qreal velocity) example, the following creates particles whose initial velocity will vary from 40 to 60. -\code - -\endcode +\qml +Particles { + src: "star.png" + velocity: 50 + velocityDeviation: 20 +} +\endqml \sa QFxParticles::velocity */ diff --git a/src/declarative/fx/qfxpath.cpp b/src/declarative/fx/qfxpath.cpp index 26aa10e..e11658c 100644 --- a/src/declarative/fx/qfxpath.cpp +++ b/src/declarative/fx/qfxpath.cpp @@ -57,9 +57,9 @@ QML_DEFINE_TYPE(QFxPathCubic,PathCubic); /*! \qmlclass PathElement - \brief PathElement is the base path element. + \brief PathElement is the base path type. - This element is the base for all path elements. It cannot + This type is the base for all path types. It cannot be instantiated. \sa Path, PathAttribute, PathPercent, PathLine, PathQuad, PathCubic @@ -73,13 +73,13 @@ QML_DEFINE_TYPE(QFxPathCubic,PathCubic); /*! \qmlclass Path QFxPath - \brief The Path element defines a path for use by \l PathView. + \brief A Path object defines a path for use by \l PathView. A Path is composed of one or more path segments - PathLine, PathQuad, PathCubic. - The spacing of the items along the Path can be adjusted via the - PathPercent element. + The spacing of the items along the Path can be adjusted via a + PathPercent object. PathAttribute allows named attributes with values to be defined along the path. @@ -151,11 +151,11 @@ void QFxPath::setStartY(qreal y) /*! \qmlproperty list Path::pathElements - This property holds the elements composing the path. + This property holds the objects composing the path. \default - A path can contain the following path elements: + A path can contain the following path objects: \list \i \l PathLine - a straight line to a given position. \i \l PathQuad - a quadratic Bezier curve to a given position with a control point. @@ -478,7 +478,7 @@ void QFxCurve::setY(qreal y) \qmlclass PathAttribute \brief The PathAttribute allows setting an attribute at a given position in a Path. - The PathAttribute element allows attibutes consisting of a name and a + The PathAttribute object allows attibutes consisting of a name and a value to be specified for the endpoints of path segments. The attributes are exposed to the delegate as \l {Attached Properties}. The value of an attribute at any particular point is interpolated from the PathAttributes @@ -557,12 +557,12 @@ void QFxPathAttribute::setValue(qreal value) The example below creates a path consisting of a straight line from 0,100 to 200,100: - \code + \qml Path { startX: 0; startY: 100 PathLine { x: 200; y: 100 } } - \endcode + \endqml \sa Path, PathQuad, PathCubic */ @@ -599,12 +599,12 @@ void QFxPathLine::addToPath(QPainterPath &path) \row \o \image declarative-pathquad.png \o - \code + \qml Path { startX: 0; startY: 0 PathQuad x: 200; y: 0; controlX: 100; controlY: 150 } } - \endcode + \endqml \endtable \sa Path, PathCubic, PathLine @@ -683,7 +683,7 @@ void QFxPathQuad::addToPath(QPainterPath &path) \row \o \image declarative-pathcubic.png \o - \code + \qml Path { startX: 20; startY: 0 PathCubic { @@ -691,7 +691,7 @@ void QFxPathQuad::addToPath(QPainterPath &path) control2X: 210; control2Y: 90 } } - \endcode + \endqml \endtable \sa Path, PathQuad, PathLine @@ -813,18 +813,18 @@ void QFxPathCubic::addToPath(QPainterPath &path) \row \o \image declarative-nopercent.png \o - \code + \qml Path { startX: 20; startY: 0 PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 } PathLine { x: 150; y: 80 } PathQuad { x: 180; y: 0; controlX: 200; controlY: 80 } } - \endcode + \endqml \row \o \image declarative-percent.png \o - \code + \qml Path { startX: 20; startY: 0 PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 } @@ -834,7 +834,7 @@ void QFxPathCubic::addToPath(QPainterPath &path) PathQuad { x: 180; y: 0; controlX: 200; controlY: 80 } PathPercent { value: 1 } } - \endcode + \endqml \endtable \sa Path diff --git a/src/declarative/fx/qfxrect.cpp b/src/declarative/fx/qfxrect.cpp index 8aaddba..371aa0c 100644 --- a/src/declarative/fx/qfxrect.cpp +++ b/src/declarative/fx/qfxrect.cpp @@ -53,9 +53,9 @@ QML_DEFINE_TYPE(QFxPen,Pen); \brief The QFxPen class provides a pen used for drawing rect borders on a QFxView. Example: - \code + \qml Rect { pen.width: 2; pen.color: "red" ... } - \endcode + \endqml */ /*! \property QFxPen::width @@ -72,13 +72,13 @@ QML_DEFINE_TYPE(QFxPen,Pen); color is most commonly specified in hexidecimal notation (#RRGGBB) or as an \l {http://www.w3.org/TR/SVG/types.html#ColorKeywords}{SVG color keyword name} (as defined by the World Wide Web Consortium). For example: - \code + \qml // rect with green border using hexidecimal notation Rect { pen.color: "#00FF00" } // rect with steelblue border using SVG color name Rect { pen.color: "steelblue" } - \endcode + \endqml For the full set of ways to specify color, see Qt's QColor::setNamedColor documentation. */ @@ -96,14 +96,22 @@ QML_DEFINE_TYPE(QFxRect,Rect); /*! \qmlclass Rect QFxRect - \brief The Rect element allows you to add rectangles to a scene. + \brief The Rect item allows you to add rectangles to a scene. \inherits Item - A Rect is painted having a solid fill (color) and an optional border (pen). You can also create rounded rectangles using the radius property. - - \code - Rect { width: 100; height: 100; color: "red"; pen.color: "black"; pen.width: 5; radius: 10 } - \endcode + A Rect is painted having a solid fill (color) and an optional border (pen). + You can also create rounded rectangles using the radius property. + + \qml + Rect { + width: 100 + height: 100 + color: "red" + pen.color: "black" + pen.width: 5 + radius: 10 + } + \endqml \image declarative-rect.png */ @@ -113,11 +121,19 @@ QML_DEFINE_TYPE(QFxRect,Rect); \class QFxRect \brief The QFxRect class provides a rect item that you can add to a QFxView. - A Rect is painted having a solid fill (color) and an optional border (pen). You can also create rounded rectangles using the radius property. - - \code - Rect { width: 100; height: 100; color: "red"; pen.color: "black"; pen.width: 5; radius: 10 } - \endcode + A Rect is painted having a solid fill (color) and an optional border (pen). + You can also create rounded rectangles using the radius property. + + \qml + Rect { + width: 100 + height: 100 + color: "red" + pen.color: "black" + pen.width: 5 + radius: 10 + } + \endqml \image declarative-rect.png @@ -216,13 +232,13 @@ void QFxRect::dump(int depth) \qmlproperty color Rect::color This property holds the color used to fill the rect. - \code + \qml // green rect using hexidecimal notation Rect { color: "#00FF00" } // steelblue rect using SVG color name Rect { color: "steelblue" } - \endcode + \endqml */ /*! @@ -259,10 +275,10 @@ void QFxRect::setColor(const QColor &c) This color will be drawn over the rect's color when the rect is painted. The tint color should usually be mostly transparent, or you will not be able to see the underlying color. The below example provides a slight red tint by having the tint color be pure red which is only 1/16th opaque. - \code + \qml Rect { x: 0; width: 80; height: 80; color: "lightsteelblue" } Rect { x: 100; width: 80; height: 80; color: "lightsteelblue"; tintColor: "#10FF0000" } - \endcode + \endqml \image declarative-rect_tint.png This attribute is not intended to be used with a single color over the lifetime of an user interface. It is most useful when a subtle change is intended to be conveyed due to some event; you can then use the tint color to more effectively tune the visible color. @@ -320,13 +336,13 @@ QColor QFxRectPrivate::getColor() This property allows for the easy construction of simple horizontal gradients. Other gradients may by formed by adding rotation to the rect. The gradient will blend linearly from the rect's main color to the color specified for gradient color. - \code + \qml Rect { y: 0; width: 80; height: 80; color: "lightsteelblue" } Rect { y: 100; width: 80; height: 80; color: "lightsteelblue"; gradientColor="blue" } Rect { rotation: 90; x: 80; y: 200; width: 80; height: 80; color="lightsteelblue" gradientColor: "blue" } // The x offset is needed because the rotation is from the top left corner - \endcode + \endqml \image declarative-rect_gradient.png */ -- cgit v0.12 From 8f52aee209aa64ef6719126547c767583870bd9f Mon Sep 17 00:00:00 2001 From: Warwick Allison Date: Fri, 1 May 2009 16:26:59 +1000 Subject: doc --- src/declarative/fx/qfxreflectionfilter.cpp | 69 ++++++++++++++---------------- src/declarative/fx/qfxrepeater.cpp | 8 ++-- src/declarative/fx/qfxshadowfilter.cpp | 28 ++++++++---- src/declarative/fx/qfxtext.cpp | 28 ++++++------ src/declarative/fx/qfxtextedit.cpp | 69 +++++++++++++++++------------- src/declarative/fx/qfxtransform.cpp | 43 +++++++++++-------- 6 files changed, 136 insertions(+), 109 deletions(-) diff --git a/src/declarative/fx/qfxreflectionfilter.cpp b/src/declarative/fx/qfxreflectionfilter.cpp index e02bc16..a55f374 100644 --- a/src/declarative/fx/qfxreflectionfilter.cpp +++ b/src/declarative/fx/qfxreflectionfilter.cpp @@ -69,35 +69,30 @@ public: Here is an example of various Reflections applied to an image. - \code - - - - - - - - - - - - - - - - - - - - - - - - - - - - \endcode + \qml +HorizontalLayout { + Image { + src: "icon.png" + filter: Reflection { } + } + Image { + src: "icon.png" + filter: Reflection { offset: 1 } + } + Image { + src: "icon.png" + filter: Reflection { offset: 1; alpha: 0.5 } + } + Image { + src: "icon.png" + filter: Reflection { offset: 1; alpha: 0.5; height: 50 } + } + Image { + src: "icon.png" + filter: Reflection { offset: 1; alpha: 0.5; height: 50; scale: 0.5 } + } +} + \endqml \image reflection_example.png @@ -149,13 +144,15 @@ void QFxReflectionFilter::setAlpha(qreal a) it is set to 50, the bottom 50 pixels of the item are reflected. Data binding could be used to reflect a percentage of the item. - \code - - - - - - \endcode + \qml +Image { + id: myImage + src: "album.png" + filter: Reflection { + height: myImage.height * 0.5 + } +} + \endqml */ /*! \qmlproperty int Reflection::offset diff --git a/src/declarative/fx/qfxrepeater.cpp b/src/declarative/fx/qfxrepeater.cpp index f9fc878..23b4e01 100644 --- a/src/declarative/fx/qfxrepeater.cpp +++ b/src/declarative/fx/qfxrepeater.cpp @@ -77,13 +77,13 @@ QML_DEFINE_TYPE(QFxRepeater,Repeater); \qmlclass Repeater \inherits Item - \brief The Repeater element allows you to repeat a component based on a data source. + \brief The Repeater item allows you to repeat a component based on a data source. - The Repeater element is used when you want to create a large number of + The Repeater item is used when you want to create a large number of similar items. For each entry in the data source, an item is instantiated in a context seeded with data from the data source. If the repeater will be instantiating a large number of instances, it may be more efficient to - use one of Qt Declarative's \l {xmlViews}{view elements}. + use one of Qt Declarative's \l {xmlViews}{view items}. The data source may be either an object list, a string list or a Qt model. In each case, the data element and the index is exposed to each instantiated @@ -92,7 +92,7 @@ QML_DEFINE_TYPE(QFxRepeater,Repeater); or object) is available as the \c modelData property. In the case of a Qt model, all roles are available as named properties just like in the view classes. - Items instantiated by the Repeater elemented are inserted, in order, as + Items instantiated by the Repeater are inserted, in order, as children of the Repeater's parent. The insertion starts immediately after the repeater's position in its parent stacking list. This is to allow you to use a Repeater inside a layout. The following QML example shows how diff --git a/src/declarative/fx/qfxshadowfilter.cpp b/src/declarative/fx/qfxshadowfilter.cpp index 38d1c31..4d34f74 100644 --- a/src/declarative/fx/qfxshadowfilter.cpp +++ b/src/declarative/fx/qfxshadowfilter.cpp @@ -73,14 +73,26 @@ public: \row \o \image shadow_example.png \o - \code - - - - - - - \endcode + \qml +Rect { + radius: 5 + color: "lightsteelblue" + width: 100 + height: 100 + filter: Shadow { + yOffset: 8 + xOffset: 8 + } +} + +Image { + src: "pics/qtlogo.png" + filter: Shadow { + yOffset: 8 + xOffset: 8 + } +} + \endqml \endtable Shadows are only supported when Qt Qt Declarative is compiled for OpenGL ES 2.0. diff --git a/src/declarative/fx/qfxtext.cpp b/src/declarative/fx/qfxtext.cpp index f1aefb9..a43219d 100644 --- a/src/declarative/fx/qfxtext.cpp +++ b/src/declarative/fx/qfxtext.cpp @@ -61,15 +61,15 @@ QML_DEFINE_TYPE(QFxText,Text); /*! \qmlclass Text QFxText - \brief The Text element allows you to add formatted text to a scene. + \brief The Text item allows you to add formatted text to a scene. \inherits Item It can display both plain and rich text. For example: - \code + \qml Text { text: "Hello World!"; font.family: "Helvetica"; font.size: 24; color: "red" } Text { text: "Hello World!" } - \endcode + \endqml \image declarative-text.png @@ -94,10 +94,10 @@ QML_DEFINE_TYPE(QFxText,Text); Text was designed for read-only text; it does not allow for any text editing. It can display both plain and rich text. For example: - \code + \qml Text { text: "Hello World!"; font.family: "Helvetica"; font.size: 24; color: "red" } Text { text: "Hello World!" } - \endcode + \endqml \image text.png @@ -105,7 +105,7 @@ QML_DEFINE_TYPE(QFxText,Text); much room is needed and set it accordingly. Unless \c wrap is set, it will always prefer width to height (all text will be placed on a single line). - The \c elideMode can alternatively be used to fit a line of plain text to a set width. + The \c elide property can alternatively be used to fit a line of plain text to a set width. A QFxText object can be instantiated in Qml using the tag \c Text. */ @@ -212,13 +212,13 @@ void QFxText::setColor(const QColor &color) The text color. - \code + \qml //green text using hexadecimal notation Text { color: "#00FF00"; ... } //steelblue text using SVG color name Text { color: "steelblue"; ... } - \endcode + \endqml */ QColor QFxText::color() const @@ -234,14 +234,14 @@ QColor QFxText::color() const Supported text styles are \c Normal, \c Outline, \c Raised and \c Sunken. - \code + \qml HorizontalLayout { Text { font.size: 24; text: "Normal" } Text { font.size: 24; text: "Raised"; style: "Raised"; styleColor: "#AAAAAA" } Text { font.size: 24; text: "Outline"; style: "Outline"; styleColor: "red" } Text { font.size: 24; text: "Sunken"; style: "Sunken"; styleColor: "#AAAAAA" } } - \endcode + \endqml \image declarative-textstyle.png */ @@ -302,7 +302,7 @@ QColor QFxText::styleColor() const \qmlproperty enumeration Text::hAlign \qmlproperty enumeration Text::vAlign - Sets the horizontal and vertical alignment of the text within the Text elements + Sets the horizontal and vertical alignment of the text within the Text items width and height. By default, the text is top-left aligned. The valid values for \c hAlign are \c AlignLeft, \c AlignRight and @@ -349,7 +349,7 @@ void QFxText::setVAlign(VAlignment align) /*! \qmlproperty bool Text::wrap - Set this property to wrap the text to the Text element's width. The text will only + Set this property to wrap the text to the Text item's width. The text will only wrap if an explicit width has been set. Wrapping is done on word boundaries (i.e. it is a "word-wrap"). If the text cannot be @@ -378,9 +378,9 @@ void QFxText::setWrap(bool w) } /*! - \qmlproperty Qt::TextElideMode Text::elideMode + \qmlproperty Qt::TextElideMode Text::elide - Set this property to elide parts of the text fit to the Text element's width. + Set this property to elide parts of the text fit to the Text item's width. The text will only elide if an explicit width has been set. This property cannot be used with wrap enabled or with rich text. diff --git a/src/declarative/fx/qfxtextedit.cpp b/src/declarative/fx/qfxtextedit.cpp index 807fcbf..84e209b 100644 --- a/src/declarative/fx/qfxtextedit.cpp +++ b/src/declarative/fx/qfxtextedit.cpp @@ -62,15 +62,21 @@ QML_DEFINE_TYPE(QFxTextEdit, TextEdit); /*! \qmlclass TextEdit - \brief The TextEdit element allows you to add editable formatted text to a scene. + \brief The TextEdit item allows you to add editable formatted text to a scene. It can display both plain and rich text. For example: \qml - - Hello World!]]/> - +TextEdit { + id: edit + text: "Hello World!" + focus: true + focusable: true + font.family: "Helvetica" + font.size: 20 + color: "blue" + width: 240 +} \endqml \image declarative-textedit.gif @@ -177,19 +183,24 @@ void QFxTextEdit::setText(const QString &text) \table \row \o - \code - - - Hello World!]]]]> - - - Hello World!]]]]> - - - Hello World!]]]]> - - - \endcode + \qml +VerticalLayout { + TextEdit { + font.size: 24 + text: "Hello World!" + } + TextEdit { + font.size: 24 + textFormat: "RichText" + text: "Hello World!" + } + TextEdit { + font.size: 24 + textFormat: "PlainText" + text: "Hello World!" + } +} + \endqml \o \image declarative-textformat.png \endtable */ @@ -247,13 +258,13 @@ QmlFont *QFxTextEdit::font() The text color. - \code - - + \qml +// green text using hexadecimal notation +TextEdit { color: "#00FF00"; ... } - - - \endcode +// steelblue text using SVG color name +TextEdit { color: "steelblue"; ... } + \endqml */ /*! @@ -284,7 +295,7 @@ void QFxTextEdit::setColor(const QColor &color) \qmlproperty enumeration TextEdit::hAlign \qmlproperty enumeration TextEdit::vAlign - Sets the horizontal and vertical alignment of the text within the TextEdit elements + Sets the horizontal and vertical alignment of the text within the TextEdit items width and height. By default, the text is top-left aligned. The valid values for \c hAlign are \c AlignLeft, \c AlignRight and @@ -345,7 +356,8 @@ bool QFxTextEdit::wrap() const /*! \qmlproperty bool TextEdit::wrap - Set this property to wrap the text to the TextEdit element's width. The text will only wrap if an explicit width has been set. + Set this property to wrap the text to the TextEdit item's width. + The text will only wrap if an explicit width has been set. Wrapping is done on word boundaries (i.e. it is a "word-wrap"). Wrapping is off by default. */ @@ -410,7 +422,7 @@ void QFxTextEdit::componentComplete() /*! \qmlproperty bool TextEdit::readOnly - Whether the user an interact with the TextEdit element. If this + Whether the user an interact with the TextEdit item. If this property is set to true the text cannot be edited by user interaction. By default this property is false. @@ -418,8 +430,7 @@ void QFxTextEdit::componentComplete() /*! \property QFxTextEdit::readOnly - \brief If this property is true the text can not be edited by - user interaction. + \brief If this property is true the text can not be edited by user interaction. Changing this property will modify the text interaction flags. If you require more specific control about how user interaction diff --git a/src/declarative/fx/qfxtransform.cpp b/src/declarative/fx/qfxtransform.cpp index 8ff4c54..1fe02d1 100644 --- a/src/declarative/fx/qfxtransform.cpp +++ b/src/declarative/fx/qfxtransform.cpp @@ -85,16 +85,16 @@ void QFxTransform::update() /*! \qmlclass Axis - \brief The Axis element defines an axis that can be used for rotation or translation. + \brief A Axis object defines an axis that can be used for rotation or translation. An axis is specified by 2 points in 3D space: a start point and an end point. While technically the axis is the line running through these two points (and thus many different sets of two points could define the same axis), the distance between the points does matter for translation along an axis. - \code + \qml Axis { startX: 0; startY: 0; endX: 20; endY: 30 } - \endcode + \endqml */ QML_DEFINE_TYPE(QFxAxis, Axis); @@ -179,7 +179,7 @@ void QFxAxis::setEndZ(qreal z) /*! \qmlclass Rotation3D - \brief The Rotation3D element provides a way to rotate an Item around an axis. + \brief A Rotation3D object provides a way to rotate an Item around an axis. Here is an example of various rotations applied to an \l Image. \snippet doc/src/snippets/declarative/rotation.qml 0 @@ -317,16 +317,23 @@ void QFxRotation3D::update() /*! \qmlclass Translation3D - \brief The Translation3D element provides a way to move an Item along an axis. + \brief A Translation3D object provides a way to move an Item along an axis. The following example translates the image to 10, 3. - \code - - - - - - \endcode + \qml +Image { + src: "logo.png" + transform: [ + Translation3D { + axis.startX: 0 + axis.startY: 0 + axis.endX: 1 + axis.endY: .3 + distance: 10 + } + ] +} + \endqml */ QML_DEFINE_TYPE(QFxTranslation3D,Translation3D); @@ -367,9 +374,9 @@ QFxAxis *QFxTranslation3D::axis() in the example below, a distance of 1 would translate to 100, 50, while a distance of 0.5 would translate to 50, 25. - \code + \qml Translation3D { axis.startX: 0; axis.startY: 0; axis.endX: 100; axis.endY: 50 } - \endcode + \endqml */ qreal QFxTranslation3D::distance() const { @@ -444,7 +451,7 @@ void QFxTranslation3D::update() /*! \qmlclass Perspective - \brief The Perspective element specifies a perspective transformation. + \brief A Perspective object specifies a perspective transformation. A Perspective transform only affects an item when running under OpenGL; when running under software rasterization it has no effect. @@ -501,10 +508,10 @@ QMatrix4x4 QFxPerspective::transform() const /*! \qmlclass Squish - \brief The Squish element allows you to distort an items appearance by 'squishing' it. + \brief A Squish object allows you to distort an items appearance by 'squishing' it. Here is an example of various \l Image squishes. - \code + \qml Rect { id: Screen width: 360; height: 80 @@ -556,7 +563,7 @@ QMatrix4x4 QFxPerspective::transform() const } } } - \endcode + \endqml \image squish.png */ -- cgit v0.12