/usr/share/qt5/doc/qtdoc/qmlfirststeps.html is in qt5-doc-html 5.3.2-3.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- firststepsqml.qdoc -->
<title>First Steps with QML | QtDoc 5.3</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li><a href="index.html">Qt 5.3</a></li>
<li>First Steps with QML</li>
<li id="buildversion">
Qt 5.3.2 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#creating-a-qml-document">Creating a QML Document</a></li>
<li class="level2"><a href="#importing-and-using-the-qtquick-module">Importing and Using the QtQuick Module</a></li>
<li class="level2"><a href="#defining-an-object-hierarchy">Defining an Object Hierarchy</a></li>
<li class="level2"><a href="#putting-it-all-together">Putting it All Together</a></li>
<li class="level1"><a href="#loading-and-displaying-the-qml-document">Loading and Displaying the QML Document</a></li>
<li class="level1"><a href="#handling-user-input">Handling User Input</a></li>
<li class="level1"><a href="#property-bindings">Property Bindings</a></li>
<li class="level1"><a href="#animations">Animations</a></li>
<li class="level1"><a href="#defining-custom-qml-types-for-re-use">Defining Custom QML Types for Re-use</a></li>
<li class="level1"><a href="#where-to-go-from-here">Where to Go from Here</a></li>
</ul>
</div>
<h1 class="title">First Steps with QML</h1>
<span class="subtitle"></span>
<!-- $$$qmlfirststeps.html-description -->
<div class="descr"> <a name="details"></a>
<a name="creating-a-qml-document"></a>
<h2>Creating a QML Document</h2>
<p>A QML document defines a hierarchy of objects with a highly-readable, structured layout. Every QML document consists of two parts: an imports section and an object declaration section. The types and functionality most common to user interfaces are provided in the <tt>QtQuick</tt> import.</p>
<a name="importing-and-using-the-qtquick-module"></a>
<h3>Importing and Using the QtQuick Module</h3>
<p>To use the <a href="../qtquick/qtquick-index.html">Qt Quick</a> module, a QML document needs to import it. The import syntax looks like this:</p>
<pre class="cpp">import <span class="type"><a href="../qtquick/qtquick-module.html">QtQuick</a></span> <span class="number">2.3</span></pre>
<p>The types and functionality that <a href="../qtquick/qtquick-index.html">Qt Quick</a> provides can now be used in the QML document!</p>
<a name="defining-an-object-hierarchy"></a>
<h3>Defining an Object Hierarchy</h3>
<p>The object declaration in a QML document defines what will be displayed in the visual scene. <a href="../qtquick/qtquick-index.html">Qt Quick</a> provides the basic building blocks for all user interfaces, such as the objects for displaying images and text and for handling user input.</p>
<p>A simple object declaration might be a colored rectangle with some text centered in it:</p>
<pre class="qml"><span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">200</span>
<span class="name">height</span>: <span class="number">100</span>
<span class="name">color</span>: <span class="string">"red"</span>
<span class="type"><a href="../qtquick/qml-qtquick-text.html">Text</a></span> {
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">text</span>: <span class="string">"Hello, World!"</span>
}
}</pre>
<p>This defines an object hierarchy with a root <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a> object which has a child <a href="../qtquick/qml-qtquick-text.html">Text</a> object. The <tt>parent</tt> of the <a href="../qtquick/qml-qtquick-text.html">Text</a> object is automatically set to the <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a>, and similarly, the <a href="../qtquick/qml-qtquick-text.html">Text</a> object is added to the <tt>children</tt> property of the <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a> object, by QML.</p>
<a name="putting-it-all-together"></a>
<h3>Putting it All Together</h3>
<p>The <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a> and <a href="../qtquick/qml-qtquick-text.html">Text</a> types used in the above example are both provided by the <tt>QtQuick</tt> import. Putting the import and object declaration together, we get a complete QML document:</p>
<pre class="qml">import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">200</span>
<span class="name">height</span>: <span class="number">100</span>
<span class="name">color</span>: <span class="string">"red"</span>
<span class="type"><a href="../qtquick/qml-qtquick-text.html">Text</a></span> {
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">text</span>: <span class="string">"Hello, World!"</span>
}
}</pre>
<p>If we save that document as "HelloWorld.qml", we can load and display it.</p>
<a name="loading-and-displaying-the-qml-document"></a>
<h2>Loading and Displaying the QML Document</h2>
<p>To display the graphical scene defined by the QML document, it may be loaded with <a href="http://qt-project.org/doc/qtcreator/index.html">Qt Creator</a>. For simple UI files such as this one, select <b>File > New File or Project > Applications > Qt Quick UI</b> from within Qt Creator.</p>
<p>Pressing the green <b>Run</b> button runs the application. You should see the text <b>Hello, World!</b> in the center of a red rectangle.</p>
<p>For more information about creating and running projects in Qt Creator, visit the following pages:</p>
<ul>
<li><a href="http://qt-project.org/doc/qtcreator/quick-projects.html">Creating Qt Quick Projects</a></li>
<li><a href="http://qt-project.org/doc/qtcreator/creator-build-example-application.html">Building and Running an Example</a></li>
</ul>
<a name="handling-user-input"></a>
<h2>Handling User Input</h2>
<p>One of the great advantages of using QML to define a user interface is that it allows the user interface designer to define how the application should react to events with simple JavaScript expressions. In QML, we refer to those events as <a href="../qtqml/qtqml-syntax-signals.html">signals</a> and these signals are handled by <a href="../qtqml/qtqml-syntax-signals.html#qml-signals-and-handlers">signal handlers</a>.</p>
<p>For example, consider the following example:</p>
<pre class="qml">import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">200</span>
<span class="name">height</span>: <span class="number">100</span>
<span class="name">color</span>: <span class="string">"red"</span>
<span class="type"><a href="../qtquick/qml-qtquick-text.html">Text</a></span> {
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">text</span>: <span class="string">"Hello, World!"</span>
}
<span class="type"><a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: <span class="name">parent</span>.<span class="name">color</span> <span class="operator">=</span> <span class="string">"blue"</span>
}
}</pre>
<p>This example can be saved as "ClickableHelloWorld.qml" and run with qmlscene. Whenever the user clicks anywhere in the window, the rectangle will change from red to blue. Note that the <a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a> type also emits the clicked signal for touch events, so this code will also work on a mobile device.</p>
<p>Keyboard user input can be similarly handled with a simple expression:</p>
<pre class="qml">import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">200</span>
<span class="name">height</span>: <span class="number">100</span>
<span class="name">color</span>: <span class="string">"red"</span>
<span class="type"><a href="../qtquick/qml-qtquick-text.html">Text</a></span> {
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">text</span>: <span class="string">"Hello, World!"</span>
}
<span class="name">focus</span>: <span class="number">true</span>
<span class="name">Keys</span>.onPressed: {
<span class="keyword">if</span> (<span class="name">event</span>.<span class="name">key</span> <span class="operator">==</span> <span class="name">Qt</span>.<span class="name">Key_Return</span>) {
<span class="name">color</span> <span class="operator">=</span> <span class="string">"blue"</span>;
<span class="name">event</span>.<span class="name">accepted</span> <span class="operator">=</span> <span class="number">true</span>;
}
}
}</pre>
<p>By accepting focus, the color can be changed to blue whenever the return key is pressed.</p>
<a name="property-bindings"></a>
<h2>Property Bindings</h2>
<p>Objects and their properties form the basis of a graphical interface defined in a QML document. The QML language allows properties to be bound to each other in various ways, enabling highly dynamic user interfaces.</p>
<p>In the following example, the geometry of each child <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a> is bound to that of the parent <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a>. If the geometry of the parent <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a> were to change, the geometry of each child <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a> would automatically update due to the property bindings.</p>
<pre class="qml">import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">400</span>
<span class="name">height</span>: <span class="number">200</span>
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="name">parent</span>.<span class="name">width</span> <span class="operator">/</span> <span class="number">2</span>
<span class="name">height</span>: <span class="name">parent</span>.<span class="name">height</span>
}
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="name">parent</span>.<span class="name">width</span> <span class="operator">/</span> <span class="number">2</span>
<span class="name">height</span>: <span class="name">parent</span>.<span class="name">height</span>
<span class="name">x</span>: <span class="name">parent</span>.<span class="name">width</span> <span class="operator">/</span> <span class="number">2</span>
}
}</pre>
<a name="animations"></a>
<h2>Animations</h2>
<p>Properties can also be dynamically updated via animations. The <tt>QtQuick</tt> import provides various animation types which can be used to animate changes to a property's value. In the following example, a property is animated which then gets displayed in a <a href="../qtquick/qml-qtquick-text.html">Text</a> area:</p>
<pre class="qml">import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">color</span>: <span class="string">"lightgray"</span>
<span class="name">width</span>: <span class="number">200</span>
<span class="name">height</span>: <span class="number">200</span>
property <span class="type">int</span> <span class="name">animatedValue</span>: <span class="number">0</span>
SequentialAnimation on <span class="name">animatedValue</span> {
<span class="name">loops</span>: <span class="name">Animation</span>.<span class="name">Infinite</span>
<span class="type"><a href="../qtquick/qml-qtquick-propertyanimation.html">PropertyAnimation</a></span> { <span class="name">to</span>: <span class="number">150</span>; <span class="name">duration</span>: <span class="number">1000</span> }
<span class="type"><a href="../qtquick/qml-qtquick-propertyanimation.html">PropertyAnimation</a></span> { <span class="name">to</span>: <span class="number">0</span>; <span class="name">duration</span>: <span class="number">1000</span> }
}
<span class="type"><a href="../qtquick/qml-qtquick-text.html">Text</a></span> {
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">text</span>: <span class="name">animatedValue</span>
}
}</pre>
<p>The value being displayed will vary from 0 to 150 periodically.</p>
<a name="defining-custom-qml-types-for-re-use"></a>
<h2>Defining Custom QML Types for Re-use</h2>
<p>One of the most important concepts in QML is that of type re-use. An application will probably have multiple visual types which are all similar (for example, multiple push buttons), and QML allows these sort of things to be defined as re-usable, custom types, to minimize code duplication and maximize readability.</p>
<p>For example, imagine that the developer defines a new <tt>Button</tt> type in the <tt>Button.qml</tt> file:</p>
<pre class="qml"><span class="comment">// Button.qml</span>
import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
<span class="name">color</span>: <span class="string">"red"</span>
<span class="type"><a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: <span class="name">console</span>.<span class="name">log</span>(<span class="string">"Button clicked!"</span>)
}
}</pre>
<p>That type may now be re-used multiple times in the application, as follows:</p>
<table class="generic">
<tr valign="top" class="odd"><td ><pre class="qml"><span class="comment">// application.qml</span>
import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-column.html">Column</a></span> {
<span class="type">Button</span> { <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span> }
<span class="type">Button</span> { <span class="name">x</span>: <span class="number">50</span>; <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">50</span>; <span class="name">color</span>: <span class="string">"blue"</span> }
<span class="type">Button</span> { <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span>; <span class="name">radius</span>: <span class="number">8</span> }
}</pre>
</td><td ><p class="centerAlign"><img src="images/qml-extending-types.png" alt="" /></p></td></tr>
</table>
<p>In this way, modular user interface types are assembled and reused within an application.</p>
<p>See <a href="../qtqml/qtqml-syntax-objectattributes.html">QML Object Attributes</a> for more details on how to develop your own reusable components.</p>
<a name="where-to-go-from-here"></a>
<h2>Where to Go from Here</h2>
<p>Now that you have seen QML in action, you are ready to take your next step. The follow page will lead you in your journey with QML.</p>
<ul>
<li><a href="qmlapplications.html">QML Applications</a></li>
</ul>
</div>
<!-- @@@qmlfirststeps.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2014 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
|