diff options
Diffstat (limited to 'doc/src/declarative')
| -rw-r--r-- | doc/src/declarative/qml-intro.qdoc | 38 |
1 files changed, 12 insertions, 26 deletions
diff --git a/doc/src/declarative/qml-intro.qdoc b/doc/src/declarative/qml-intro.qdoc index 69dd500..13c8e4f 100644 --- a/doc/src/declarative/qml-intro.qdoc +++ b/doc/src/declarative/qml-intro.qdoc @@ -320,7 +320,7 @@ from \l Item. The rotation property is a real number that specifies the angle in a clockwise direction for the rotation of the object. Here is the code for our animated rotating image. -\quotefile doc/src/snippets/declarative/number-animation1.qml +\quotefile doc/src/snippets/declarative/qml-intro/number-animation1.qml The \c {transformOrigin: Item.Center} is redundant since this is the default axis of rotation anyway. But if you change \c Center to \c BottomRight you @@ -333,7 +333,7 @@ combination. For example, if the task had been to animate the rotation about the y-axis passing through the center of the image then the following code would do it. -\quotefile doc/src/snippets/declarative/number-animation2.qml +\quotefile doc/src/snippets/declarative/qml-intro/number-animation2.qml Here there is a rectangle 600 by 400 pixels. Placed within that rectangle is an image 100 by 100 pixels. It is rotated about the center of the image @@ -362,7 +362,7 @@ will be animating the position and the size of the image. First create two images -\quotefile doc/src/snippets/declarative/sequential-animation1.qml +\quotefile doc/src/snippets/declarative/qml-intro/sequential-animation1.qml We will add to 'image1' a SequentialAnimation from x = 20 to the target of x = 450. The 'from' values will be used because we will be repeating the @@ -375,7 +375,7 @@ between the x values and over a given duration. After the NumberAnimation there will be a PauseAnimation that will pause the animation for 500 milliseconds (half a second) simply for the visual effect. -\snippet doc/src/snippets/declarative/sequential-animation2.qml adding a sequential animation +\snippet doc/src/snippets/declarative/qml-intro/sequential-animation2.qml adding a sequential animation A similar block of code is written for the animation of the 'y' value of the position. @@ -390,7 +390,7 @@ and image1 to 1 and image2 to 2 then image2 will be in the foreground and image1 in the background. When image1 passes image2 it will pass behind it. The completed code looks like -\quotefile doc/src/snippets/declarative/sequential-animation3.qml +\quotefile doc/src/snippets/declarative/qml-intro/sequential-animation3.qml The \c {easing.type} has many options, expressed as a string. It specifies the kind of equation that describes the acceleration of the property value, not @@ -439,9 +439,6 @@ delivers some of the best examples that illustrate these new elements. \endtable - - - \section1 Using States A state is a defined set of values in the configuration of an object and @@ -471,7 +468,7 @@ will be the default state. We will just go to 'night' by clicking and holding the left mouse button down, releasing the mouse button will reverse the process -\quotefile doc/src/snippets/declarative/states1.qml +\quotefile doc/src/snippets/declarative/qml-intro/states1.qml Several new things appear in this sample. Firstly, we use a \l MouseArea element to detect mouse clicks in the \e mainRectangle. Secondly, we use @@ -549,15 +546,15 @@ needle_shadow have the same default \e x and \e y values but the rotation origin for the needle is slightly different so that a shadow will be evident as the needle moves. -\snippet ../../examples/declarative/ui-components/dialcontrol/content/Dial.qml needle_shadow +\snippet examples/declarative/ui-components/dialcontrol/content/Dial.qml needle_shadow And the needle -\snippet ../../examples/declarative/ui-components/dialcontrol/content/Dial.qml needle +\snippet examples/declarative/ui-components/dialcontrol/content/Dial.qml needle The final image is the overlay which simply has a position defined. -\snippet ../../examples/declarative/ui-components/dialcontrol/content/Dial.qml overlay +\snippet examples/declarative/ui-components/dialcontrol/content/Dial.qml overlay \e {dialcontrol.qml} in the \e {examples/declarative/ui-components/dialcontrol} directory is the main file of the example. It defines the visual environment that the Dial @@ -565,17 +562,14 @@ will fit into. Because the \e Dial component and the images live in the \e content sub-directory we will have to import this into \e dialcontrol.qml. So the start of the file looks like - \code - import Qt 4.7 - import "content" - \endcode +\snippet examples/declarative/ui-components/dialcontrol/dialcontrol.qml imports The visual space is bound by a 300 by 300 pixel \l Rectangle which is given a gray color. Inside this rectangle is our component \e Dial and a \l Rectangle. Inside the rectangle called 'container' is another rectangle with the interesting name 'slider'. -\snippet ../../examples/declarative/ui-components/dialcontrol/dialcontrol.qml 0 +\snippet examples/declarative/ui-components/dialcontrol/dialcontrol.qml 0 The Dial component, named 'dial, is \e anchored to the center of the main rectangle. The \c value attribute of 'dial' is set to a value based on the @@ -584,15 +578,7 @@ rectangle. The \c value attribute of 'dial' is set to a value based on the the rotation of the needle image. Notice this piece of code in Dial where the change in \c value modifies the position of the needle. - \code - angle: Math.min(Math.max(-130, root.value*2.6 - 130), 133) - Behavior on angle { - SpringAnimation { - spring: 1.4 - damping: .15 - } - } - \endcode +\snippet examples/declarative/ui-components/dialcontrol/Dial.qml needle angle This is part of the \c needleRotation that rotates the needle and causes the rotation of its shadow. \l SpringAnimation is an element that modifies the value |