Qt Quick Tutorial: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
=Qt Quick Tutorial=
[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::Tutorial]]<br />[toc align_right=&quot;yes&amp;quot; depth=&quot;3&amp;quot;]


==Motivation==
= Qt Quick Tutorial =


Qt Quick has been released with Qt 4.7. Companies use it to build user interfaces (UIs) for set-top boxes, tablet devices, in-vehicle infotainment systems, e-readers or mobile phones. Many more companies are seriously evaluating Qt Quick. Such an interest is quite amazing for a new and unproven technology, so Qt Quick must have hit a nerve – or actually a couple of nerves.
== Motivation ==


Qt Quick provides a declarative language called <span class="caps">QML</span> (Qt Meta-object Language) for the design and implementation of UIs. <span class="caps">QML</span> is based on [http://en.wikipedia.org/wiki/CSS <span class="caps">CSS</span>] ''[en.wikipedia.org]'' and [http://en.wikipedia.org/wiki/JavaScript JavaScript] ''[en.wikipedia.org]''. Large parts of <span class="caps">QML</span> code are just <span class="caps">CSS</span>-style name-value pairs of properties (e.g., ''color: “red”''). The rest, typically the behavioral parts like the response to a mouse click, is written in JavaScript. Thanks to its similarity to <span class="caps">CSS</span> and JavaScript and its simplicity, <span class="caps">QML</span> is easily picked up by web and Flash developers, and it is a no-brainer for Qt/C++, C and Java developers. Despite its simplicity, Qt Quick makes it easy to write the kind of fluid UIs popularized by Apple’s iPhone.
Qt Quick has been released with Qt 4.7. Companies use it to build user interfaces (UIs) for set-top boxes, tablet devices, in-vehicle infotainment systems, e-readers or mobile phones. Many more companies are seriously evaluating Qt Quick. Such an interest is quite amazing for a new and unproven technology, so Qt Quick must have hit a nerve - or actually a couple of nerves.


Quite honestly, Qt Quick empowers teams to develop applications boasting the best possible interactivity with the best possible functionality. This is all due to a very simplified development process beginning with UI designers getting access to Qt Quick through Quick Designer: a visual design tool for <span class="caps">QML</span> applications which closes the gap between UI designers and developers because it facilitates communication via one common medium. The medium I am referring to is, of course, <span class="caps">QML</span> code. So essentially, the designers create a UI and the developers add the functionality to that UI while having the ability to maintain close interaction with the designers. This also gives developers and designers the opportunity to work side-by-side during the entire development process toward enhancing the UI and adding killer features to the application.
Qt Quick provides a declarative language called QML (Qt Meta-object Language) for the design and implementation of UIs. QML is based on &quot;CSS&amp;quot;:http://en.wikipedia.org/wiki/CSS and &quot;JavaScript&amp;quot;:http://en.wikipedia.org/wiki/JavaScript. Large parts of QML code are just CSS-style name-value pairs of properties (e.g., ''color: &quot;red&amp;quot;''). The rest, typically the behavioral parts like the response to a mouse click, is written in JavaScript. Thanks to its similarity to CSS and JavaScript and its simplicity, QML is easily picked up by web and Flash developers, and it is a no-brainer for Qt/C+'', C and Java developers. Despite its simplicity, Qt Quick makes it easy to write the kind of fluid UIs popularized by Apple's iPhone.
<br />Quite honestly, Qt Quick empowers teams to develop applications boasting the best possible interactivity with the best possible functionality. This is all due to a very simplified development process beginning with UI designers getting access to Qt Quick through Quick Designer: a visual design tool for QML applications which closes the gap between UI designers and developers because it facilitates communication via one common medium. The medium I am referring to is, of course, QML code. So essentially, the designers create a UI and the developers add the functionality to that UI while having the ability to maintain close interaction with the designers. This also gives developers and designers the opportunity to work side-by-side during the entire development process toward enhancing the UI and adding killer features to the application.
<br />Now compare this to a more traditional development process in which the designers initially come up with a fantastic UI design in Photoshop and Flash followed by the developers reimplementing this design in C''+ or Java and, after a couple of days or weeks even, the developers proudly show their result, which by the way doesn't even remotely resemble the original design (see the famous &quot;tree swing cartoon&amp;quot;:http://www.projectcartoon.com/cartoon/1111 for an illustration).


Now compare this to a more traditional development process in which the designers initially come up with a fantastic UI design in Photoshop and Flash followed by the developers reimplementing this design in C++ or Java and, after a couple of days or weeks even, the developers proudly show their result, which by the way doesn’t even remotely resemble the original design (see the famous [http://www.projectcartoon.com/cartoon/1111 tree swing cartoon] ''[projectcartoon.com]'' for an illustration).
As if this is not enough yet, Qt Quick has access to the full power of Qt. All the properties, signals and slots of a QObject-derived class are instantly accessible from QML. Actually, all visual QML components are implemented as QGraphicObjects and are exposed to QML through Qt's meta-object system. We extend QML with our own components in the very same way.
 
As if this is not enough yet, Qt Quick has access to the full power of Qt. All the properties, signals and slots of a QObject-derived class are instantly accessible from <span class="caps">QML</span>. Actually, all visual <span class="caps">QML</span> components are implemented as QGraphicObjects and are exposed to <span class="caps">QML</span> through Qt’s meta-object system. We extend <span class="caps">QML</span> with our own components in the very same way.


So far, we have made a lot of promises. Qt Quick is easy-to-use and easy-to-learn, it bridges the chasm between designers and developers, it is powerful and it lets us write fluid UIs. Now we must make good on these promises and this is exactly the motivation for this Qt Quick tutorial. We want to show you how easy it is to build amazing UIs with Qt Quick and we want to teach you how to build these UIs. When you have worked your way through this tutorial, you should have a clear idea whether Qt Quick is the right technology for your next UI project and you should have the technical means to realize this project.
So far, we have made a lot of promises. Qt Quick is easy-to-use and easy-to-learn, it bridges the chasm between designers and developers, it is powerful and it lets us write fluid UIs. Now we must make good on these promises and this is exactly the motivation for this Qt Quick tutorial. We want to show you how easy it is to build amazing UIs with Qt Quick and we want to teach you how to build these UIs. When you have worked your way through this tutorial, you should have a clear idea whether Qt Quick is the right technology for your next UI project and you should have the technical means to realize this project.


==Contents==
== Contents ==


It’s high time we gave an overview of the topics of this tutorial. The following nine modules come from materials based on <span class="caps">QML</span> training sessions (see [http://qt.nokia.com/partners/training Qt Training] ''[qt.nokia.com]'' for more information). Such training sessions are already available as heavily documented <span class="caps">QML</span> code and just waiting to be transformed into wiki pages. Of course, there are many more topics on <span class="caps">QML</span>: flipable, web view, path view, C++ models for <span class="caps">QML</span> views, internationalization, dynamic object creation, performance optimization and so on. We hope to add these topics in the future. We welcome and would appreciate any of your suggestions for new topics as well as any kind of general feedback.
It's high time we gave an overview of the topics of this tutorial. The following nine modules come from materials based on QML training sessions (see &quot;Qt Training&amp;quot;:http://qt.nokia.com/partners/training for more information). Such training sessions are already available as heavily documented QML code and just waiting to be transformed into wiki pages. Of course, there are many more topics on QML: flipable, web view, path view, C++ models for QML views, internationalization, dynamic object creation, performance optimization and so on. We hope to add these topics in the future. We welcome and would appreciate any of your suggestions for new topics as well as any kind of general feedback.


===[[Qt Quick Tutorial Follow Along|How to Follow Along]]===
=== [[Qt_Quick_Tutorial_Follow_Along | How to Follow Along]] ===


In this section, we describe where to download the source code for the tutorial, which tools we need and how to run the examples.
In this section, we describe where to download the source code for the tutorial, which tools we need and how to run the examples.


===[[Qt Quick Tutorial Basics|Module 1 Basics]]===
=== [[Qt_Quick_Tutorial_Basics | Module 1 - Basics]] ===


We introduce the basic concepts of <span class="caps">QML</span>: components and properties. We go on to show how to compose components from simpler components, how to use JavaScript expression in property values, and how to access properties of other components. We illustrate these concepts with simple examples. We start with a blue rectangle and evolve it in a row of three photos with titles. This simple photo viewer will accompany us as a running example through the next modules.
We introduce the basic concepts of QML: components and properties. We go on to show how to compose components from simpler components, how to use JavaScript expression in property values, and how to access properties of other components. We illustrate these concepts with simple examples. We start with a blue rectangle and evolve it in a row of three photos with titles. This simple photo viewer will accompany us as a running example through the next modules.


Keywords: components, component composition, built-in and custom properties
Keywords: components, component composition, built-in and custom properties


===[[Qt Quick Tutorial Components|Module 2 Components]]===
=== [[Qt_Quick_Tutorial_Components | Module 2 - Components]] ===


We learn to write our own custom components and how to use them in client code. In our photo viewer, we introduce a Photo component and use it in the viewer code.
We learn to write our own custom components and how to use them in client code. In our photo viewer, we introduce a Photo component and use it in the viewer code.
Line 35: Line 35:
Keywords: custom components, property aliases, property id (instance identifiers)
Keywords: custom components, property aliases, property id (instance identifiers)


===Module 3 Modules===
=== Module 3 - Modules ===
 
''(This module is not started yet. Waiting for authors!)''
 
Libraries of reusable <span class="caps">QML</span> components are called modules. In this “module”, we show how to organize <span class="caps">QML</span> components into modules and how to access components from modules in client code. Components stored in modules or directories are made available in client code through import statements. We explain in detail how import statements like ''import Qt 4.7'' or ''import “../dir”'' work.


===Module 4 – Layouts===
''<span class="authors! for Waiting yet. started not is module This"></span>''


''(This module is not started yet. Waiting for authors!)''
Libraries of reusable QML components are called modules. In this &quot;module&amp;quot;, we show how to organize QML components into modules and how to access components from modules in client code. Components stored in modules or directories are made available in client code through import statements. We explain in detail how import statements like ''import Qt 4.7'' or ''import &quot;../dir&amp;quot;'' work.


So far, we have laid out <span class="caps">QML</span> components by specifying absolute x and y positions. This is cumbersome and hard to maintain. A much better solution are layouts performing the positioning automatically. <span class="caps">QML</span> provides row, column, grid and anchor layouts. Using our photo viewer example, we explain the different layout possibilities.
=== Module 4 - Layouts ===


===Module 5 – Key and Mouse Input===
''<span class="authors! for Waiting yet. started not is module This"></span>''


''(This module is not started yet. Waiting for authors!)''
So far, we have laid out QML components by specifying absolute x and y positions. This is cumbersome and hard to maintain. A much better solution are layouts performing the positioning automatically. QML provides row, column, grid and anchor layouts. Using our photo viewer example, we explain the different layout possibilities.


Our photo viewer is not quite suited for end users yet. They would have to change the <span class="caps">QML</span> code to enter a title, description or date for a photo and the photo viewer should allow end users to select a photo with the mouse or with the cursor keys and then enter the title, description and date in a form. We find out in this module how to handle key and mouse input in <span class="caps">QML</span>.
=== Module 5 - Key and Mouse Input ===


===Module 6 – List View===
''<span class="authors! for Waiting yet. started not is module This"></span>''


''(This module is not started yet. Waiting for authors!)''
Our photo viewer is not quite suited for end users yet. They would have to change the QML code to enter a title, description or date for a photo and the photo viewer should allow end users to select a photo with the mouse or with the cursor keys and then enter the title, description and date in a form. We find out in this module how to handle key and mouse input in QML.


List views give us the first glimpse at fluid UIs in <span class="caps">QML</span>. By default, list views are flickable and can be pushed to the left or right by the flick of a finger or mouse pointer. List views use Qt’s model-view architecture and are made of a view, a normal delegate, a highlight delegate and a model. We implement a very basic cover flow for our photo viewer.
=== Module 6 - List View ===


===Module 7 – States and Transitions===
''<span class="authors! for Waiting yet. started not is module This"></span>''


''(This module is not started yet. Waiting for authors!)''
List views give us the first glimpse at fluid UIs in QML. By default, list views are flickable and can be pushed to the left or right by the flick of a finger or mouse pointer. List views use Qt's model-view architecture and are made of a view, a normal delegate, a highlight delegate and a model. We implement a very basic cover flow for our photo viewer.


Interaction between user and system or transitions from one screen to another are typically modeled with state machines. Every visual <span class="caps">QML</span> component provides properties for implementing state machines. We use the photo viewer example to illustrate states and transitions in <span class="caps">QML</span>. The photo viewer has three screens. The first screen shows the photos in a list view. On the first screen, the user can choose to view or edit the selected photo by clicking on the respective button or the photo itself. This takes the user to the second screen for viewing a single photo or to the third screen for editing the additional information of the photo. By clicking on a back button, the user returns to the first screen. If we consider the screens as states, the above description defines a state machine with states and transitions.
=== Module 7 - States and Transitions ===


===Module 8 – Animations===
''<span class="authors! for Waiting yet. started not is module This"></span>''


''(This module is not started yet. Waiting for authors!)''
Interaction between user and system or transitions from one screen to another are typically modeled with state machines. Every visual QML component provides properties for implementing state machines. We use the photo viewer example to illustrate states and transitions in QML. The photo viewer has three screens. The first screen shows the photos in a list view. On the first screen, the user can choose to view or edit the selected photo by clicking on the respective button or the photo itself. This takes the user to the second screen for viewing a single photo or to the third screen for editing the additional information of the photo. By clicking on a back button, the user returns to the first screen. If we consider the screens as states, the above description defines a state machine with states and transitions.


With animations, we will breathe even more life into <span class="caps">QML</span> applications. We can attach animations to transitions of a state machine. This makes, among other things, fading effects when transitioning from one screen or photo to the next possible. Animations can also be attached to properties. For example, the selected photo in a list of photos can gradually be shrunk to a smaller size when another photo is selected.
=== Module 8 - Animations ===


===Module 9 – Writing New <span class="caps">QML</span> Components in Qt/C++===
''<span class="authors! for Waiting yet. started not is module This"></span>''


''(This module is not started yet. Waiting for authors!)''
With animations, we will breathe even more life into QML applications. We can attach animations to transitions of a state machine. This makes, among other things, fading effects when transitioning from one screen or photo to the next possible. Animations can also be attached to properties. For example, the selected photo in a list of photos can gradually be shrunk to a smaller size when another photo is selected.


Using the example of a simple music player, we explain how <span class="caps">QML</span> and Qt/C++ communicate with each other. We show how a <span class="caps">QML</span> component can access properties of a Qt object or how it can call slots of the Qt object. The music player can play the songs from one playlist. It can jump to the next or previous song. It can pause or play a song. It can shuffle the songs of the playlist, repeat one song or all songs of the playlist. The music player shows in a progress bar how long the song plays already. It also shows information about the song like artist, title, album and year.
=== Module 9 - Writing New QML Components in Qt/C++ ===


===Categories:===
''<span class="authors! for Waiting yet. started not is module This"></span>''


* [[:Category:Developing with Qt|Developing_with_Qt]]
Using the example of a simple music player, we explain how QML and Qt/C++ communicate with each other. We show how a QML component can access properties of a Qt object or how it can call slots of the Qt object. The music player can play the songs from one playlist. It can jump to the next or previous song. It can pause or play a song. It can shuffle the songs of the playlist, repeat one song or all songs of the playlist. The music player shows in a progress bar how long the song plays already. It also shows information about the song like artist, title, album and year.
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
* [[:Category:Developing with Qt::Qt-Quick::Tutorial|Tutorial]]

Revision as of 14:19, 23 February 2015



[toc align_right="yes&quot; depth="3&quot;]

Qt Quick Tutorial

Motivation

Qt Quick has been released with Qt 4.7. Companies use it to build user interfaces (UIs) for set-top boxes, tablet devices, in-vehicle infotainment systems, e-readers or mobile phones. Many more companies are seriously evaluating Qt Quick. Such an interest is quite amazing for a new and unproven technology, so Qt Quick must have hit a nerve - or actually a couple of nerves.

Qt Quick provides a declarative language called QML (Qt Meta-object Language) for the design and implementation of UIs. QML is based on "CSS&quot;:http://en.wikipedia.org/wiki/CSS and "JavaScript&quot;:http://en.wikipedia.org/wiki/JavaScript. Large parts of QML code are just CSS-style name-value pairs of properties (e.g., color: "red&quot;). The rest, typically the behavioral parts like the response to a mouse click, is written in JavaScript. Thanks to its similarity to CSS and JavaScript and its simplicity, QML is easily picked up by web and Flash developers, and it is a no-brainer for Qt/C+, C and Java developers. Despite its simplicity, Qt Quick makes it easy to write the kind of fluid UIs popularized by Apple's iPhone.
Quite honestly, Qt Quick empowers teams to develop applications boasting the best possible interactivity with the best possible functionality. This is all due to a very simplified development process beginning with UI designers getting access to Qt Quick through Quick Designer: a visual design tool for QML applications which closes the gap between UI designers and developers because it facilitates communication via one common medium. The medium I am referring to is, of course, QML code. So essentially, the designers create a UI and the developers add the functionality to that UI while having the ability to maintain close interaction with the designers. This also gives developers and designers the opportunity to work side-by-side during the entire development process toward enhancing the UI and adding killer features to the application.
Now compare this to a more traditional development process in which the designers initially come up with a fantastic UI design in Photoshop and Flash followed by the developers reimplementing this design in C+ or Java and, after a couple of days or weeks even, the developers proudly show their result, which by the way doesn't even remotely resemble the original design (see the famous "tree swing cartoon&quot;:http://www.projectcartoon.com/cartoon/1111 for an illustration).

As if this is not enough yet, Qt Quick has access to the full power of Qt. All the properties, signals and slots of a QObject-derived class are instantly accessible from QML. Actually, all visual QML components are implemented as QGraphicObjects and are exposed to QML through Qt's meta-object system. We extend QML with our own components in the very same way.

So far, we have made a lot of promises. Qt Quick is easy-to-use and easy-to-learn, it bridges the chasm between designers and developers, it is powerful and it lets us write fluid UIs. Now we must make good on these promises and this is exactly the motivation for this Qt Quick tutorial. We want to show you how easy it is to build amazing UIs with Qt Quick and we want to teach you how to build these UIs. When you have worked your way through this tutorial, you should have a clear idea whether Qt Quick is the right technology for your next UI project and you should have the technical means to realize this project.

Contents

It's high time we gave an overview of the topics of this tutorial. The following nine modules come from materials based on QML training sessions (see "Qt Training&quot;:http://qt.nokia.com/partners/training for more information). Such training sessions are already available as heavily documented QML code and just waiting to be transformed into wiki pages. Of course, there are many more topics on QML: flipable, web view, path view, C++ models for QML views, internationalization, dynamic object creation, performance optimization and so on. We hope to add these topics in the future. We welcome and would appreciate any of your suggestions for new topics as well as any kind of general feedback.

How to Follow Along

In this section, we describe where to download the source code for the tutorial, which tools we need and how to run the examples.

Module 1 - Basics

We introduce the basic concepts of QML: components and properties. We go on to show how to compose components from simpler components, how to use JavaScript expression in property values, and how to access properties of other components. We illustrate these concepts with simple examples. We start with a blue rectangle and evolve it in a row of three photos with titles. This simple photo viewer will accompany us as a running example through the next modules.

Keywords: components, component composition, built-in and custom properties

Module 2 - Components

We learn to write our own custom components and how to use them in client code. In our photo viewer, we introduce a Photo component and use it in the viewer code.

Keywords: custom components, property aliases, property id (instance identifiers)

Module 3 - Modules

Libraries of reusable QML components are called modules. In this "module&quot;, we show how to organize QML components into modules and how to access components from modules in client code. Components stored in modules or directories are made available in client code through import statements. We explain in detail how import statements like import Qt 4.7 or import "../dir&quot; work.

Module 4 - Layouts

So far, we have laid out QML components by specifying absolute x and y positions. This is cumbersome and hard to maintain. A much better solution are layouts performing the positioning automatically. QML provides row, column, grid and anchor layouts. Using our photo viewer example, we explain the different layout possibilities.

Module 5 - Key and Mouse Input

Our photo viewer is not quite suited for end users yet. They would have to change the QML code to enter a title, description or date for a photo and the photo viewer should allow end users to select a photo with the mouse or with the cursor keys and then enter the title, description and date in a form. We find out in this module how to handle key and mouse input in QML.

Module 6 - List View

List views give us the first glimpse at fluid UIs in QML. By default, list views are flickable and can be pushed to the left or right by the flick of a finger or mouse pointer. List views use Qt's model-view architecture and are made of a view, a normal delegate, a highlight delegate and a model. We implement a very basic cover flow for our photo viewer.

Module 7 - States and Transitions

Interaction between user and system or transitions from one screen to another are typically modeled with state machines. Every visual QML component provides properties for implementing state machines. We use the photo viewer example to illustrate states and transitions in QML. The photo viewer has three screens. The first screen shows the photos in a list view. On the first screen, the user can choose to view or edit the selected photo by clicking on the respective button or the photo itself. This takes the user to the second screen for viewing a single photo or to the third screen for editing the additional information of the photo. By clicking on a back button, the user returns to the first screen. If we consider the screens as states, the above description defines a state machine with states and transitions.

Module 8 - Animations

With animations, we will breathe even more life into QML applications. We can attach animations to transitions of a state machine. This makes, among other things, fading effects when transitioning from one screen or photo to the next possible. Animations can also be attached to properties. For example, the selected photo in a list of photos can gradually be shrunk to a smaller size when another photo is selected.

Module 9 - Writing New QML Components in Qt/C++

Using the example of a simple music player, we explain how QML and Qt/C++ communicate with each other. We show how a QML component can access properties of a Qt object or how it can call slots of the Qt object. The music player can play the songs from one playlist. It can jump to the next or previous song. It can pause or play a song. It can shuffle the songs of the playlist, repeat one song or all songs of the playlist. The music player shows in a progress bar how long the song plays already. It also shows information about the song like artist, title, album and year.