diff options
Diffstat (limited to 'doc/src/declarative/qml-intro.qdoc')
-rw-r--r-- | doc/src/declarative/qml-intro.qdoc | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/doc/src/declarative/qml-intro.qdoc b/doc/src/declarative/qml-intro.qdoc index 13c8e4f..63d6825 100644 --- a/doc/src/declarative/qml-intro.qdoc +++ b/doc/src/declarative/qml-intro.qdoc @@ -47,7 +47,7 @@ Javascript is easier to learn than C++ and can be embedded into the QML files or imported from a separate file. \bold{In QML the types of various 'objects' are referred to as \l {QML -Elements}{ elements}}. +Elements}{elements}}. An element usually has various \e properties that help define the element. For example, if we created an element called Circle then the radius of the circle @@ -56,7 +56,7 @@ would be a property. \section1 A First Look -The basic syntax of an \l {QML Elements}{element} is +The basic syntax of an \l{QML Elements}{element} is \snippet doc/src/snippets/declarative/qml-intro/basic-syntax.qml basic syntax @@ -82,7 +82,7 @@ want a rectangle that is 500 pixels by 400 pixels in the x and y directions We can implement this \l Rectangle with these properties this way -\quotefile doc/src/snippets/declarative/qml-intro/rectangle.qml +\snippet doc/src/snippets/declarative/qml-intro/rectangle.qml document This is a valid QML script. To run it, copy it and save it to a file, say myexample.qml, and on the command line run the following command: @@ -113,7 +113,7 @@ Text is handled by a different element called \l Text. We need to create a property to "Hello World!". So to set the text to "Hello world" and the background colour to light gray, -\quotefile doc/src/snippets/declarative/qml-intro/hello-world1.qml +\snippet doc/src/snippets/declarative/qml-intro/hello-world1.qml document \section1 Hello World Again @@ -172,7 +172,7 @@ text, also make it 150 by 150 pixels in size, Adding the Hello World example, with the text and the image example we can write a simple piece of QML that starts to look a bit better. -\quotefile doc/src/snippets/declarative/qml-intro/hello-world5.qml +\snippet doc/src/snippets/declarative/qml-intro/hello-world5.qml document The result is still quite simple @@ -203,7 +203,7 @@ If we want to position an image at the bottom of the rectangle it is inside. I have to specify that the bottom of the image is also at the bottom of the rectangle -\quotefile doc/src/snippets/declarative/qml-intro/anchors1.qml +\snippet doc/src/snippets/declarative/qml-intro/anchors1.qml document This places the logo at the bottom left of the window. @@ -222,7 +222,7 @@ the bottomMargin property is used. So the new actions for the script are Encoded into QML the script becomes -\quotefile doc/src/snippets/declarative/qml-intro/anchors2.qml +\snippet doc/src/snippets/declarative/qml-intro/anchors2.qml document Run this and resize the window. You will see that now the position of the image adjusts during the resize. @@ -282,7 +282,7 @@ vertically by a factor of 1.5 and by 1.2 horizontally. Using the example above as the basis for this we have, -\quotefile doc/src/snippets/declarative/qml-intro/transformations1.qml +\snippet doc/src/snippets/declarative/qml-intro/transformations1.qml document The code block in \c image1 starting with \c transform specifies that the \l {Item::transform}{transform} property will be a Rotation through -90 @@ -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/qml-intro/number-animation1.qml +\snippet doc/src/snippets/declarative/qml-intro/number-animation1.qml document 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/qml-intro/number-animation2.qml +\snippet doc/src/snippets/declarative/qml-intro/number-animation2.qml document 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/qml-intro/sequential-animation1.qml +\snippet doc/src/snippets/declarative/qml-intro/sequential-animation1.qml document 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 @@ -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/qml-intro/sequential-animation3.qml +\snippet doc/src/snippets/declarative/qml-intro/sequential-animation3.qml document 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 @@ -468,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/qml-intro/states1.qml +\snippet doc/src/snippets/declarative/qml-intro/states1.qml document 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 |