Introduction to QtQuick: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
(Cleanup)
 
(8 intermediate revisions by 3 users not shown)
Line 1: Line 1:
'''English''' [[IntroductionQtQuick Bulgarian|Български]] [[IntroductionQtQuick Russian|Русский]]
{{LangSwitch}}
[[Category:Developing_with_Qt::Qt Quick]]
[[Category:Developing_with_Qt::Qt Quick::Tutorial]]
== About Qt Quick ==


=Introduction to Qt Quick=
Qt Quick is a technology for creating fluid user interfaces using a straight-forward declarative language that allows the user to build up a hierarchical visual tree of elements. The underlying technology supports traditional mouse and keyboard input as well as touch gestures. The technology also recognizes the importance, and fully supports the use of transitions and animations ([http://en.wikipedia.org/wiki/Tweening tweens]) to create rich user experiences.


==About Qt Quick==
Although web developers more frequently refer to themselves as designers and most software developers see coding as an art, there was still a big hurdle to allowing designers to participate in the C++ development process. Qt Quick was designed from the ground up to make that hurdle drastically lower. It provides an environment that allows designers and coders to work collaboratively. As a domain-specific language it is specifically targeted toward the creation of user interfaces. It puts a declarative layer on top of JavaScript. It looks similar to cascading style sheets (CSS). It won't bother you much with type casting, pointers or object lifetimes. Instead the focus remains on the creation of rich user interfaces.


Qt Quick is a technology for creating fluid user interfaces using a straight-forward declarative language that allows the user to build up a hierarchical visual tree of elements. The underlying technology supports traditional mouse and keyboard input as well as touch gestures. The technology also recognizes the importance, and fully supports the use of transitions and animations ([http://en.wikipedia.org/wiki/Tweening tweens] ''[en.wikipedia.org]'') to create rich user experiences.
== Terms and terminology ==


Although web developers more frequently refer to themselves as designers and most software developers see coding as an art, there was still a big hurdle to allowing designers to participate in the C++ development process. Qt Quick was designed from the ground up to make that hurdle drastically lower. It provides an environment that allows designers and coders to work collaboratively. As a domain-specific language it is specifically targeted toward the creation of user interfaces. It puts a declarative layer on top of JavaScript. It looks similar to cascading style sheets (<span class="caps">CSS</span>). It won’t bother you much with type casting, pointers or object lifetimes. Instead the focus remains on the creation of rich user interfaces.
Before we get started coding in Qt Quick, let us get some terms straight. As the technology is still new, lots of myths and "myth"information surrounds it.


==Terms and terminology==
First of all, Qt Quick, QtQuick and QML all refer to different things! Qt Quick and QML are frequently used interchangeably, which is not entirely correct. QML is the language, QtQuick (without a space) is the name of the standard component library and Qt Quick (with a space) refers to the technology as a whole. QML as a language allows the declaration of object hierarchies and state based application logic. It can also be used in other application domains beyond user interface design.


Before we get started coding in Qt Quick, let us get some terms straight. As the technology is still new, lots of myths and “myth“information surrounds it.
== Setting up your development environment ==


First of all, Qt Quick, QtQuick and <span class="caps">QML</span> all refer to different things! Qt Quick and <span class="caps">QML</span> are frequently used interchangeably, which is not entirely correct. <span class="caps">QML</span> is the language, QtQuick (without a space) is the name of the standard component library and Qt Quick (with a space) refers to the technology as a whole. <span class="caps">QML</span> as a language allows the declaration of object hierarchies and state based application logic. It can also be used in other application domains beyond user interface design.
Starting from version 4.7, Qt ships with Qt Quick. You can edit your QML files with your favorite editor, but Qt Creator currently supports it best. Qt ships a new tool called "qmlviewer" which allows you to display QML files. Starting from version 2.1, Qt Creator also supports a special QML design mode. Depending on your target platform you may opt for downloading all tools in one package - including the necessary cross-compile chains. Qt Quick is also included in the latest Nokia and Meego/AppUp SDKs. You can avoid these SDKs (and their gigabytes) by installing Qt with your favorite package manager and setting your editor to highlight QML files ('''.qml) as JavaScript or CSS. As of Maverick (10.10), Qt 4.7 and qmlviewer are both included in Ubuntu. Look out for the ''libqt4-dev'' and ''qt4-qmlviewer'' packages.


==Setting up your development environment==
== Hello, world! ==
We will start with a simple program showing the famous getting started message. To load the file, be sure to have the ''qmlviewer'' at hand. If you'd like to use QtCreator, simply click through ''File->New->Qt Quick Project->Qt Quick UI''. Then paste the source code and click on the big triangular button at the bottom left of the interface.
<code>
// HelloWorld.qml
import QtQuick 1.0
Rectangle {
color: "beige"
width: 100; height: 100
Text {
anchors.centerIn: parent
color: "chocolate"
text: "Hello, world!"
}
MouseArea {
anchors.fill: parent
onClicked: Qt.quit()
}
}
</code>


Starting from version 4.7, Qt ships with Qt Quick. You can edit your <span class="caps">QML</span> files with your favorite editor, but Qt Creator currently supports it best. Qt ships a new tool called “qmlviewer” which allows you to display <span class="caps">QML</span> files. Starting from version 2.1, Qt Creator also supports a special <span class="caps">QML</span> design mode. Depending on your target platform you may opt for downloading all tools in one package – including the necessary cross-compile chains. Qt Quick is also included in the latest Nokia and Meego/AppUp <span class="caps">SDK</span>s. You can avoid these <span class="caps">SDK</span>s (and their gigabytes) by installing Qt with your favorite package manager and setting your editor to highlight <span class="caps">QML</span> files (*.qml) as JavaScript or <span class="caps">CSS</span>. As of Maverick (10.10), Qt 4.7 and qmlviewer are both included in Ubuntu. Look out for the ''libqt4-dev'' and ''qt4-qmlviewer'' packages.
The first line is just a comment. Comment syntax is the same as in C+''. Lines starting with ''//'' and text enclosed in ''/* … */'' are ignored. The second line imports all default components: ''Rectangle, Image, Text, MouseArea, Flickable,'' … etc. The third line creates the root node of your visual hierarchy. The ''Rectangle'' element shows a rectangle filled with a given color and possibly rounded edges. You can use any of the SVG color names or specify the color directly using RGB color names. In our example we could have written ''#F5F5DC'' instead of ''"beige"''. The dimensions of the rectangle are given using the ''width'' and ''height'' properties. For each visual element you can specify geometry using the ''x'', ''y'', ''width'' and ''height'' properties in number of pixels.
Thereafter we have added 2 child elements: a ''Text'' and a ''MouseArea''. We use anchors to bind the geometry of the children to its parent. The text element's center is anchored to its parent center. Try to resize the window to verify that. The second child element is a ''MouseArea'', which is anchored to fully overlap its parent. The ''MouseArea'' is one of the invisible elements for capturing user input. It's called ''MouseArea'', but also delivers touch and tab events in a seamless manner. Finally the ''MouseArea'' includes a ''onClicked'' event handler, which calls the default function to shutdown the Qt Quick application.


==Hello, world!==
== The QML language ==
QML is a declarative language which specifies a hierarchy of objects. The tree of objects is instantiated when loading the QML file. A set of properties is specified for each object. Property values are given using constants or JavaScript expressions. Property values are given as JavaScript expressions and the expressions are reevaluted if any of the properties used in the expression change. This concept of declaring properties that depend on each other and are updated live is called '''property binding''' in QML.
QML is said to be an extension on top of JavaScript, but we like to think of it as an improvement. While JavaScript is a fully [http://en.wikipedia.org/wiki/Duck_typing duck-typed] language, QML does basic type and syntax checking when loading files. Try the following for instance:
<code>
import QtQuick 1.0
Rectangle {
color: 0
}
</code>
When loading this file in the ''qmlviewer'' the declarative context correctly reports on the type mismatch:
<code>
file:///home/frank/gitorious/qml-demos/MyRectangle.qml:3:12: Invalid property assignment: color expected
color: 0
</code>
Furthermore in QML you are not allowed to modify the global object. Modifying the global object can easily occur by accident when you forget to declare local variables using the ''var'' statement.
Besides these minor improvements, the JavaScript expression syntax is fully compatible with the JavaScript used in web browsers. You can use built-in objects like ''Date'', ''Number'' or ''Math''. You can write the JavaScript code in separate JavaScript files and import them into your QML context. You can also declare JavaScript functions within your components. Consider the following example:
<code>
import QtQuick 1.0


We will start with a simple program showing the famous getting started message. To load the file, be sure to have the ''qmlviewer'' at hand. If you’d like to use QtCreator, simply click through ''File-&gt;New-&gt;Qt Quick Project-&gt;Qt Quick UI''. Then paste the source code and click on the big triangular button at the bottom left of the interface.<br />
Rectangle {
 
width: 100; height: 100
The first line is just a comment. Comment syntax is the same as in C++. Lines starting with ''//'' and text enclosed in ''/* … */'' are ignored. The second line imports all default components: ''Rectangle, Image, Text, MouseArea, Flickable,'' … etc. The third line creates the root node of your visual hierarchy. The ''Rectangle'' element shows a rectangle filled with a given color and possibly rounded edges. You can use any of the <span class="caps">SVG</span> color names or specify the color directly using <span class="caps">RGB</span> color names. In our example we could have written ''#F5F5DC'' instead of ''“beige”''. The dimensions of the rectangle are given using the ''width'' and ''height'' properties. For each visual element you can specify geometry using the ''x'', ''y'', ''width'' and ''height'' properties in number of pixels. <br /> Thereafter we have added 2 child elements: a ''Text'' and a ''MouseArea''. We use anchors to bind the geometry of the children to its parent. The text element’s center is anchored to its parent center. Try to resize the window to verify that. The second child element is a ''MouseArea'', which is anchored to fully overlap its parent. The ''MouseArea'' is one of the invisible elements for capturing user input. It’s called ''MouseArea'', but also delivers touch and tab events in a seamless manner. Finally the ''MouseArea'' includes a ''onClicked'' event handler, which calls the default function to shutdown the Qt Quick application.
color: red(0.5)
 
Rectangle {
==The <span class="caps">QML</span> language==
anchors.verticalCenter: parent.verticalCenter
 
width: parent.width / 2
<span class="caps">QML</span> is a declarative language which specifies a hierarchy of objects. The tree of objects is instantiated when loading the <span class="caps">QML</span> file. A set of properties is specified for each object. Property values are given using constants or JavaScript expressions. Property values are given as JavaScript expressions and the expressions are reevaluted if any of the properties used in the expression change. This concept of declaring properties that depend on each other and are updated live is called '''property binding''' in <span class="caps">QML</span>.<br /><span class="caps">QML</span> is said to be an extension on top of JavaScript, but we like to think of it as an improvement. While JavaScript is a fully [http://en.wikipedia.org/wiki/Duck_typing duck-typed] ''[en.wikipedia.org]'' language, <span class="caps">QML</span> does basic type and syntax checking when loading files. Try the following for instance:<br /> When loading this file in the ''qmlviewer'' the declarative context correctly reports on the type mismatch:<br /> Furthermore in <span class="caps">QML</span> you are not allowed to modify the global object. Modifying the global object can easily occur by accident when you forget to declare local variables using the ''var'' statement.<br /> Besides these minor improvements, the JavaScript expression syntax is fully compatible with the JavaScript used in web browsers. You can use built-in objects like ''Date'', ''Number'' or ''Math''. You can write the JavaScript code in separate JavaScript files and import them into your <span class="caps">QML</span> context. You can also declare JavaScript functions within your components. Consider the following example:<br />
height: parent.height / 2
color: red(1.)
}
function red(v) { return '#''' Math.floor(v''' 255).toString(16) + '0000'; }
}
</code>


Here we have declared the ''red'' function to compute color names of red tones.
Here we have declared the ''red'' function to compute color names of red tones.


==Qt Quick standard components==
== Qt Quick standard components ==
 
The ''QtQuick'' components library provides a rich set of animation elements, elements for handling images, input handling elements and model-view elements. Qt Quick originally focused on creating custom-designed user interfaces for embedded and mobile devices. There is an ongoing and quickly maturing effort called [http://developer.qt.nokia.com/wiki/Qt_Quick_Components Qt Components] ''[developer.qt.nokia.com]'' to provide more high-level components that is particularly useful for desktop application development.
 
===Categories:===
 
* [[:Category:Developing with Qt|Developing_with_Qt]]
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
* [[:Category:Developing with Qt::Qt-Quick::Tutorial|Tutorial]]

Latest revision as of 20:09, 28 June 2015

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

About Qt Quick

Qt Quick is a technology for creating fluid user interfaces using a straight-forward declarative language that allows the user to build up a hierarchical visual tree of elements. The underlying technology supports traditional mouse and keyboard input as well as touch gestures. The technology also recognizes the importance, and fully supports the use of transitions and animations (tweens) to create rich user experiences.

Although web developers more frequently refer to themselves as designers and most software developers see coding as an art, there was still a big hurdle to allowing designers to participate in the C++ development process. Qt Quick was designed from the ground up to make that hurdle drastically lower. It provides an environment that allows designers and coders to work collaboratively. As a domain-specific language it is specifically targeted toward the creation of user interfaces. It puts a declarative layer on top of JavaScript. It looks similar to cascading style sheets (CSS). It won't bother you much with type casting, pointers or object lifetimes. Instead the focus remains on the creation of rich user interfaces.

Terms and terminology

Before we get started coding in Qt Quick, let us get some terms straight. As the technology is still new, lots of myths and "myth"information surrounds it.

First of all, Qt Quick, QtQuick and QML all refer to different things! Qt Quick and QML are frequently used interchangeably, which is not entirely correct. QML is the language, QtQuick (without a space) is the name of the standard component library and Qt Quick (with a space) refers to the technology as a whole. QML as a language allows the declaration of object hierarchies and state based application logic. It can also be used in other application domains beyond user interface design.

Setting up your development environment

Starting from version 4.7, Qt ships with Qt Quick. You can edit your QML files with your favorite editor, but Qt Creator currently supports it best. Qt ships a new tool called "qmlviewer" which allows you to display QML files. Starting from version 2.1, Qt Creator also supports a special QML design mode. Depending on your target platform you may opt for downloading all tools in one package - including the necessary cross-compile chains. Qt Quick is also included in the latest Nokia and Meego/AppUp SDKs. You can avoid these SDKs (and their gigabytes) by installing Qt with your favorite package manager and setting your editor to highlight QML files (.qml) as JavaScript or CSS. As of Maverick (10.10), Qt 4.7 and qmlviewer are both included in Ubuntu. Look out for the libqt4-dev and qt4-qmlviewer packages.

Hello, world!

We will start with a simple program showing the famous getting started message. To load the file, be sure to have the qmlviewer at hand. If you'd like to use QtCreator, simply click through File->New->Qt Quick Project->Qt Quick UI. Then paste the source code and click on the big triangular button at the bottom left of the interface.

// HelloWorld.qml
import QtQuick 1.0
Rectangle {
 color: "beige"
 width: 100; height: 100
 Text {
 anchors.centerIn: parent
 color: "chocolate"
 text: "Hello, world!"
 }
 MouseArea {
 anchors.fill: parent
 onClicked: Qt.quit()
 }
}

The first line is just a comment. Comment syntax is the same as in C+. Lines starting with // and text enclosed in /* … */ are ignored. The second line imports all default components: Rectangle, Image, Text, MouseArea, Flickable, … etc. The third line creates the root node of your visual hierarchy. The Rectangle element shows a rectangle filled with a given color and possibly rounded edges. You can use any of the SVG color names or specify the color directly using RGB color names. In our example we could have written #F5F5DC instead of "beige". The dimensions of the rectangle are given using the width and height properties. For each visual element you can specify geometry using the x, y, width and height properties in number of pixels. Thereafter we have added 2 child elements: a Text and a MouseArea. We use anchors to bind the geometry of the children to its parent. The text element's center is anchored to its parent center. Try to resize the window to verify that. The second child element is a MouseArea, which is anchored to fully overlap its parent. The MouseArea is one of the invisible elements for capturing user input. It's called MouseArea, but also delivers touch and tab events in a seamless manner. Finally the MouseArea includes a onClicked event handler, which calls the default function to shutdown the Qt Quick application.

The QML language

QML is a declarative language which specifies a hierarchy of objects. The tree of objects is instantiated when loading the QML file. A set of properties is specified for each object. Property values are given using constants or JavaScript expressions. Property values are given as JavaScript expressions and the expressions are reevaluted if any of the properties used in the expression change. This concept of declaring properties that depend on each other and are updated live is called property binding in QML. QML is said to be an extension on top of JavaScript, but we like to think of it as an improvement. While JavaScript is a fully duck-typed language, QML does basic type and syntax checking when loading files. Try the following for instance:

import QtQuick 1.0
Rectangle {
 color: 0
}

When loading this file in the qmlviewer the declarative context correctly reports on the type mismatch:

file:///home/frank/gitorious/qml-demos/MyRectangle.qml:3:12: Invalid property assignment: color expected
 color: 0

Furthermore in QML you are not allowed to modify the global object. Modifying the global object can easily occur by accident when you forget to declare local variables using the var statement. Besides these minor improvements, the JavaScript expression syntax is fully compatible with the JavaScript used in web browsers. You can use built-in objects like Date, Number or Math. You can write the JavaScript code in separate JavaScript files and import them into your QML context. You can also declare JavaScript functions within your components. Consider the following example:

import QtQuick 1.0

Rectangle {
 width: 100; height: 100
 color: red(0.5)
 Rectangle {
 anchors.verticalCenter: parent.verticalCenter
 width: parent.width / 2
 height: parent.height / 2
 color: red(1.)
 }
 function red(v) { return '#''' Math.floor(v''' 255).toString(16) + '0000'; }
}

Here we have declared the red function to compute color names of red tones.

Qt Quick standard components