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
|
<?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" />
<!-- elements.qdoc -->
<title>Qt 4.8: QML Elements</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 Elements</li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#basic-qml-elements">Basic QML Elements</a></li>
<li class="level1"><a href="#graphics">Graphics</a></li>
<li class="level1"><a href="#text-handling">Text Handling</a></li>
<li class="level1"><a href="#mouse-and-interaction-area">Mouse and Interaction Area</a></li>
<li class="level1"><a href="#positioners-and-repeater">Positioners and Repeater</a></li>
<li class="level1"><a href="#transformations">Transformations</a></li>
<li class="level1"><a href="#states">States</a></li>
<li class="level1"><a href="#animation-and-transitions">Animation and Transitions</a></li>
<li class="level1"><a href="#models-and-data-handling">Models and Data Handling</a></li>
<li class="level1"><a href="#views">Views</a></li>
<li class="level1"><a href="#path-definition">Path Definition</a></li>
<li class="level1"><a href="#utility">Utility</a></li>
<li class="level1"><a href="#graphical-effects">Graphical Effects</a></li>
<li class="level1"><a href="#add-on-elements">Add-On Elements</a></li>
</ul>
</div>
<h1 class="title">QML Elements</h1>
<span class="subtitle"></span>
<!-- $$$qdeclarativeelements.html-description -->
<div class="descr"> <a name="details"></a>
<a name="elements"></a><p>These are the functionally grouped lists of QML elements as part of <a href="qtquick.html">Qt Quick</a>.</p>
<p>Elements are declared with the their name and two curly braces. Elements may be nested in elements, thereby creating a parent-child relationship between the two elements.</p>
<p>To see the QML elements listed by functional area, see the <a href="qml-groups.html">Groups Of Related QML Elements</a> page.</p>
<a name="basic-qml-elements"></a>
<h2>Basic QML Elements</h2>
<ul>
<li><a href="qml-item.html">Item</a> - Basic item element inherited by QML elements</li>
<li><a href="qml-component.html">Component</a> - Encapsulates QML elements during importing</li>
<li><a href="qml-qtobject.html">QtObject</a> - Basic element containing only the <tt>objectName</tt> property</li>
</ul>
<a name="graphics"></a>
<h2>Graphics</h2>
<ul>
<li><a href="qml-rectangle.html">Rectangle</a> - A rectangle element</li>
<li><a href="qml-image.html">Image</a> - For incorporating bitmaps into a scene</li>
<li><a href="qml-borderimage.html">BorderImage</a> - Allows the use of images as borders</li>
<li><a href="qml-animatedimage.html">AnimatedImage</a> - For playing animations stored in a series of frames</li>
<li><a href="qml-gradient.html">Gradient</a> - For defining a color gradient</li>
<li><a href="qml-gradientstop.html">GradientStop</a> - Used to define a color within a <a href="qml-gradient.html">Gradient</a></li>
<li><a href="qml-systempalette.html">SystemPalette</a> - Provides access to the Qt palettes</li>
</ul>
<a name="text-handling"></a>
<h2>Text Handling</h2>
<ul>
<li><a href="qml-text.html">Text</a> - For inserting formatted text into a scene</li>
<li><a href="qml-textinput.html">TextInput</a> - Captures user key input</li>
<li><a href="qml-textedit.html">TextEdit</a> - Displays multiple lines of editable formatted text</li>
<li><a href="qml-intvalidator.html">IntValidator</a> - Validates values as integers</li>
<li><a href="qml-doublevalidator.html">DoubleValidator</a> - Validates real values</li>
<li><a href="qml-regexpvalidator.html">RegExpValidator</a> - Validator for string regular expressions</li>
<li><a href="qml-fontloader.html">FontLoader</a> - Loads fonts by name or URL</li>
</ul>
<a name="mouse-and-interaction-area"></a>
<h2>Mouse and Interaction Area</h2>
<ul>
<li><a href="qml-mousearea.html">MouseArea</a> - Sets up an area for mouse interaction</li>
<li><a href="qml-keys.html">Keys</a> - Provides components with attached properties to handle key input.</li>
<li><a href="qml-focusscope.html">FocusScope</a> - Element that mediate keyboard focus changes</li>
<li><a href="qml-flickable.html">Flickable</a> - Provides a surface that can be "flicked"</li>
<li><a href="qml-flipable.html">Flipable</a> - Provides a surface that produces "flipping" effects</li>
<li><a href="qml-pincharea.html">PinchArea</a> - Enables simple pinch gesture handling</li>
</ul>
<a name="positioners-and-repeater"></a>
<h2>Positioners and Repeater</h2>
<ul>
<li><a href="qml-column.html">Column</a> - Arranges its children vertically</li>
<li><a href="qml-row.html">Row</a> - Arranges its children horizontally</li>
<li><a href="qml-grid.html">Grid</a> - Positions its children in a grid</li>
<li><a href="qml-flow.html">Flow</a> - Positions its children with wrapping support</li>
<li><a href="qml-repeater.html">Repeater</a> - Uses a model to create multiple components</li>
</ul>
<a name="transformations"></a>
<h2>Transformations</h2>
<ul>
<li><a href="qml-scale.html">Scale</a> - Assigns item scaling behaviors</li>
<li><a href="qml-rotation.html">Rotation</a> - Assigns item rotation behaviors</li>
<li><a href="qml-translate.html">Translate</a> - Assigns item translation behaviors</li>
</ul>
<a name="states"></a>
<h2>States</h2>
<ul>
<li><a href="qml-state.html">State</a> - Defines sets of configurations of objects and properties</li>
<li><a href="qml-propertychanges.html">PropertyChanges</a> - Describes property changes within a state</li>
<li><a href="qml-stategroup.html">StateGroup</a> - Contains a set of states and state transitions</li>
<li><a href="qml-statechangescript.html">StateChangeScript</a> - Allows script binding in a state</li>
<li><a href="qml-parentchange.html">ParentChange</a> - Re-parent an Item in a state change</li>
<li><a href="qml-anchorchanges.html">AnchorChanges</a> - Change the anchors of an item in a state</li>
</ul>
<a name="animation-and-transitions"></a>
<h2>Animation and Transitions</h2>
<ul>
<li><a href="qml-transition.html">Transition</a> - Animates transitions during state changes</li>
<li><a href="qml-sequentialanimation.html">SequentialAnimation</a> - Runs animations sequentially</li>
<li><a href="qml-parallelanimation.html">ParallelAnimation</a> - Runs animations in parallel</li>
<li><a href="qml-behavior.html">Behavior</a> - Specifies a default animation for property changes</li>
<li><a href="qml-propertyaction.html">PropertyAction</a> - Sets immediate property changes during animation</li>
<li><a href="qml-pauseanimation.html">PauseAnimation</a> - Introduces a pause in an animation</li>
<li><a href="qml-smoothedanimation.html">SmoothedAnimation</a> - Allows a property to smoothly track a value</li>
<li><a href="qml-springanimation.html">SpringAnimation</a> - Allows a property to track a value in a spring-like motion</li>
<li><a href="qml-scriptaction.html">ScriptAction</a> - Runs scripts during an animation</li>
</ul>
<p>Elements that animate properties based on data types</p>
<ul>
<li><a href="qml-propertyanimation.html">PropertyAnimation</a> - Animates property changes</li>
<li><a href="qml-numberanimation.html">NumberAnimation</a> - Animates properties of type qreal</li>
<li><a href="qml-vector3danimation.html">Vector3dAnimation</a> - Animates properties of type QVector3d</li>
<li><a href="qml-coloranimation.html">ColorAnimation</a> - Animates color changes</li>
<li><a href="qml-rotationanimation.html">RotationAnimation</a> - Animates rotations</li>
<li><a href="qml-parentanimation.html">ParentAnimation</a> - Animates parent changes</li>
<li><a href="qml-anchoranimation.html">AnchorAnimation</a> - Animates anchor changes</li>
</ul>
<a name="models-and-data-handling"></a>
<h2>Models and Data Handling</h2>
<ul>
<li><a href="qml-listmodel.html">ListModel</a> - Defines a list of data</li>
<li><a href="qml-listelement.html">ListElement</a> - Defines a data item in a <a href="qml-listmodel.html">ListModel</a></li>
<li><a href="qml-visualitemmodel.html">VisualItemModel</a> - Contains items that already defines its own visual delegate</li>
<li><a href="qml-visualdatamodel.html">VisualDataModel</a> - Encapsulates a model and a delegate</li>
<li><a href="qml-xmllistmodel.html">XmlListModel</a> - Specifies a model using XPath expressions</li>
<li><a href="qml-xmlrole.html">XmlRole</a> - Specifies a role for an <a href="qml-xmllistmodel.html">XmlListModel</a></li>
<li><a href="qml-binding.html">Binding</a> - Binds any value to any property</li>
<li><a href="qml-package.html">Package</a> - Collection that enables sharing of items within different views</li>
</ul>
<a name="views"></a>
<h2>Views</h2>
<ul>
<li><a href="qml-listview.html">ListView</a> - Provides a list visualization of a model</li>
<li><a href="qml-gridview.html">GridView</a> - Provides a grid visualization of a model</li>
<li><a href="qml-pathview.html">PathView</a> - Visualizes a model's contents along a path. See <a href="#path-definition">Path Elements</a> for more information.</li>
</ul>
<a name="path-definition"></a>
<h2>Path Definition</h2>
<ul>
<li><a href="qml-path.html">Path</a> - Defines a path used by <a href="qml-pathview.html">PathView</a></li>
<li><a href="qml-pathline.html">PathLine</a> - Defines a line in <a href="qml-path.html">Path</a></li>
<li><a href="qml-pathquad.html">PathQuad</a> - Defines a quadratic Bezier curve in a <a href="qml-path.html">Path</a></li>
<li><a href="qml-pathcubic.html">PathCubic</a> - Defines a cubic Bezier curve in a <a href="qml-path.html">Path</a></li>
<li><a href="qml-pathattribute.html">PathAttribute</a> - Allows the setting of attributes along a <a href="qml-path.html">Path</a></li>
<li><a href="qml-pathpercent.html">PathPercent</a> - Modifies the item distribution along a <a href="qml-path.html">Path</a></li>
</ul>
<a name="utility"></a>
<h2>Utility</h2>
<ul>
<li><a href="qml-connections.html">Connections</a> - Explicitly connects signals and signal handlers</li>
<li><a href="qml-timer.html">Timer</a> - Provides timed triggers</li>
<li><a href="qml-qt.html">Qt</a> - The QML global Qt object provides useful enums and functions from Qt.</li>
<li><a href="qml-workerscript.html">WorkerScript</a> - Enables the use of threads in QML</li>
<li><a href="qml-loader.html">Loader</a> - Controls the loading of items or components</li>
<li><a href="qml-layoutitem.html">LayoutItem</a> - Allows declarative UI elements inside Qt's Graphics View layouts</li>
</ul>
<a name="graphical-effects"></a>
<h2>Graphical Effects</h2>
<ul>
<li><a href="qml-particles.html">Particles</a> - Generates and animates particles</li>
<li><a href="qml-particlemotionlinear.html">ParticleMotionLinear</a> - Adds linear motion behavior to <a href="qml-particles.html">Particles</a></li>
<li><a href="qml-particlemotiongravity.html">ParticleMotionGravity</a> - Adds gravitational motion to <a href="qml-particles.html">Particles</a></li>
<li><a href="qml-particlemotionwander.html">ParticleMotionWander</a> - Adds varied motions to <a href="qml-particles.html">Particles</a></li>
<li><a href="qml-shadereffectitem.html">ShaderEffectItem</a> - Enables the use of OpenGL Shading Language together with QML</li>
<li><a href="qml-shadereffectsource.html">ShaderEffectSource</a> - Encapsulates QML item tree as a source item for <a href="qml-shadereffectitem.html">ShaderEffectItem</a></li>
</ul>
<a name="add-on-elements"></a>
<h2>Add-On Elements</h2>
<p>These elements are not included in the <tt>QtQuick 1.0</tt> module. Their respective QML bindings should first be obtained and installed.</p>
<ul>
<li><a href="qml-webview.html">QtWebKit QML Module - WebView Element</a> - For displaying Web contents</li>
<li><a href="http://doc.qt.nokia.com/qtmobility-1.1.0/qml-plugins.html">Mobility QML Plugins</a></li>
<li><a href="http://doc.qt.nokia.com/qt-components-symbian-1.1/index.html">Qt Quick Components</a></li>
</ul>
</div>
<!-- @@@qdeclarativeelements.html -->
<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>
|
