summaryrefslogtreecommitdiffstats
path: root/doc/src/getting-started
diff options
context:
space:
mode:
authorA-Team <ateam@pad.test.qt.nokia.com>2010-09-16 22:00:18 (GMT)
committerA-Team <ateam@pad.test.qt.nokia.com>2010-09-16 22:00:18 (GMT)
commit0f71215693713fef4fd9dabeae8e6a574deff415 (patch)
tree27d8a11e29f87813df5cbb644389cbfdfebc1abb /doc/src/getting-started
parentacab3259e9f57e436f475b4c0d1d7e7fb194e983 (diff)
parentfc007d0a99cc52e673c5d2606e5076831f6103b1 (diff)
downloadQt-0f71215693713fef4fd9dabeae8e6a574deff415.zip
Qt-0f71215693713fef4fd9dabeae8e6a574deff415.tar.gz
Qt-0f71215693713fef4fd9dabeae8e6a574deff415.tar.bz2
Merge branch '4.7-upstream' into 4.7-doc
Diffstat (limited to 'doc/src/getting-started')
-rw-r--r--doc/src/getting-started/gettingstartedqml.qdoc54
1 files changed, 6 insertions, 48 deletions
diff --git a/doc/src/getting-started/gettingstartedqml.qdoc b/doc/src/getting-started/gettingstartedqml.qdoc
index 6cef316..a5e45d9 100644
--- a/doc/src/getting-started/gettingstartedqml.qdoc
+++ b/doc/src/getting-started/gettingstartedqml.qdoc
@@ -71,20 +71,7 @@
In QML, the basic visual item is the \l {Rectangle}{Rectangle} element. The
\c Rectangle element has properties to control the element's appearance and location.
- \code
- import Qt 4.7
- Rectangle {
- id: simplebutton
- color: "grey"
- width: 150; height: 75
-
- Text{
- id: buttonLabel
- anchors.centerIn: parent
- text: "button label"
- }
- }
- \endcode
+ \snippet examples/tutorials/gettingStarted/gsQml/part0/Button.qml document
First, the \c { import Qt 4.7 } allows the qmlviewer tool to import the QML elements
we will later use. This line must exist for every QML file. Notice that the version
@@ -422,7 +409,7 @@
focus: true
wrapMode: TextEdit.Wrap
-
+
onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
}
\endcode
@@ -446,7 +433,7 @@
contentY = r.y+r.height-height;
}
\endcode
-
+
\section2 Combining Components for the Text Editor
We are now ready to create the layout of our text editor using QML. The text
@@ -464,7 +451,7 @@
//the screen is partitioned into the MenuBar and TextArea. 1/3 of the screen is assigned to the MenuBar
property int partition: height/3
-
+
MenuBar{
id:menuBar
height: partition
@@ -543,27 +530,7 @@
the \c drawer, and the drawer's icon will undergo property changes to meet the
current state.
- \code
-
- states:[
- State{
- name: "DRAWER_OPEN"
- PropertyChanges { target: menuBar; y:0}
- PropertyChanges { target: textArea; y: partition + drawer.height}
- PropertyChanges { target: drawer; y: partition}
- PropertyChanges { target: arrowIcon; rotation: 180}
- },
- State{
- name: "DRAWER_CLOSED"
- PropertyChanges { target: menuBar; y:-partition}
- PropertyChanges { target: textArea; y: drawer.height; height: screen.height - drawer.height}
- PropertyChanges { target: drawer; y: 0}
- PropertyChanges { target: arrowIcon; rotation: 0}
- }
-
- ]
-
- \endcode
+ \snippet examples/tutorials/gettingStarted/gsQml/texteditor.qml states
State changes are abrupt and needs smoother transitions. Transitions between states
are defined using the \l {Transition}{Transition} element, which can then bind to
@@ -582,16 +549,7 @@
the end of the animation. Pleae read \l {qdeclarativeanimation.html}{QML's Animation}
article.
- \code
- transitions: [
- Transition{
- to: "*"
- NumberAnimation { target: textArea; properties: "y, height"; duration: 100; easing.type: Easing.OutQuint }
- NumberAnimation { target: menuBar; properties: "y"; duration: 100;easing.type: Easing.OutQuint }
- NumberAnimation { target: drawer; properties: "y"; duration: 100;easing.type: Easing.OutQuint }
- }
- ]
- \endcode
+ \snippet examples/tutorials/gettingStarted/gsQml/texteditor.qml transitions
Another way of animating property changes is by declaring a \l {Behavior}{Behavior}
element. A transition only works during state changes and \c Behavior can set an