Commit 16f7ed26 authored by Leena Miettinen's avatar Leena Miettinen Committed by Oswald Buddenhagen

Add Getting Started section with Creating an Animated Application section. Add screenshots.

parent 54eb2c63
......@@ -44,7 +44,11 @@
\o \l{Introducing Qt Creator}
\o \l{Operating Systems and Supported Platforms}
\o \l{Quick Tour}
\o \l{Writing a Simple Program}
\o \l{Getting Started}
\o \l{Writing a Simple Program}
\o \l{Creating an Animated Application}
\o \l{Using the Editor}
\o \l{Finding and Replacing}
......@@ -233,7 +237,7 @@
\contentspage index.html
\previouspage creator-os-supported-platforms.html
\page creator-quick-tour.html
\nextpage creator-writing-program.html
\nextpage creator-getting-started.html
\title Quick Tour
......@@ -476,8 +480,8 @@
\o \gui {Navigator} pane displays the items on the screen. You can change
the order of items in the list to change their order on the screen.
\o \gui {Navigator} pane displays the items in the scene. You can
show and hide items to focus on specific parts of the application.
\o \gui {Library} pane displays lists of predefined \gui {Items} and
imported \gui {Resources} that you can use to design applications. The
......@@ -499,7 +503,7 @@
\contentspage index.html
\previouspage creator-writing-program.html
\previouspage creator-qml-application.html
\page creator-editor-using.html
\nextpage creator-editor-finding.html
......@@ -1270,9 +1274,205 @@
\contentspage index.html
\previouspage creator-quick-tour.html
\page creator-writing-program.html
\page creator-getting-started.html
\nextpage creator-writing-program.html
\title Getting Started
This section contains examples that illustrate how to use Qt Creator and the
integrated design tools, \QD and \QMLD, to create simple applications:
\o \l{Writing a Simple Program}
\o \l{Creating an Animated Application}
\contentspage index.html
\previouspage creator-writing-program.html
\page creator-qml-application.html
\nextpage creator-editor-using.html
\title Creating an Animated Application
\note This tutorial assumes that you are familiar with the QML declarative
This tutorial describes how to use Qt Creator to create a small animated
Qt application, Hello World.
\image qmldesigner-helloworld.png "Hello World"
\section1 Creating the Hello World Project
\note Create the project with the \gui{Help} mode active so that you can follow
these instructions while you work.
\list 1
\o Select \gui{File > New File or Project > QML Project > QML Application > OK}.
\image qmldesigner-new-project.png "New File or Project dialog"
The \gui{Introduction and Project Location} dialog opens.
\image qmldesigner-new-project-location.png "Introduction and Project Location dialog"
\o In the \gui{Name} field, type \bold {Hello World}.
\o In the \gui {Create in} field, enter the path for the project files. For example,
\c {C:\Qt\examples}, and then click \gui{Next}.
The \gui{Project Management} dialog opens.
\image qmldesigner-new-project-summary.png "Project Management dialog"
\o Review the project settings, and click \gui{Finish} to create the project.
The HelloWorld project now contains the following files:
\o HelloWorld.qmlproject
\o HelloWorld.qml
\image qmldesigner-new-project-contents.png "HelloWorld project contents"
The .qmlproject file defines that all QML, JavaScript, and image files in
the project folder belong to the project. The .qml file contains some example
code that specifies the screen size (200x200) and a label that contains
the text \bold {Hello World}.
\section1 Designing the User Interface
\o In the \gui{Editor} mode, double-click the HelloWorld.qml file in
the \gui{Projects} pane to open it in the code editor.
\o To set the screen size to that of some Symbian devices in portrait
mode, for example, change the \c height to \bold 240 and \c width to \bold 320.
\o Click \gui{Design} to design the UI in the visual \QMLD editor.
\o Drag and drop a \gui {Rectangle} from the \gui {Library} pane to the
\image qmldesigner-helloworld-widget-add.png "Add widget to Hello World"
\o Edit the \gui {Properties} of the item to turn it into a red ball:
\o In the \gui {Advanced} tab, click the color picker to select a red
\o In the \gui {Radius} field, use the slider to set the radius value
to \bold 50.
\image qmldesigner-helloworld-widget-edit.png "Edit the widget"
\o To create a blue ball, press \key {Ctrl+C} and \key {Ctrl+V} to copy
and paste the red one, and then change its color to blue.
\image qmldesigner-helloworld-base-state.png "Hello World first view"
The first view of your application is now ready.
\note You can use graphical design tools to create nice images and
copy them to the projects folder to display them in the \gui {Library}
pane in \gui {Resources}.
\o In the \gui State pane, click the plus sign to add another view, or \e state
to the application.
\o Modify the state by dragging and dropping the widgets to switch their
\image qmldesigner-helloworld-state1.png "Hello World second view"
\section1 Animating the Scene
Animate the scene so that the widgets appear to switch places
on the screen.
\list 1
\o Click \gui {Edit} to open HelloWorld.qml in the code editor.
\o Add the following code to create a transition:
transitions: [
Transition {
NumberAnimation { properties: "x, y"; duration: 500 }
\note The code editor completes the code for you as you type.
\o Click the \inlineimage qtcreator-run.png
button to check that the application can be built and run.
\section1 Adding Interaction
Add interaction to the scene to allow users to click on the screen to start
the animation.
\list 1
\o Click \gui{Design} to open HelloWorld.qml in the visual editor.
\o Drag and drop a \gui {Mouse Area} from the \gui {Library} to the scene.
\o In the \gui {Properties} pane, \gui {Anchor} tab, click the
\inlineimage qmldesigner-anchor-fill-screen.png
button to make the mouse region cover the whole screen.
\o In the code editor, use data binding to add a \c when statement to
the states sections, as illustrated by the following code:
states: [
State {
name: "State1"
when: mousearea1.pressed
\section1 Buiding and Running the Application
\list 1
\o Press \key {Ctrl+R} to build and run the application.
\o Click the screen and keep the mouse button pressed down to run the
\contentspage index.html
\previouspage creator-getting-started.html
\page creator-writing-program.html
\nextpage creator-qml-application.html
\title Writing a Simple Program
\note This tutorial assumes that you have experience in writing basic Qt
......@@ -1302,7 +1502,7 @@
\o Select \gui{File > New File or Project > Qt Application Project > Qt Gui
Application > OK}.
\image qtcreator-new-project.png "New File or Project" dialog
\image qtcreator-new-project.png "New File or Project dialog"
The \gui{Introduction and Project Location} dialog opens.
......@@ -1322,7 +1522,7 @@
The \gui{Class Information} dialog opens.
\image qtcreator-class-info.png "Class Information" dialog
\image qtcreator-class-info.png "Class Information dialog"
\o In the \gui{Class Name} field, type \bold {TextFinder} as the class name.
......@@ -1336,7 +1536,7 @@
The \gui{Project Management} dialog opens.
\image qtcreator-new-project-summary.png "Project Mangement" dialog
\image qtcreator-new-project-summary.png "Project Management dialog"
\o Review the project settings, and click \gui{Finish} to create the project.
......@@ -1529,6 +1729,7 @@
\contentspage index.html
\previouspage creator-debugging.html
\page creator-version-control.html
\nextpage adding-plugins.html
\title Using Version Control Systems
......@@ -3289,7 +3490,9 @@
\contentspage index.html
\previouspage creator-version-control.html
\page adding-plugins.html
\nextpage creator-tips.html
\title Adding Qt Designer Plugins
......@@ -3342,6 +3545,7 @@
\contentspage index.html
\previouspage adding-plugins.html
\page creator-tips.html
\nextpage creator-keyboard-shortcuts.html
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