1. QtQuick Training Course Meet QtQuick

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

3. 1 QtQuick Topics 2 QML Building Example Meet QtQuick

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

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

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

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

8. Today’s world Meet QtQuick vs. Visual Logical QML is not about code, but visual aspects. 111000 100100 101000

9. Today’s UI creation workflow Meet QtQuick The designer’s idea Realized on targetProof of concept

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

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

12. What’s so quick about it? Meet QtQuick Learn Quick to Iterate Quick to Render Quick to Extend Quick to

13. Enabling development of fluid UIs Meet QtQuick ElementsPositioningAnimationsStatesJavaScriptQt C++

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

15. Meet QtQuick Adobe Photoshop ElementsAutodesk Maya

16. Who uses Qt? Meet QtQuick SkypeVLC Media Player

17. 1 QtQuick Topics 2 QML Building Example Meet QtQuick

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

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

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

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

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

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

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

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.