summaryrefslogtreecommitdiffstats
path: root/doc/src/declarative/qmlinuse.qdoc
blob: 1127b4cb0c3fa59aac20845802ecaaffc852b9a6 (plain)
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
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
/****************************************************************************
**
** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** No Commercial Usage
** This file contains pre-release code and may not be distributed.
** You may use this file in accordance with the terms and conditions
** contained in the Technology Preview License Agreement accompanying
** this package.
**
** GNU Free Documentation License
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of this
** file.
**
** If you have questions regarding the use of this file, please contact
** Nokia at qt-info@nokia.com.
** $QT_END_LICENSE$
**
****************************************************************************/

/*!
\page qmlinuse.html
\title Using QML elements

\raw HTML
          <div class="item group">
            <div class="secondaryx">
              <div class="toc">
                <h3>
                  <a name="toc">QML Elements</a></h3>
                <ul>
                  <li class="level1"><a href="#basicElements">Basic QML Elements</a></li>
                  <li class="level1"><a href="#visualElements">QML Visual Elements</a></li>
                  <li class="level1"><a href="#AnimAndTrans">QML Animation and Transition Elements</a></li>
                  <li class="level1"><a href="#interactElement">Basic QML Interaction Elements</a></li>
                  <li class="level1"><a href="#eventElements">QML Event Elements</a></li>
                  <li class="level1"><a href="#Position">QML Positioning Elements</a></li>
                  <li class="level1"><a href="#stateElement">QML State Elements</a></li>
                  <li class="level1"><a href="#transformElement">QML Transform Elements</a></li>
                  <li class="level1"><a href="#utilityElement">QML Utility Elements</a></li>
                  <li class="level1"><a href="#modelView">Models and View Elements</a></li>
                  <li class="level1"><a href="#paths">Paths</a></li>
                  <li class="level1"><a href="#ParticleElement">Particle Elements</a></li>
                  <li class="level1"><a href="#bridge">Bridge Elements</a></li>
                </ul>
              </div>
            </div>
            <div class="primary">
              <h1>
                Groups Of Related QML Elements</h1>
              <p>
                QML Elements are grouped by their respective functionalities. Certain elements are
                suited for building complex components while other elements strictly dictate appearances
                and color.</p>
              <div class="cols two group unclear">
                <div class="col first">
                  <p>
                    <i>add something about elements in use in general</i></p>
                </div>
                <div class="col">
                  <img src="images/quick_screens.png" />
                </div>
              </div>
            </div>
          </div>
          <!-- tech domains start -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="basicElements"> Basic QML Elements</a></h2>
              <p>
                Basic elements can be extended to form more complex elements.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-item.html">Item Element</a>
                  - The Item is the most basic of all visual items in QML. Many visual elements inherit
                  properties from the Item element.</li>
                <li><a href="qml-component.html">Component Element</a>
                  - The Component element encapsulates a QML component definition.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="visualElements">QML Visual Elements</a></h2>
              <p>
                Visual elements offer various interactive and graphical functionalities. Visual
                elements can directly set properties that dictate appearances.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-borderimage.html">BorderImage
                  Element</a> - The BorderImage element provides an image that can be used as a border.</li>
                <li><a href="qml-gradient.html">Gradient Element</a>
                  - The Gradient item defines a gradient fill.</li>
                <li><a href="qml-gradientstop.html">GradientStop
                  Element</a> - The GradientStop item defines the color at a position in a Gradient.</li>
                <li><a href="qml-image.html">Image Element</a>
                  - The Image element displays an image from a source.</li>
                <li><a href="qml-rectangle.html">Rectangle Element</a>
                  - The Rectangle item provides a filled rectangle.</li>
                <li><a href="qml-text.html">Text Element</a>
                  - The Text item allows the addition of formatted text to a scene.</li>
                <li><a href="qml-textedit.html">TextEdit Element</a>
                  - The TextEdit item displays multiple lines of editable formatted text.</li>
                <li><a href="qml-textinput.html">TextInput Element</a>
                  - The TextInput item displays an editable line of text.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="AnimAndTrans">QML Animation and Transition Elements</a></h2>
              <p>
                Animation and transition elements control animation behaviors. Animations can run
                in parallel or in series for different value types.
              </p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-anchoranimation.html">AnchorAnimation Element</a> -
                  The AnchorAnimation element animates changes in anchor values.</li>
                <li><a href="qml-animation.html">Animation Element</a> - The Animation
                  element is the base of all QML animations.</li>
                <li><a href="qml-behavior.html">Behavior Element</a> - The Behavior element allows you to specify a default animation for a property change.</li>
                <li><a href="qml-coloranimation.html">ColorAnimation Element</a> - The ColorAnimation element animates changes in color values.</li>
                <li><a href="qml-numberanimation.html">NumberAnimation Element</a> - The NumberAnimation element animates changes in qreal-type values.</li>
                <li><a href="qml-parallelanimation.html">ParallelAnimation Element</a> - The ParallelAnimation element allows animations to be run in parallel.</li>
                <li><a href="qml-parentanimation.html">ParentAnimation Element</a> - The ParentAnimation element animates changes in parent values.</li>
                <li><a href="qml-pauseanimation.html">PauseAnimation Element</a> - The PauseAnimation element provides a pause during an animation.</li>
                <li><a href="qml-propertyaction.html">PropertyAction Element</a> - The PropertyAction element allows immediate property changes during animation.</li>
                <li><a href="qml-propertyanimation.html">PropertyAnimation Element</a> - The PropertyAnimation element animates changes in property values.</li>
                <li><a href="qml-rotationanimation.html">RotationAnimation Element</a> - The RotationAnimation element animates changes in rotational values.</li>
                <li><a href="qml-scriptaction.html">ScriptAction Element</a> - The ScriptAction element allows scripts to be run during an animation.</li>
                <li><a href="qml-sequentialanimation.html">SequentialAnimation Element</a> - The SequentialAnimation element allows animations to be run sequentially.</li>
                <li><a href="qml-smoothedanimation.html">SmoothedAnimation Element</a> - The SmoothedAnimation element allows a property to smoothly track a value.</li>
                <li><a href="qml-springanimation.html">SpringAnimation Element</a> - The SpringAnimation element allows a property to track a value in a spring-like
                  motion.</li>
                <li><a href="qml-transition.html">Transition Element</a> - The Transition element defines animated transitions that occur on state changes.</li>
                <li><a href="qml-vector3danimation.html">Vector3dAnimation Element</a> - The Vector3dAnimation element animates changes in QVector3d values.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="interactElement">QML Interaction Elements</h2></a>
              <p>
                These elements define basic interactions such as touch movements and focus management.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-flickable.html">Flickable Element</a> - The Flickable item provides a surface that can be "flicked".</li>
                <li><a href="qml-flipable.html">Flipable Element</a> - The Flipable item provides a surface that can be flipped or reflected.</li>
                <li><a href="qml-focuspanel.html">FocusPanel Element</a> - The FocusPanel item explicitly creates a focus panel.</li>
                <li><a href="qml-focusscope.html">FocusScope Element</a> - The FocusScope object explicitly creates a focus scope for focus management.</li>
                <li><a href="qml-gesturearea.html">GestureArea Element</a> - The GestureArea item enables simple gesture handling.</li>
                <li><a href="qml-keynavigation.html">KeyNavigation Element</a> - The KeyNavigation attached property supports key navigation by arrow keys.</li>
                <li><a href="qml-keys.html">Keys Element</a> - The Keys attached property provides key handling to Items.</li>
                <li><a href="qml-mousearea.html">MouseArea Element</a> - The MouseArea item enables simple mouse handling.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="eventElements">QML Event Elements</a></h2>
              <p>
                Key and mouse events information are provided in these event elements.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-keyevent.html">KeyEvent Element</a> - The KeyEvent
                  object provides information about a key event.</li>
                <li><a href="qml-mouseevent.html">MouseEvent Element</a> - The MouseEvent
                  object provides information about a mouse event.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="Position">QML Positioning Elements</a></h2>
              <p>
                Using positioning elements, layouts can be defined and their children accessed through
                an index.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-column.html">Column Element</a> - The Column
                  item arranges its children vertically.</li>
                <li><a href="qml-flow.html">Flow Element</a> - The Flow item
                  arranges its children side by side, wrapping as necessary.</li>
                <li><a href="qml-grid.html">Grid Element</a> - The Grid item
                  positions its children in a grid.</li>
                <li><a href="qml-row.html">Row Element</a> - The Row item
                  arranges its children horizontally.</li>
                <li><a href="qml-repeater.html">Repeater Element</a> - The Repeater element allows you to repeat an Item-based component using a model.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">

              <h2><a name="stateElement">QML State Elements</a></h2>
              <p>
                States and groups of states are formed using state elements.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-anchorchanges.html">AnchorChanges Element</a> - The AnchorChanges element allows you to change the anchors of an item in a state.</li>
                <li><a href="qml-parentchange.html">ParentChange Element</a> - The ParentChange element allows you to reparent an Item in a state change.</li>
                <li><a href="qml-propertychanges.html">PropertyChanges Element</a> - The PropertyChanges element describes new property bindings or values for a state.</li>
                <li><a href="qml-state.html">State Element</a> - The State
                  element defines configurations of objects and properties.</li>
                <li><a href="qml-statechangescript.html">StateChangeScript Element</a> - The StateChangeScript element allows you to run a script in a state.</li>
                <li><a href="qml-stategroup.html">StateGroup Element</a> - The StateGroup element provides state support for non-Item elements.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="transformElement">QML Transform Elements</a></h2>
              <p>
                Advanced handling of transformations is controlled in transform elements.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-rotation.html">Rotation Element</a> - The Rotation object provides a way to rotate an Item.</li>
                <li><a href="qml-scale.html">Scale Element</a> - The Scale element provides a way to scale an Item.</li>
                <li><a href="qml-transform.html">Transform Element</a> - The Transform element provide a way of building advanced transformations on Items.</li>
                <li><a href="qml-translate.html">Translate Element</a> - The Translate object provides a way to move an Item without changing its x or y properties.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="utilityElement">QML Utility Elements</a></h2>
              <p>
                These elements handle assorted operations such as event timing, Qt enumerations,
                and font loading.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-binding.html">Binding Element</a> - The Binding element allows arbitrary property bindings to be created.</li>
                <li><a href="qml-connections.html">Connections Element</a> - A Connections element describes generalized connections to signals.</li>
                <li><a href="qml-doublevalidator.html">DoubleValidator Element</a> - Provides a validator for non-integer numbers.</li>
                <li><a href="qml-fontloader.html">FontLoader Element</a> - The FontLoader element allows fonts to be loaded by name or URL.</li>
                <li><a href="qml-intvalidator.html">IntValidator Element</a> - This element provides a validator for integer values.</li>
                <li><a href="qml-layoutitem.html">LayoutItem Element</a> - The LayoutItem element allows declarative UI elements to be placed inside Qt's Graphics View layouts.</li>
                <li><a href="qml-loader.html">Loader Element</a> - The Loader item allows dynamically loading an Item-based subtree from a URL or Component.</li>
                <li><a href="qml-package.html">Package Element</a> - Package provides a bundle for shared contexts in multiple views.</li>
                <li><a href="qml-qt.html">Qt Element</a> - The QML global Qt object provides useful enums and functions from Qt.</li>
                <li><a href="qml-qtobject.html">QtObject Element</a> - The QtObject element is the most basic element in QML.</li>
                <li><a href="qml-regexpvalidator.html">RegExpValidator Element</a> - This element provides a validator for regular expressions.</li>
                <li><a href="qml-systempalette.html">SystemPalette Element</a> - The SystemPalette element provides access to the Qt palettes.</li>
                <li><a href="qml-timer.html">Timer Element</a> - The Timer item triggers a handler at a specified interval.</li>
                <li><a href="qml-workerscript.html">WorkerScript Element</a> - The WorkerScript element enables the use of threads in QML.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="modelView">Models and View Elements</a></h2>
              <p>
                Models and views are used to organize data and control their layouts using delegates.
                Models dictate the data formation and views control the layouts of data in the model.</p>
              <b>View Elements:</b>
              <ul>
                <li><a href="qml-gridview.html">GridView Element</a> - The GridView item provides a grid view of items provided by a model.</li>
                <li><a href="qml-listview.html">ListView Element</a> - The ListView item provides a list view of items provided by a model.</li>
                <li><a href="qml-pathview.html">PathView Element</a> - The PathView element lays out model-provided items on a path.</li>
                <li><a href="qml-webview.html">WebView Element</a> - The WebView item allows you to add Web content to a canvas.</li>
              </ul>
              <b>Model Elements:</b>
              <ul>
                <li><a href="qml-folderlistmodel.html">FolderListModel Element</a> - The FolderListModel provides a model of the contents of a file system folder.</li>
                <li><a href="qml-listelement.html">ListElement Element</a> - A ListElement defines a data item in a ListModel.</li>
                <li><a href="qml-listmodel.html">ListModel Element</a> - The ListModel element defines a free-form list data source.</li>
                <li><a href="qml-visualdatamodel.html">VisualDataModel Element</a> - The VisualDataModel encapsulates a model and delegate.</li>
                <li><a href="qml-visualitemmodel.html">VisualItemModel Element</a> - The VisualItemModel allows items to be provided to a view.</li>
                <li><a href="qml-xmllistmodel.html">XmlListModel Element</a> - The XmlListModel element is used to specify a model using XPath expressions.</li>
                <li><a href="qml-xmlrole.html">XmlRole Element</a> - The XmlRole element allows you to specify a role for an XmlListModel.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="paths">Paths</a></h2>
              <p>
                QML components can be arranged along paths. Path elements allow control over different
                path types.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-path.html">Path Element</a> - A Path object defines a path for use by PathView.</li>
                <li><a href="qml-pathattribute.html">PathAttribute Element</a> - The PathAttribute allows setting an attribute at a given position in a Path.</li>
                <li><a href="qml-pathcubic.html">PathCubic Element</a> - The PathCubic defines a cubic Bezier curve with two control points.</li>
                <li><a href="qml-pathelement.html">PathElement Element</a> - PathElement is the base path type.</li>
                <li><a href="qml-pathline.html">PathLine Element</a> - The PathLine defines a straight line.</li>
                <li><a href="qml-pathpercent.html">PathPercent Element</a> - The PathPercent manipulates the way a path is interpreted.</li>
                <li><a href="qml-pathquad.html">PathQuad Element</a> - The PathQuad defines a quadratic Bezier curve with a control point.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="ParticleElement">Particle Elements</a></h2>
              <p>
                Particle effects are declared and controlled using particle elements.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-particlemotiongravity.html">ParticleMotionGravity Element</a> - The ParticleMotionGravity object moves particles towards a point.</li>
                <li><a href="qml-particlemotionlinear.html">ParticleMotionLinear Element</a> - The ParticleMotionLinear object moves particles linearly.</li>
                <li><a href="qml-particlemotionwander.html">ParticleMotionWander Element</a> - The ParticleMotionWander object moves particles in a somewhat random fashion.</li>
                <li><a href="qml-particles.html">Particles Element</a> - The Particles object generates and moves particles.</li>
              </ul>
            </div>
          </div>
          <!-- next -->
          <div class="item group">
            <hr>
            <div class="secondary">
              <div class="box">
                <!-- video box -->
                <h3>
                  image heading</h3>
                <img src="" />
                <p>
                  img descr.</p>
              </div>
              <!-- video box end -->
            </div>
            <div class="primary">
              <h2><a name="bridge">Bridge Elements</a></h2>
              <p>
                Bridge elements allow direct communication between C++ and QML entities.</p>
              <b>Elements:</b>
              <ul>
                <li><a href="qml-layoutitem.html">LayoutItem Element</a> - The LayoutItem element allows declarative UI elements to be placed inside Qt's Graphics View layouts.</li>
              </ul>
            </div>
          </div>

\endraw



*/