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?
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.