summaryrefslogtreecommitdiffstats
path: root/doc/src/declarative/tutorial.qdoc
diff options
context:
space:
mode:
authorBea Lam <bea.lam@nokia.com>2010-05-04 23:50:53 (GMT)
committerBea Lam <bea.lam@nokia.com>2010-05-05 02:54:01 (GMT)
commitdcee637a9f7a024803f0e5cc1bf57d878dca2ac3 (patch)
tree212950e45a79aeffc0a22492093f6531676739d2 /doc/src/declarative/tutorial.qdoc
parent4982b883c31874206aaa05268852fbcee81a8a39 (diff)
downloadQt-dcee637a9f7a024803f0e5cc1bf57d878dca2ac3.zip
Qt-dcee637a9f7a024803f0e5cc1bf57d878dca2ac3.tar.gz
Qt-dcee637a9f7a024803f0e5cc1bf57d878dca2ac3.tar.bz2
Doc improvements, simplify example code
Diffstat (limited to 'doc/src/declarative/tutorial.qdoc')
-rw-r--r--doc/src/declarative/tutorial.qdoc15
1 files changed, 8 insertions, 7 deletions
diff --git a/doc/src/declarative/tutorial.qdoc b/doc/src/declarative/tutorial.qdoc
index 1a93d05..4cfb999 100644
--- a/doc/src/declarative/tutorial.qdoc
+++ b/doc/src/declarative/tutorial.qdoc
@@ -86,7 +86,7 @@ Here is the QML code for the application:
\section2 Import
First, we need to import the types that we need for this example. Most QML files will import the built-in QML
-types (like \l{Rectangle}, \l{Image}, ...) that come with Qt with:
+types (like \l{Rectangle}, \l{Image}, ...) that come with Qt, using:
\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 3
@@ -95,7 +95,7 @@ types (like \l{Rectangle}, \l{Image}, ...) that come with Qt with:
\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 1
We declare a root element of type \l{Rectangle}. It is one of the basic building blocks you can use to create an application in QML.
-We give it an \c{id} to be able to refer to it later. In this case, we call it \e page.
+We give it an \c{id} to be able to refer to it later. In this case, we call it "page".
We also set the \c width, \c height and \c color properties.
The \l{Rectangle} element contains many other properties (such as \c x and \c y), but these are left at their default values.
@@ -103,15 +103,16 @@ The \l{Rectangle} element contains many other properties (such as \c x and \c y)
\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 2
-We add a \l Text element as a child of our root element that will display the text 'Hello world!'.
+We add a \l Text element as a child of the root Rectangle element that displays the text 'Hello world!'.
The \c y property is used to position the text vertically at 30 pixels from the top of its parent.
-The \c font.pointSize and \c font.bold properties are related to fonts and use the \l{dot properties}{dot notation}.
-
The \c anchors.horizontalCenter property refers to the horizontal center of an element.
In this case, we specify that our text element should be horizontally centered in the \e page element (see \l{anchor-layout}{Anchor-based Layout}).
+The \c font.pointSize and \c font.bold properties are related to fonts and use the \l{dot properties}{dot notation}.
+
+
\section2 Viewing the example
To view what you have created, run the \l{Qt Declarative UI Runtime}{qml} tool (located in the \c bin directory) with your filename as the first argument.
@@ -134,10 +135,10 @@ This chapter adds a color picker to change the color of the text.
\image declarative-tutorial2.png
Our color picker is made of six cells with different colors.
-To avoid writing the same code multiple times, we first create a new \c Cell component.
+To avoid writing the same code multiple times for each cell, we create a new \c Cell component.
A component provides a way of defining a new type that we can re-use in other QML files.
A QML component is like a black-box and interacts with the outside world through properties, signals and slots and is generally
-defined in its own QML file (for more details, see \l {Defining new Components}).
+defined in its own QML file. (For more details, see \l {Defining new Components}).
The component's filename must always start with a capital letter.
Here is the QML code for \c Cell.qml: