Qt Quick Tutorial 2: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
'''English''' [[IntroductionQtQuick Bulgarian|Български]] [[IntroductionQtQuick Russian|Русский]]


=Introduction to Qt Quick=
==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 ([http://en.wikipedia.org/wiki/Tweening tweens] ''[en.wikipedia.org]'') 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 (<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.
==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 <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.
==Setting up your development environment==
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.
==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-&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 />
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.
==The <span class="caps">QML</span> language==
<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 />
Here we have declared the ''red'' function to compute color names of red tones.
==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]]

Revision as of 10:37, 24 February 2015

Retrieved from "https://wiki.qt.io/index.php?title=Qt_Quick_Tutorial_2&oldid=4870"