Commit cbaa4fc9 authored by Leena Miettinen's avatar Leena Miettinen

Doc: update tutorial

Task-number: QTCREATORBUG-3092

Reviewed-by: Thomas Hartmann
Reviewed-by: Carsten Owerfeldt
parent c3e80d05
doc/images/qmldesigner-tutorial.png

22.5 KB | W: | H:

doc/images/qmldesigner-tutorial.png

18.8 KB | W: | H:

doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -3904,13 +3904,13 @@
\note To complete this tutorial, you must have Qt 4.7 or later installed.
This tutorial uses basic elements and illustrates basic concepts of the
\l {http://doc.qt.nokia.com/4.7/qtquick.html}{QML declarative language}.
This tutorial uses basic elements and illustrates basic concepts of
\l {http://doc.qt.nokia.com/4.7/qtquick.html}{Qt Quick}.
This tutorial describes how to use the Qt Creator to implement the
\l{http://doc.qt.nokia.com/4.7-snapshot/declarative-animation-states.html}
{states and transitions example application}. The example application displays a user
icon that moves between three rectangles on the page when you click them.
{states and transitions example application}. The example application displays a
Qt logo that moves between three rectangles on the page when you click them.
\image qmldesigner-tutorial.png "States and transitions example"
......@@ -3963,19 +3963,27 @@
\o In the \gui Id field, enter \e page, to be able to reference the rectangle
from other places.
\o In the \gui Size field, set \gui W to 640 and \gui H to 480.
\o In the \gui Colors tab, \gui Rectangle field, set the color to #343434.
\endlist
\o Drag and drop user.png from \gui Resources to the canvas.
\o In the \gui Library view, \gui Resources tab, select states.png and
drag and drop it to the canvas.
\image qmldesigner-tutorial-user-icon.png "Image properties"
\list a
\o In the \gui Id field, enter \e icon.
\o In the \gui Id field, enter \e userIcon.
\o In the \gui Position field, set \gui X to 10 and \gui Y to 20.
\image qmldesigner-tutorial-user-icon.png "User icon properties"
\endlist
\o Drag and drop a \gui Rectangle element to the canvas, and edit its properties.
\o In the \gui Library view, \gui Items tab, select \gui Rectangle,
drag and drop it to the canvas, and edit its properties.
\image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
......@@ -3995,6 +4003,11 @@
\o In the \gui Rectangle tab, \gui Border field, set the border width to
1.
\note If the \gui Border field does not appear after you set the border
color, try setting the border color to solid by clicking the
\inlineimage qmldesigner-solid-color-button.png
button.
\o In the \gui Radius field, select 6 to create rounded corners for the
rectangle.
......@@ -4003,12 +4016,16 @@
\image qmldesigner-tutorial-topleftrect-layout.png "Layout tab"
\o In the \gui Margin field for the top anchor, select 20.
\o In the \gui Margin field, select 20 for the top anchor and 10 for
the left anchor.
\endlist
\o Drag and drop a \gui {Mouse Area} element on top of the rectangle,
and edit its properties:
\o In the \gui Navigator pane, drag and drop the \gui {Mouse Area} element from
\e page to \e topLeftRect to make it apply only to the rectangle and not to the whole
page.
\o Edit \gui {Mouse Area} properties:
\list a
......@@ -4016,13 +4033,12 @@
\inlineimage qmldesigner-anchor-fill-screen.png
button to anchor the mouse area to the rectangle.
\o In the code editor, add a pointer to a clicked expression to the mouse
\o In the code editor, edit the pointer to the clicked expression in the mouse
area element, as illustrated by the following code snippet:
\code
MouseArea {
id: mouse_area1
anchors.fill: parent
onClicked: page.state = ''
}
......@@ -4034,23 +4050,8 @@
\endlist
\o To make sure that the user icon appears within the rectangle even if the screen
size changes, you can anchor the icon to the x and y coordinates of the rectangle:
\list a
\o In the \gui Navigator, select userIcon.
\o In the \gui Geometry tab, \gui {Position X} field, open the menu and select
\gui {Set Expression}.
\o Enter the following expression: \c {topLeftRect.x}
\o In the \gui Y field, set the following expression: \c {topLeftRect.y}
\endlist
\o Copy topLeftRect (by pressing \key {Ctrl+C}) and paste it to the canvas twice
\o In the \gui Navigator pane, copy topLeftRect (by pressing \key {Ctrl+C}) and
paste it to the canvas twice
(by pressing \key {Ctrl+V}). Qt Creator renames the new instances of the element
topLeftRect1 and topLeftRect2.
......@@ -4063,7 +4064,10 @@
\o In \gui {Layout}, select the right and vertical center anchor buttons to
anchor the rectangle to the middle right margin of the screen.
\o In the code editor, modify the pointer to the clicked expression in the
\o In the \gui Margin field, select 10 for the right anchor and 0 for
the vertical center anchor.
\o In the code editor,add a pointer to a clicked expression to the
mouse area element. The following expression sets the state to \e State1:
\c {onClicked: page.state = 'State1'}
......@@ -4081,7 +4085,10 @@
\o In \gui {Layout}, select the bottom and left anchor buttons to
anchor the rectangle to the bottom left margin of the screen.
\o In the code editor, modify the pointer to a clicked expression in the
\o In the \gui Margin field, select 20 for the bottom anchor and 10 for
the left anchor.
\o In the code editor, add a pointer to a clicked expression to the
mouse area element. The following expression sets the state to \e State2:
\c {onClicked: page.state = 'State2'}
......@@ -4090,13 +4097,15 @@
\endlist
\o Press \key {Ctrl+S} to save the changes.
\o Press \key {Ctrl+R} to run the application in the QML Viewer.
\endlist
\image qmldesigner-tutorial.png "States and transitions example"
You should see the user icon in the top left rectangle, and two additional
You should see the Qt logo in the top left rectangle, and two additional
rectangles in the center right and bottom left of the screen.
You can now create additional states to add views to the application.
......@@ -4110,31 +4119,31 @@
\o Click the empty slot in the \gui States pane to create State1.
\o Drag and drop the user icon on top of middleRightRect.
\o Drag and drop the Qt logo on top of middleRightRect.
\image qmldesigner-tutorial-state1.png "State 1"
\o Click the empty slot in the \gui States pane to create State2.
\o Drag and drop the user icon on top of bottomLeftRect.
\o Drag and drop the Qt logo on top of bottomLeftRect.
\o Press \key {Ctrl+R} to run the application in the QML Viewer.
\endlist
Click the rectangles to move the user icon from one rectangle to another.
Click the rectangles to move the Qt logo from one rectangle to another.
\section1 Adding Animation to the View
Add transitions to define how the properties change when the user icon moves
between states. The transitions apply animations to the user icon. For example,
the user icon bounces back when it moves to the middleRightRect and eases into
Add transitions to define how the properties change when the Qt logo moves
between states. The transitions apply animations to the Qt logo. For example,
the Qt logo bounces back when it moves to the middleRightRect and eases into
bottomLeftRect. Add the transitions in the code editor.
\list 1
\o In the code editor, add the following code to specify that when moving to
State1, the x and y coordinates of the user icon change linearly over a duration
State1, the x and y coordinates of the Qt logo change linearly over a duration
of 1 second:
\code
......@@ -4155,9 +4164,9 @@
\list a
\o Select NumberAnimation and click
\o Click \gui NumberAnimation in the code editor to display the
\inlineimage qml-toolbar-indicator.png
to open the toolbar:
icon, and then click the icon to open the toolbar:
\image qmldesigner-tutorial-quick-toolbar.png "Qt Quick toolbar for animation"
......@@ -4168,7 +4177,7 @@
\endlist
\o Add the following code to specify that when moving to State2, the x and y
coordinates of the user icon change over a duration of 2 seconds,
coordinates of the Qt logo change over a duration of 2 seconds,
and an InOutQuad easing function is used:
\code
......@@ -4185,7 +4194,7 @@
\endcode
\o Add the following code to specify that for any other state changes, the x
and y coordinates of the user icon change linearly over a duration of 200
and y coordinates of the Qt logo change linearly over a duration of 200
milliseconds:
\code
......@@ -4196,6 +4205,7 @@
duration: 200
}
}
]
\endcode
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment