This file is indexed.

/usr/share/qt5/doc/qtdoc/qmlfirststeps.html is in qt5-doc-html 5.9.5-0ubuntu1.

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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- firststepsqml.qdoc -->
  <title>First Steps with QML | Qt 5.9</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt 5.9</a></td><td >First Steps with QML</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.5 Reference Documentation</td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<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="#creating-and-running-qml-projects">Creating and Running QML Projects</a></li>
<li class="level1"><a href="#creating-qml-applications-with-controls">Creating QML Applications with Controls</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>
<div class="sidebar-content" id="sidebar-content"></div></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 id="creating-a-qml-document">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 <code>QtQuick</code> 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="../qtqml/qtquick-qmlmodule.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">&quot;red&quot;</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">&quot;Hello, World!&quot;</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="whatsnew50.html#text">Text</a> object. The <code>parent</code> of the <a href="whatsnew50.html#text">Text</a> object is automatically set to the <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a>, and similarly, the <a href="whatsnew50.html#text">Text</a> object is added to the <code>children</code> 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="whatsnew50.html#text">Text</a> types used in the above example are both provided by the <code>QtQuick</code> 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">&quot;red&quot;</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">&quot;Hello, World!&quot;</span>
      }
  }

</pre>
<p>If we save that document as &quot;HelloWorld.qml&quot;, we can load and display it.</p>
<a name="creating-and-running-qml-projects"></a>
<h2 id="creating-and-running-qml-projects">Creating and Running QML Projects</h2>
<p>To display the graphical scene defined by the QML document, it may be loaded with <a href="http://doc.qt.io/qtcreator/index.html">Qt Creator</a>. For simple UI files such as this one, select <b>File &gt; New File or Project &gt; Applications &gt; 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://doc.qt.io/qtcreator/quick-projects.html">Creating Qt Quick Projects</a></li>
<li><a href="http://doc.qt.io/qtcreator/creator-build-example-application.html">Building and Running an Example</a></li>
</ul>
<a name="creating-qml-applications-with-controls"></a>
<h2 id="creating-qml-applications-with-controls">Creating QML Applications with Controls</h2>
<p>While Qt Quick provides basic graphical elements, <a href="../qtquickcontrols/qtquickcontrols-index.html">Qt Quick Controls</a> provides ready-made QML types for use within an application.</p>
<p>Inserting the <a href="../qtquickcontrols/qml-qtquick-controls-applicationwindow.html">ApplicationWindow</a> type is a good starting point for creating applications. An application UI has this basic layout:</p>
<p class="centerAlign"><img src="images/applicationwindow.png" alt="" /></p><p>Within each area, different <i>controls</i> may be added and connected to form an application. For example, the following snippet is a basic application that uses the previous layout:</p>
<pre class="qml">

  <span class="comment">//import related modules</span>
  import QtQuick 2.3
  import QtQuick.Controls 1.2
  import QtQuick.Window 2.2

  <span class="comment">//window containing the application</span>
  <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-applicationwindow.html">ApplicationWindow</a></span> {

      <span class="comment">//title of the application</span>
      <span class="name">title</span>: <span class="name">qsTr</span>(<span class="string">&quot;Hello World&quot;</span>)
      <span class="name">width</span>: <span class="number">640</span>
      <span class="name">height</span>: <span class="number">480</span>

      <span class="comment">//menu containing two menu items</span>
      <span class="name">menuBar</span>: <span class="name">MenuBar</span> {
          <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-menu.html">Menu</a></span> {
              <span class="name">title</span>: <span class="name">qsTr</span>(<span class="string">&quot;File&quot;</span>)
              <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-menuitem.html">MenuItem</a></span> {
                  <span class="name">text</span>: <span class="name">qsTr</span>(<span class="string">&quot;&amp;Open&quot;</span>)
                  <span class="name">onTriggered</span>: <span class="name">console</span>.<span class="name">log</span>(<span class="string">&quot;Open action triggered&quot;</span>);
              }
              <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-menuitem.html">MenuItem</a></span> {
                  <span class="name">text</span>: <span class="name">qsTr</span>(<span class="string">&quot;Exit&quot;</span>)
                  <span class="name">onTriggered</span>: <span class="name">Qt</span>.<span class="name">quit</span>();
              }
          }
      }

      <span class="comment">//Content Area</span>

      <span class="comment">//a button in the middle of the content area</span>
      <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-button.html">Button</a></span> {
          <span class="name">text</span>: <span class="name">qsTr</span>(<span class="string">&quot;Hello World&quot;</span>)
          <span class="name">anchors</span>.horizontalCenter: <span class="name">parent</span>.<span class="name">horizontalCenter</span>
          <span class="name">anchors</span>.verticalCenter: <span class="name">parent</span>.<span class="name">verticalCenter</span>
      }
  }

</pre>
<p>The application has two menu items and a button in the middle. Clicking on the <b>Exit</b> menu item closes the application.</p>
<p>There are also different navigation methods and different controls such as buttons and sliders available. The following examples are available from Qt Creator and demonstrate different controls and layouts.</p>
<ul>
<li><a href="../qtquick/qtquick-layouts-example.html">Basic Layouts</a></li>
<li><a href="../qtquickcontrols/qtquickcontrols-touch-example.html">Touch Gallery</a></li>
</ul>
<p>Feel free to copy and paste the snippets onto this simple Hellow World application to see how QML works.</p>
<a name="handling-user-input"></a>
<h2 id="handling-user-input">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">

  <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">&quot;red&quot;</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">&quot;Hello, World!&quot;</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">&quot;blue&quot;</span>
      }
  }

</pre>
<p>This example can be saved as &quot;ClickableHelloWorld.qml&quot; 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">

  <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">&quot;red&quot;</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">&quot;Hello, World!&quot;</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">&quot;blue&quot;</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 id="property-bindings">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">

  <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 id="animations">Animations</h2>
<p>Properties can also be dynamically updated via animations. The <code>QtQuick</code> 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="whatsnew50.html#text">Text</a> area:</p>
<pre class="qml">

  <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
      <span class="name">color</span>: <span class="string">&quot;lightgray&quot;</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">parent</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 id="defining-custom-qml-types-for-re-use">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 <code>Button</code> type in the <code>Button.qml</code> 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">&quot;red&quot;</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">&quot;Button clicked!&quot;</span>)
      }
  }

</pre>
<p>That type may now be re-used multiple times in the application, as follows:</p>
<div class="table"><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"><a href="../qtquickcontrols/qml-qtquick-controls-button.html">Button</a></span> { <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span> }
      <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-button.html">Button</a></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">&quot;blue&quot;</span> }
      <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-button.html">Button</a></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></div>
<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 id="where-to-go-from-here">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>
<li><a href="qtexamplesandtutorials.html">Qt Examples and Tutorials</a></li>
</ul>
</div>
<!-- @@@qmlfirststeps.html -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2017 The Qt Company Ltd.
   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>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>