diff options
author | A-Team <ateam@pad.test.qt.nokia.com> | 2010-09-16 22:00:18 (GMT) |
---|---|---|
committer | A-Team <ateam@pad.test.qt.nokia.com> | 2010-09-16 22:00:18 (GMT) |
commit | 0f71215693713fef4fd9dabeae8e6a574deff415 (patch) | |
tree | 27d8a11e29f87813df5cbb644389cbfdfebc1abb /doc/src/getting-started | |
parent | acab3259e9f57e436f475b4c0d1d7e7fb194e983 (diff) | |
parent | fc007d0a99cc52e673c5d2606e5076831f6103b1 (diff) | |
download | Qt-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.qdoc | 54 |
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 |