Slide 1

QtQuick Training Course Meet QtQuick

Slide 2

What is Qt? Why use Qt? Who uses Qt? 1 QtQuick Meet QtQuick Objectives Creating the file Background Foreground elements Interactive animation Adding details 2 QML Building Example

Slide 3

1 QtQuick Topics 2 QML Building Example Meet QtQuick

Slide 4

QtQuick Meet QtQuick What is Qt? Why use Qt? Who uses Qt?

Slide 5

What is Qt? Meet QtQuick Cross-platform application framework Used for developing application software with a graphical user interface Code editor + visual editor

Slide 6

QtQuick Meet QtQuick What is Qt? Why use Qt? Who uses Qt?

Slide 7

Why use Qt? Meet QtQuick Drag and drop UI builder Fast and reusable prototyping Write code once for multiple platforms

Slide 8

Todays world Meet QtQuick vs. Visual Logical QML is not about code, but visual aspects. 111000 100100 101000

Slide 9

Todays UI creation workflow Meet QtQuick The designers idea Realized on targetProof of concept

Slide 10

Work together Meet QtQuick QtQuick DesignerQMLQt C++ It is needed to bring designers and developers closer together.

Slide 11

QtQuick framework Meet QtQuick Your application QML visual elements Rectangle, Image, Text, MouseArea, Flickable Declarative engine Interpreter FW, C++ Extension FW Qt + JavaScript Graphics FW, Animation FW, JavaScript FW QtQuic k

Slide 12

Whats so quick about it? Meet QtQuick Learn Quick to Iterate Quick to Render Quick to Extend Quick to

Slide 13

Enabling development of fluid UIs Meet QtQuick ElementsPositioningAnimationsStatesJavaScriptQt C++

Slide 14

QtQuick Meet QtQuick What is Qt? Why use Qt? Who uses Qt?

Slide 15

Meet QtQuick Adobe Photoshop ElementsAutodesk Maya

Slide 16

Who uses Qt? Meet QtQuick SkypeVLC Media Player

Slide 17

1 QtQuick Topics 2 QML Building Example Meet QtQuick

Slide 18

QML building example Meet QtQuick Example overview See video: videos/module-0/module-0.mov

Slide 19

Creating the file Meet QtQuick Set width and height to root component See example: examples/module-0/root.qml

Slide 20

Background Meet QtQuick Add a background image Set to fill its parent preserving its aspect ratio Use anti-aliasing smoothing See example: examples/module-0/background.qml

Slide 21

Foreground elements Meet QtQuick Add and center images with anti- aliasing smoothing See example: examples/module-0/blur.qml

Slide 22

Interactive animation Meet QtQuick Hide the blur Set key-triggered animation See example: examples/module-0/animate.qmlSee video: video/module-0/animate.mov

Slide 23

Adding details Meet QtQuick Smooth out the transitions See example: examples/module-0/module-0.qmlSee video: videos/module-0/module-0.mov

Slide 24

http://qt.nokia.com/qtquick/ Download and install the Qt SDK.

Slide 25

(c) 2011 Nokia Corporation and its Subsidiary(-ies). The enclosed Qt Training Materials are provided under the CreativeCommons Attribution ShareAlike 2.5 License Agreement. The full license text is available here:http://creativecommons.org/licenses/by- sa/2.5/legalcodehttp://creativecommons.org/licenses/by- sa/2.5/legalcode Nokia, Qt and the Nokia and Qt logos are the registered trademarks of Nokia Corporation in Finland and other countries worldwide.