diff options
author | Thiago Macieira <thiago.macieira@nokia.com> | 2010-02-20 07:42:16 (GMT) |
---|---|---|
committer | Thiago Macieira <thiago.macieira@nokia.com> | 2010-02-20 07:42:16 (GMT) |
commit | f0eb658611f549470f0d90e141eda61ab9301838 (patch) | |
tree | e234b73e10490e297033d645b744a7cbd26da4b9 /doc/src/declarative | |
parent | ba9c21f7a1398ddcdeee6f010b1477d79f5bb8ce (diff) | |
parent | 8f10ca802dee1ed110f301191c4a56a85575033c (diff) | |
download | Qt-f0eb658611f549470f0d90e141eda61ab9301838.zip Qt-f0eb658611f549470f0d90e141eda61ab9301838.tar.gz Qt-f0eb658611f549470f0d90e141eda61ab9301838.tar.bz2 |
Merge remote branch 'origin/master'
Conflicts:
doc/src/declarative/advtutorial1.qdoc
Diffstat (limited to 'doc/src/declarative')
-rw-r--r-- | doc/src/declarative/advtutorial.qdoc | 5 | ||||
-rw-r--r-- | doc/src/declarative/animation.qdoc | 88 | ||||
-rw-r--r-- | doc/src/declarative/elements.qdoc | 1 | ||||
-rw-r--r-- | doc/src/declarative/focus.qdoc | 2 | ||||
-rw-r--r-- | doc/src/declarative/integrating.qdoc | 9 | ||||
-rw-r--r-- | doc/src/declarative/qmlstates.qdoc | 2 | ||||
-rw-r--r-- | doc/src/declarative/qtbinding.qdoc | 42 |
7 files changed, 99 insertions, 50 deletions
diff --git a/doc/src/declarative/advtutorial.qdoc b/doc/src/declarative/advtutorial.qdoc index 87c040e..961893d 100644 --- a/doc/src/declarative/advtutorial.qdoc +++ b/doc/src/declarative/advtutorial.qdoc @@ -83,8 +83,9 @@ This gives you a basic game window, with room for the game canvas. A new game button and room to display the score. The one thing you may not recognize here is the \l SystemPalette item. This item provides access to the Qt system palette and is used to make the button look more like a system button (for exact native -feel you would use a \l QPushButton). Since we want a fully QML button, and QML does -not include a button, we had to write our own. Below is the code which we wrote to do this: +feel you would use a \l QPushButton). Since we want a fully functional button, +we use the QML elements Text and MouseRegion inside a Rectangle to assemble a +button. Below is the code which we wrote to do this: \snippet declarative/tutorials/samegame/samegame1/Button.qml 0 diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc index acf72e3..cfc100d 100644 --- a/doc/src/declarative/animation.qdoc +++ b/doc/src/declarative/animation.qdoc @@ -44,9 +44,9 @@ \title QML Animation Animation in QML is done by animating properties of objects. Properties of type -real, int, color, rect, point, and size can all be animated. +real, int, color, rect, point, size, and vector3d can all be animated. -QML supports three different forms of animation - basic property animation, +QML supports three main forms of animation - basic property animation, transitions, and property behaviors. \tableofcontents @@ -71,7 +71,6 @@ Rectangle { x: 60-img.width/2 y: 0 y: SequentialAnimation { - running: true repeat: true NumberAnimation { to: 200-img.height; easing: "easeOutBounce"; duration: 2000 } PauseAnimation { duration: 1000 } @@ -84,8 +83,8 @@ Rectangle { \image propanim.gif When you assign an animation as a value source, you do not need to specify \c property -or \c target; they are automatically selected for you. You do, however, need to specify \c to, and explicitly -start the animation (usually via the \c running property). +or \c target; they are automatically selected for you. You do, however, need to specify \c to. +An animation specified as a value source will be \c running by default. \qml Rectangle { @@ -94,7 +93,7 @@ Rectangle { Rectangle { color: "red" width: 50; height: 50 - x: NumberAnimation { to: 50; running: true } + x: NumberAnimation { to: 50; } } } \endqml @@ -135,7 +134,7 @@ For example, a transition could describe how an item moves from its initial posi transitions: [ Transition { NumberAnimation { - matchProperties: "x,y" + properties: "x,y" easing: "easeOutBounce" duration: 200 } @@ -143,13 +142,38 @@ transitions: [ ] \endcode -As you can see from the above example, transitions make use of the same basic animation classes introduced -above. However, you generally use a different set of properties when working with transitions. In the example, -no \c target or \c property has been specified. Instead, we have specified \c matchProperties, -which (along with \c matchTargets) acts as a selector to determine which property changes to animate; -in this case, we will animate any x,y properties that have changed on any objects. +As can be seen, transitions make use of the same basic animation classes introduced above. +In the above example we have specified that we want to animate the \c x and \c y properties, but have not +specified the objects to animate or the \c to values. By default these values are supplied by the framework -- +the animation will animate any \c targets whose \c x and \c y have changed, and the \c to values will be those +defined in the end state. You can always supply explicit values to override these implicit values when needed. -QML transitions also have selectors to determine which state changes a transition should apply to: +\code +Transition { + from: "*" + to: "MyState" + reversible: true + SequentialAnimation { + NumberAnimation { + duration: 1000 + easing: "easeOutBounce" + // animate myItem's x and y if they have changed in the state + target: myItem + properties: "x,y" + } + NumberAnimation { + duration: 1000 + // animate myItem2's y to 200, regardless of what happens in the state + target: myItem2 + property: "y" + to: 200 + } + } +} +\endcode + +QML transitions have selectors to determine which state changes a transition should apply to. +The following transition will only be triggered when we enter into the \c "details" state. \code Transition { @@ -175,50 +199,24 @@ Transition { NumberAnimation { duration: 1000 easing: "easeOutBounce" - matchTargets: box1 - matchProperties: "x,y" + targets: box1 + properties: "x,y" } NumberAnimation { duration: 1000 - matchTargets: box2 - matchProperties: "x,y" + targets: box2 + properties: "x,y" } } } } \endcode -To insert an explicit animation into your transition, you can use \c target and \c property as normal. - -\code -Transition { - from: "*" - to: "MyState" - reversible: true - SequentialAnimation { - NumberAnimation { - duration: 1000 - easing: "easeOutBounce" - // animate myItem's x and y if they have changed in the state - matchTargets: myItem - matchProperties: "x,y" - } - NumberAnimation { - duration: 1000 - // animate myItem2's y to 200, regardless of what happens in the state - target: myItem2 - property: "y" - to: 200 - } - } -} -\endcode - \section1 Property Behaviors A \l{Behavior}{property behavior} specifies a default animation to run whenever the property's value changes, regardless -of what caused the change. Unlike Transition, \l Behavior doesn't provide a way to indicate that a Behavior -should only apply under certain circumstances. +of what caused the change. The \c enabled property can be used to force a \l Behavior +to only apply under certain circumstances. In the following snippet, we specify that we want the x position of redRect to be animated whenever it changes. The animation will last 300 milliseconds and use an InOutQuad easing curve. diff --git a/doc/src/declarative/elements.qdoc b/doc/src/declarative/elements.qdoc index 9bc44db..e3323c2 100644 --- a/doc/src/declarative/elements.qdoc +++ b/doc/src/declarative/elements.qdoc @@ -143,6 +143,7 @@ The following table lists the QML elements provided by the Qt Declarative module \o \l Repeater \o \l SystemPalette \o \l GraphicsObjectContainer +\o \l LayoutItem \endlist \header diff --git a/doc/src/declarative/focus.qdoc b/doc/src/declarative/focus.qdoc index 63df61c..bb9e1a4 100644 --- a/doc/src/declarative/focus.qdoc +++ b/doc/src/declarative/focus.qdoc @@ -326,7 +326,7 @@ which in turn gives \e {active focus} to the \c {Text} element that actually performs the work of handling the \e {Return} key. All of the QML view classes, such as \l PathView and \l GridView, behave -in a similar mannor to allow key handling in their respective delegates. +in a similar manner to allow key handling in their respective delegates. \section1 Focus Panels diff --git a/doc/src/declarative/integrating.qdoc b/doc/src/declarative/integrating.qdoc index b7f8b17..43ec33a 100644 --- a/doc/src/declarative/integrating.qdoc +++ b/doc/src/declarative/integrating.qdoc @@ -86,6 +86,15 @@ QGraphicsObject *object = scene->addItem(object); \endcode +The following QGraphicsView options are recommended for optimal performance +of QML UIs: + +\list +\o QGraphicsView::setOptimizationFlags(QGraphicsView::DontSavePainterState); +\o QGraphicsView::setViewportUpdateMode(QGraphicsView::BoundingRectViewportUpdate); +\o QGraphicsScene::setItemIndexMethod(QGraphicsScene::NoIndex); +\endlist + \section1 Using existing QGraphicsWidgets in QML Another way of integrating with a QGraphicsView based UI is to expose your existing QGraphicsWidgets to QML, and constructing your scene in QML. Note that diff --git a/doc/src/declarative/qmlstates.qdoc b/doc/src/declarative/qmlstates.qdoc index b178e718..867c714 100644 --- a/doc/src/declarative/qmlstates.qdoc +++ b/doc/src/declarative/qmlstates.qdoc @@ -108,7 +108,7 @@ For example, adding this code to the above \c {Item {}} element animates the tra \qml transitions: [ Transition { - NumberAnimation { matchProperties: "x,y"; duration: 500 } + NumberAnimation { properties: "x,y"; duration: 500 } } ] \endqml diff --git a/doc/src/declarative/qtbinding.qdoc b/doc/src/declarative/qtbinding.qdoc index 4909355..8b9909e 100644 --- a/doc/src/declarative/qtbinding.qdoc +++ b/doc/src/declarative/qtbinding.qdoc @@ -153,7 +153,7 @@ class CustomPalette : public QObject { Q_OBJECT Q_PROPERTY(QColor background READ background WRITE setBackground NOTIFY backgroundChanged) -Q_PROPERTY(QColor text READ text WRITE setText NOTIFY text) +Q_PROPERTY(QColor text READ text WRITE setText NOTIFY textChanged) public: CustomPalette() : m_background(Qt::white), m_text(Qt::black) {} @@ -172,6 +172,10 @@ public: emit textChanged(); } } +signals: + void textChanged(); + void backgroundChanged(): + private: QColor m_background; QColor m_text; @@ -358,5 +362,41 @@ void MyApplication::continueLoading() } } \endcode + +\section1 Qt Resources + +QML content can be loaded from \l {The Qt Resource System} using the \e qrc: URL scheme. +For example: + +\code +<!DOCTYPE RCC><RCC version="1.0"> +<qresource> + <file>main.qml</file> + <file>images/background.png</file> +</qresource> +</RCC> +\endcode +\code +// main.cpp +MyApplication::MyApplication() +{ + // ... + component = new QmlComponent(engine, QUrl("qrc:/main.qml")); + if (component->isError()) { + qWarning() << component->errors(); + } else { + QObject *myObject = component->create(); + } +} +\endcode +\code +// main.qml +import Qt 4.6 + +Image { + source: "images/background.png" +} +\endcode + */ |