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
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<!-- qmlsyntax.qdoc -->
<title>Qt 4.8: QML Syntax</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>QML Syntax</li>
</ul>
</div>
</div>
<div class="content mainContent">
<p class="naviNextPrevious headerNavi">
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#basic-qml-syntax">Basic QML Syntax</a></li>
<li class="level1"><a href="#expressions">Expressions</a></li>
<li class="level1"><a href="#qml-comments">QML Comments</a></li>
</ul>
</div>
<h1 class="title">QML Syntax</h1>
<span class="subtitle"></span>
<!-- $$$qmlsyntax.html-description -->
<div class="descr"> <a name="details"></a>
<p>QML is a declarative language designed to describe the user interface of a program: both what it looks like, and how it behaves. In QML, a user interface is specified as a tree of objects with properties.</p>
<p>JavaScript is used as a scripting language in QML, so you may want to learn a bit more about it (<a href="https://developer.mozilla.org/en/JavaScript/Guide">Javascript Guide</a>) before diving deeper into QML.</p>
<a name="basic-qml-syntax"></a>
<h2>Basic QML Syntax</h2>
<p>QML looks like this:</p>
<pre class="cpp"> import <span class="type">QtQuick</span> <span class="number">1.0</span>
Rectangle {
width: <span class="number">200</span>
height: <span class="number">200</span>
color: <span class="string">"blue"</span>
Image {
source: <span class="string">"pics/logo.png"</span>
anchors<span class="operator">.</span>centerIn: parent
}
}</pre>
<p>Objects are specified by their type, followed by a pair of braces. Object types always begin with a capital letter. In the above example, there are two objects, a <a href="qml-rectangle.html">Rectangle</a>, and an <a href="qml-image.html">Image</a>. Between the braces, we can specify information about the object, such as its properties.</p>
<p>Properties are specified as <tt>propertyname: value</tt>. In the above example, we can see the Image has a property named <tt>source</tt>, which has been assigned the value <tt>"pics/logo.png"</tt>. The property and its value are separated by a colon.</p>
<p>Properties can be specified one-per-line:</p>
<pre class="cpp"> Rectangle {
width: <span class="number">100</span>
height: <span class="number">100</span>
}</pre>
<p>or you can put multiple properties on a single line:</p>
<pre class="cpp"> Rectangle { width: <span class="number">100</span>; height: <span class="number">100</span> }</pre>
<p>When multiple property/value pairs are specified on a single line, they must be separated by a semicolon.</p>
<p>The <tt>import</tt> statement imports the <tt>Qt</tt> <a href="qdeclarativemodules.html#qml-modules">module</a>, which contains all of the standard <a href="qdeclarativeelements.html">QML Elements</a>. Without this import statement, the <a href="qml-rectangle.html">Rectangle</a> and <a href="qml-image.html">Image</a> elements would not be available.</p>
<a name="expressions"></a>
<h2>Expressions</h2>
<p>In addition to assigning values to properties, you can also assign expressions written in JavaScript.</p>
<pre class="cpp"> Rotation {
angle: <span class="number">360</span> <span class="operator">*</span> <span class="number">3</span>
}</pre>
<p>These expressions can include references to other objects and properties, in which case a <i>binding</i> is established: when the value of the expression changes, the property the expression has been assigned to is automatically updated to that value.</p>
<pre class="cpp"> Item {
Text {
id: text1
text: <span class="string">"Hello World"</span>
}
Text {
id: text2
text: text1<span class="operator">.</span>text
}
}</pre>
<p>In the example above, the <tt>text2</tt> object will display the same text as <tt>text1</tt>. If <tt>text1</tt> is changed, <tt>text2</tt> is automatically changed to the same value.</p>
<p>Note that to refer to other objects, we use their <i>id</i> values. (See below for more information on the <i>id</i> property.)</p>
<a name="qml-comments"></a>
<h2>QML Comments</h2>
<p>Commenting in QML is similar to JavaScript.</p>
<ul>
<li>Single line comments start with // and finish at the end of the line.</li>
<li>Multiline comments start with /* and finish with */</li>
</ul>
<pre class="qml"> <span class="type"><a href="qml-text.html">Text</a></span> {
<span class="name">text</span>: <span class="string">"Hello world!"</span> <span class="comment">//a basic greeting</span>
<span class="comment">/*
We want this text to stand out from the rest so
we give it a large size and different font.
*/</span>
<span class="name">font</span>.family: <span class="string">"Helvetica"</span>
<span class="name">font</span>.pointSize: <span class="number">24</span>
}</pre>
<p>Comments are ignored by the engine. They are useful for explaining what you are doing; for referring back to at a later date, or for others reading your QML files.</p>
<p>Comments can also be used to prevent the execution of code, which is sometimes useful for tracking down problems.</p>
<pre class="cpp"> Text {
text: <span class="string">"Hello world!"</span>
<span class="comment">//opacity: 0.5</span>
}</pre>
<p>In the above example, the Text object will have normal opacity, since the line opacity: 0.5 has been turned into a comment.</p>
</div>
<!-- @@@qmlsyntax.html -->
<p class="naviNextPrevious footerNavi">
</p>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
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.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>
|
