source: trunk/doc/src/declarative/qmlinuse.qdoc

Last change on this file was 846, checked in by Dmitry A. Kuminov, 14 years ago

trunk: Merged in qt 4.7.2 sources from branches/vendor/nokia/qt.
File size: 26.1 KB
RevLine 
[844]1/****************************************************************************
2**
3** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
4** All rights reserved.
5** Contact: Nokia Corporation (qt-info@nokia.com)
6**
7** This file is part of the documentation of the Qt Toolkit.
8**
9** $QT_BEGIN_LICENSE:FDL$
10** Commercial Usage
11** Licensees holding valid Qt Commercial licenses may use this file in
12** accordance with the Qt Commercial License Agreement provided with the
13** Software or, alternatively, in accordance with the terms contained in a
14** written agreement between you and Nokia.
15**
16** GNU Free Documentation License
17** Alternatively, this file may be used under the terms of the GNU Free
18** Documentation License version 1.3 as published by the Free Software
19** Foundation and appearing in the file included in the packaging of this
20** file.
21**
22** If you have questions regarding the use of this file, please contact
23** Nokia at qt-info@nokia.com.
24** $QT_END_LICENSE$
25**
26****************************************************************************/
27
28/*!
29\page qmlinuse.html
30\title Using QML elements
31
32\raw HTML
33 <div class="item group">
34 <div class="secondaryx">
35 <div class="toc">
36 <h3>
37 <a name="toc">QML Elements</a></h3>
38 <ul>
39 <li class="level1"><a href="#basicElements">Basic QML Elements</a></li>
40 <li class="level1"><a href="#visualElements">QML Visual Elements</a></li>
41 <li class="level1"><a href="#AnimAndTrans">QML Animation and Transition Elements</a></li>
42 <li class="level1"><a href="#interactElement">Basic QML Interaction Elements</a></li>
43 <li class="level1"><a href="#eventElements">QML Event Elements</a></li>
44 <li class="level1"><a href="#Position">QML Positioning Elements</a></li>
45 <li class="level1"><a href="#stateElement">QML State Elements</a></li>
46 <li class="level1"><a href="#transformElement">QML Transform Elements</a></li>
47 <li class="level1"><a href="#utilityElement">QML Utility Elements</a></li>
48 <li class="level1"><a href="#modelView">Models and View Elements</a></li>
49 <li class="level1"><a href="#paths">Paths</a></li>
50 <li class="level1"><a href="#ParticleElement">Particle Elements</a></li>
51 <li class="level1"><a href="#bridge">Bridge Elements</a></li>
52 </ul>
53 </div>
54 </div>
55 <div class="primary">
56 <h1>
57 Groups Of Related QML Elements</h1>
58 <p>
59 QML Elements are grouped by their respective functionalities. Certain elements are
60 suited for building complex components while other elements strictly dictate appearances
61 and color.</p>
62 <div class="cols two group unclear">
63 <div class="col first">
64 <p>
65 <i>add something about elements in use in general</i></p>
66 </div>
67 <div class="col">
68 <img src="images/quick_screens.png" />
69 </div>
70 </div>
71 </div>
72 </div>
73 <!-- tech domains start -->
74 <div class="item group">
75 <hr>
76 <div class="secondary">
77 <div class="box">
78 <!-- video box -->
79 <h3>
80 image heading</h3>
81 <img src="" />
82 <p>
83 img descr.</p>
84 </div>
85 <!-- video box end -->
86 </div>
87 <div class="primary">
88 <h2><a name="basicElements"> Basic QML Elements</a></h2>
89 <p>
90 Basic elements can be extended to form more complex elements.</p>
91 <b>Elements:</b>
92 <ul>
93 <li><a href="qml-item.html">Item Element</a>
94 - The Item is the most basic of all visual items in QML. Many visual elements inherit
95 properties from the Item element.</li>
96 <li><a href="qml-component.html">Component Element</a>
97 - The Component element encapsulates a QML component definition.</li>
98 </ul>
99 </div>
100 </div>
101 <!-- next -->
102 <div class="item group">
103 <hr>
104 <div class="secondary">
105 <div class="box">
106 <!-- video box -->
107 <h3>
108 image heading</h3>
109 <img src="" />
110 <p>
111 img descr.</p>
112 </div>
113 <!-- video box end -->
114 </div>
115 <div class="primary">
116 <h2><a name="visualElements">QML Visual Elements</a></h2>
117 <p>
118 Visual elements offer various interactive and graphical functionalities. Visual
119 elements can directly set properties that dictate appearances.</p>
120 <b>Elements:</b>
121 <ul>
122 <li><a href="qml-borderimage.html">BorderImage
123 Element</a> - The BorderImage element provides an image that can be used as a border.</li>
124 <li><a href="qml-gradient.html">Gradient Element</a>
125 - The Gradient item defines a gradient fill.</li>
126 <li><a href="qml-gradientstop.html">GradientStop
127 Element</a> - The GradientStop item defines the color at a position in a Gradient.</li>
128 <li><a href="qml-image.html">Image Element</a>
129 - The Image element displays an image from a source.</li>
130 <li><a href="qml-rectangle.html">Rectangle Element</a>
131 - The Rectangle item provides a filled rectangle.</li>
132 <li><a href="qml-text.html">Text Element</a>
133 - The Text item allows the addition of formatted text to a scene.</li>
134 <li><a href="qml-textedit.html">TextEdit Element</a>
135 - The TextEdit item displays multiple lines of editable formatted text.</li>
136 <li><a href="qml-textinput.html">TextInput Element</a>
137 - The TextInput item displays an editable line of text.</li>
138 </ul>
139 </div>
140 </div>
141 <!-- next -->
142 <div class="item group">
143 <hr>
144 <div class="secondary">
145 <div class="box">
146 <!-- video box -->
147 <h3>
148 image heading</h3>
149 <img src="" />
150 <p>
151 img descr.</p>
152 </div>
153 <!-- video box end -->
154 </div>
155 <div class="primary">
156 <h2><a name="AnimAndTrans">QML Animation and Transition Elements</a></h2>
157 <p>
158 Animation and transition elements control animation behaviors. Animations can run
159 in parallel or in series for different value types.
160 </p>
161 <b>Elements:</b>
162 <ul>
163 <li><a href="qml-anchoranimation.html">AnchorAnimation Element</a> -
164 The AnchorAnimation element animates changes in anchor values.</li>
165 <li><a href="qml-animation.html">Animation Element</a> - The Animation
166 element is the base of all QML animations.</li>
167 <li><a href="qml-behavior.html">Behavior Element</a> - The Behavior element allows you to specify a default animation for a property change.</li>
168 <li><a href="qml-coloranimation.html">ColorAnimation Element</a> - The ColorAnimation element animates changes in color values.</li>
169 <li><a href="qml-numberanimation.html">NumberAnimation Element</a> - The NumberAnimation element animates changes in qreal-type values.</li>
170 <li><a href="qml-parallelanimation.html">ParallelAnimation Element</a> - The ParallelAnimation element allows animations to be run in parallel.</li>
171 <li><a href="qml-parentanimation.html">ParentAnimation Element</a> - The ParentAnimation element animates changes in parent values.</li>
172 <li><a href="qml-pauseanimation.html">PauseAnimation Element</a> - The PauseAnimation element provides a pause during an animation.</li>
173 <li><a href="qml-propertyaction.html">PropertyAction Element</a> - The PropertyAction element allows immediate property changes during animation.</li>
174 <li><a href="qml-propertyanimation.html">PropertyAnimation Element</a> - The PropertyAnimation element animates changes in property values.</li>
175 <li><a href="qml-rotationanimation.html">RotationAnimation Element</a> - The RotationAnimation element animates changes in rotational values.</li>
176 <li><a href="qml-scriptaction.html">ScriptAction Element</a> - The ScriptAction element allows scripts to be run during an animation.</li>
177 <li><a href="qml-sequentialanimation.html">SequentialAnimation Element</a> - The SequentialAnimation element allows animations to be run sequentially.</li>
178 <li><a href="qml-smoothedanimation.html">SmoothedAnimation Element</a> - The SmoothedAnimation element allows a property to smoothly track a value.</li>
179 <li><a href="qml-springanimation.html">SpringAnimation Element</a> - The SpringAnimation element allows a property to track a value in a spring-like
180 motion.</li>
181 <li><a href="qml-transition.html">Transition Element</a> - The Transition element defines animated transitions that occur on state changes.</li>
182 <li><a href="qml-vector3danimation.html">Vector3dAnimation Element</a> - The Vector3dAnimation element animates changes in QVector3d values.</li>
183 </ul>
184 </div>
185 </div>
186 <!-- next -->
187 <div class="item group">
188 <hr>
189 <div class="secondary">
190 <div class="box">
191 <!-- video box -->
192 <h3>
193 image heading</h3>
194 <img src="" />
195 <p>
196 img descr.</p>
197 </div>
198 <!-- video box end -->
199 </div>
200 <div class="primary">
201 <h2><a name="interactElement">QML Interaction Elements</h2></a>
202 <p>
203 These elements define basic interactions such as touch movements and focus management.</p>
204 <b>Elements:</b>
205 <ul>
206 <li><a href="qml-flickable.html">Flickable Element</a> - The Flickable item provides a surface that can be "flicked".</li>
207 <li><a href="qml-flipable.html">Flipable Element</a> - The Flipable item provides a surface that can be flipped or reflected.</li>
208 <li><a href="qml-focuspanel.html">FocusPanel Element</a> - The FocusPanel item explicitly creates a focus panel.</li>
209 <li><a href="qml-focusscope.html">FocusScope Element</a> - The FocusScope object explicitly creates a focus scope for focus management.</li>
210 <li><a href="qml-gesturearea.html">GestureArea Element</a> - The GestureArea item enables simple gesture handling.</li>
211 <li><a href="qml-keynavigation.html">KeyNavigation Element</a> - The KeyNavigation attached property supports key navigation by arrow keys.</li>
212 <li><a href="qml-keys.html">Keys Element</a> - The Keys attached property provides key handling to Items.</li>
213 <li><a href="qml-mousearea.html">MouseArea Element</a> - The MouseArea item enables simple mouse handling.</li>
214 </ul>
215 </div>
216 </div>
217 <!-- next -->
218 <div class="item group">
219 <hr>
220 <div class="secondary">
221 <div class="box">
222 <!-- video box -->
223 <h3>
224 image heading</h3>
225 <img src="" />
226 <p>
227 img descr.</p>
228 </div>
229 <!-- video box end -->
230 </div>
231 <div class="primary">
232 <h2><a name="eventElements">QML Event Elements</a></h2>
233 <p>
234 Key and mouse events information are provided in these event elements.</p>
235 <b>Elements:</b>
236 <ul>
237 <li><a href="qml-keyevent.html">KeyEvent Element</a> - The KeyEvent
238 object provides information about a key event.</li>
239 <li><a href="qml-mouseevent.html">MouseEvent Element</a> - The MouseEvent
240 object provides information about a mouse event.</li>
241 </ul>
242 </div>
243 </div>
244 <!-- next -->
245 <div class="item group">
246 <hr>
247 <div class="secondary">
248 <div class="box">
249 <!-- video box -->
250 <h3>
251 image heading</h3>
252 <img src="" />
253 <p>
254 img descr.</p>
255 </div>
256 <!-- video box end -->
257 </div>
258 <div class="primary">
259 <h2><a name="Position">QML Positioning Elements</a></h2>
260 <p>
261 Using positioning elements, layouts can be defined and their children accessed through
262 an index.</p>
263 <b>Elements:</b>
264 <ul>
265 <li><a href="qml-column.html">Column Element</a> - The Column
266 item arranges its children vertically.</li>
267 <li><a href="qml-flow.html">Flow Element</a> - The Flow item
268 arranges its children side by side, wrapping as necessary.</li>
269 <li><a href="qml-grid.html">Grid Element</a> - The Grid item
270 positions its children in a grid.</li>
271 <li><a href="qml-row.html">Row Element</a> - The Row item
272 arranges its children horizontally.</li>
273 <li><a href="qml-repeater.html">Repeater Element</a> - The Repeater element allows you to repeat an Item-based component using a model.</li>
274 </ul>
275 </div>
276 </div>
277 <!-- next -->
278 <div class="item group">
279 <hr>
280 <div class="secondary">
281 <div class="box">
282 <!-- video box -->
283 <h3>
284 image heading</h3>
285 <img src="" />
286 <p>
287 img descr.</p>
288 </div>
289 <!-- video box end -->
290 </div>
291 <div class="primary">
292
293 <h2><a name="stateElement">QML State Elements</a></h2>
294 <p>
295 States and groups of states are formed using state elements.</p>
296 <b>Elements:</b>
297 <ul>
298 <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>
299 <li><a href="qml-parentchange.html">ParentChange Element</a> - The ParentChange element allows you to reparent an Item in a state change.</li>
300 <li><a href="qml-propertychanges.html">PropertyChanges Element</a> - The PropertyChanges element describes new property bindings or values for a state.</li>
301 <li><a href="qml-state.html">State Element</a> - The State
302 element defines configurations of objects and properties.</li>
303 <li><a href="qml-statechangescript.html">StateChangeScript Element</a> - The StateChangeScript element allows you to run a script in a state.</li>
304 <li><a href="qml-stategroup.html">StateGroup Element</a> - The StateGroup element provides state support for non-Item elements.</li>
305 </ul>
306 </div>
307 </div>
308 <!-- next -->
309 <div class="item group">
310 <hr>
311 <div class="secondary">
312 <div class="box">
313 <!-- video box -->
314 <h3>
315 image heading</h3>
316 <img src="" />
317 <p>
318 img descr.</p>
319 </div>
320 <!-- video box end -->
321 </div>
322 <div class="primary">
323 <h2><a name="transformElement">QML Transform Elements</a></h2>
324 <p>
325 Advanced handling of transformations is controlled in transform elements.</p>
326 <b>Elements:</b>
327 <ul>
328 <li><a href="qml-rotation.html">Rotation Element</a> - The Rotation object provides a way to rotate an Item.</li>
329 <li><a href="qml-scale.html">Scale Element</a> - The Scale element provides a way to scale an Item.</li>
330 <li><a href="qml-transform.html">Transform Element</a> - The Transform element provide a way of building advanced transformations on Items.</li>
331 <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>
332 </ul>
333 </div>
334 </div>
335 <!-- next -->
336 <div class="item group">
337 <hr>
338 <div class="secondary">
339 <div class="box">
340 <!-- video box -->
341 <h3>
342 image heading</h3>
343 <img src="" />
344 <p>
345 img descr.</p>
346 </div>
347 <!-- video box end -->
348 </div>
349 <div class="primary">
350 <h2><a name="utilityElement">QML Utility Elements</a></h2>
351 <p>
352 These elements handle assorted operations such as event timing, Qt enumerations,
353 and font loading.</p>
354 <b>Elements:</b>
355 <ul>
356 <li><a href="qml-binding.html">Binding Element</a> - The Binding element allows arbitrary property bindings to be created.</li>
357 <li><a href="qml-connections.html">Connections Element</a> - A Connections element describes generalized connections to signals.</li>
358 <li><a href="qml-doublevalidator.html">DoubleValidator Element</a> - Provides a validator for non-integer numbers.</li>
359 <li><a href="qml-fontloader.html">FontLoader Element</a> - The FontLoader element allows fonts to be loaded by name or URL.</li>
360 <li><a href="qml-intvalidator.html">IntValidator Element</a> - This element provides a validator for integer values.</li>
361 <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>
362 <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>
363 <li><a href="qml-package.html">Package Element</a> - Package provides a bundle for shared contexts in multiple views.</li>
364 <li><a href="qml-qt.html">Qt Element</a> - The QML global Qt object provides useful enums and functions from Qt.</li>
365 <li><a href="qml-qtobject.html">QtObject Element</a> - The QtObject element is the most basic element in QML.</li>
366 <li><a href="qml-regexpvalidator.html">RegExpValidator Element</a> - This element provides a validator for regular expressions.</li>
367 <li><a href="qml-systempalette.html">SystemPalette Element</a> - The SystemPalette element provides access to the Qt palettes.</li>
368 <li><a href="qml-timer.html">Timer Element</a> - The Timer item triggers a handler at a specified interval.</li>
369 <li><a href="qml-workerscript.html">WorkerScript Element</a> - The WorkerScript element enables the use of threads in QML.</li>
370 </ul>
371 </div>
372 </div>
373 <!-- next -->
374 <div class="item group">
375 <hr>
376 <div class="secondary">
377 <div class="box">
378 <!-- video box -->
379 <h3>
380 image heading</h3>
381 <img src="" />
382 <p>
383 img descr.</p>
384 </div>
385 <!-- video box end -->
386 </div>
387 <div class="primary">
388 <h2><a name="modelView">Models and View Elements</a></h2>
389 <p>
390 Models and views are used to organize data and control their layouts using delegates.
391 Models dictate the data formation and views control the layouts of data in the model.</p>
392 <b>View Elements:</b>
393 <ul>
394 <li><a href="qml-gridview.html">GridView Element</a> - The GridView item provides a grid view of items provided by a model.</li>
395 <li><a href="qml-listview.html">ListView Element</a> - The ListView item provides a list view of items provided by a model.</li>
396 <li><a href="qml-pathview.html">PathView Element</a> - The PathView element lays out model-provided items on a path.</li>
397 <li><a href="qml-webview.html">WebView Element</a> - The WebView item allows you to add Web content to a canvas.</li>
398 </ul>
399 <b>Model Elements:</b>
400 <ul>
401 <li><a href="qml-folderlistmodel.html">FolderListModel Element</a> - The FolderListModel provides a model of the contents of a file system folder.</li>
402 <li><a href="qml-listelement.html">ListElement Element</a> - A ListElement defines a data item in a ListModel.</li>
403 <li><a href="qml-listmodel.html">ListModel Element</a> - The ListModel element defines a free-form list data source.</li>
404 <li><a href="qml-visualdatamodel.html">VisualDataModel Element</a> - The VisualDataModel encapsulates a model and delegate.</li>
405 <li><a href="qml-visualitemmodel.html">VisualItemModel Element</a> - The VisualItemModel allows items to be provided to a view.</li>
406 <li><a href="qml-xmllistmodel.html">XmlListModel Element</a> - The XmlListModel element is used to specify a model using XPath expressions.</li>
407 <li><a href="qml-xmlrole.html">XmlRole Element</a> - The XmlRole element allows you to specify a role for an XmlListModel.</li>
408 </ul>
409 </div>
410 </div>
411 <!-- next -->
412 <div class="item group">
413 <hr>
414 <div class="secondary">
415 <div class="box">
416 <!-- video box -->
417 <h3>
418 image heading</h3>
419 <img src="" />
420 <p>
421 img descr.</p>
422 </div>
423 <!-- video box end -->
424 </div>
425 <div class="primary">
426 <h2><a name="paths">Paths</a></h2>
427 <p>
428 QML components can be arranged along paths. Path elements allow control over different
429 path types.</p>
430 <b>Elements:</b>
431 <ul>
432 <li><a href="qml-path.html">Path Element</a> - A Path object defines a path for use by PathView.</li>
433 <li><a href="qml-pathattribute.html">PathAttribute Element</a> - The PathAttribute allows setting an attribute at a given position in a Path.</li>
434 <li><a href="qml-pathcubic.html">PathCubic Element</a> - The PathCubic defines a cubic Bezier curve with two control points.</li>
435 <li><a href="qml-pathelement.html">PathElement Element</a> - PathElement is the base path type.</li>
436 <li><a href="qml-pathline.html">PathLine Element</a> - The PathLine defines a straight line.</li>
437 <li><a href="qml-pathpercent.html">PathPercent Element</a> - The PathPercent manipulates the way a path is interpreted.</li>
438 <li><a href="qml-pathquad.html">PathQuad Element</a> - The PathQuad defines a quadratic Bezier curve with a control point.</li>
439 </ul>
440 </div>
441 </div>
442 <!-- next -->
443 <div class="item group">
444 <hr>
445 <div class="secondary">
446 <div class="box">
447 <!-- video box -->
448 <h3>
449 image heading</h3>
450 <img src="" />
451 <p>
452 img descr.</p>
453 </div>
454 <!-- video box end -->
455 </div>
456 <div class="primary">
457 <h2><a name="ParticleElement">Particle Elements</a></h2>
458 <p>
459 Particle effects are declared and controlled using particle elements.</p>
460 <b>Elements:</b>
461 <ul>
462 <li><a href="qml-particlemotiongravity.html">ParticleMotionGravity Element</a> - The ParticleMotionGravity object moves particles towards a point.</li>
463 <li><a href="qml-particlemotionlinear.html">ParticleMotionLinear Element</a> - The ParticleMotionLinear object moves particles linearly.</li>
464 <li><a href="qml-particlemotionwander.html">ParticleMotionWander Element</a> - The ParticleMotionWander object moves particles in a somewhat random fashion.</li>
465 <li><a href="qml-particles.html">Particles Element</a> - The Particles object generates and moves particles.</li>
466 </ul>
467 </div>
468 </div>
469 <!-- next -->
470 <div class="item group">
471 <hr>
472 <div class="secondary">
473 <div class="box">
474 <!-- video box -->
475 <h3>
476 image heading</h3>
477 <img src="" />
478 <p>
479 img descr.</p>
480 </div>
481 <!-- video box end -->
482 </div>
483 <div class="primary">
484 <h2><a name="bridge">Bridge Elements</a></h2>
485 <p>
486 Bridge elements allow direct communication between C++ and QML entities.</p>
487 <b>Elements:</b>
488 <ul>
489 <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>
490 </ul>
491 </div>
492 </div>
493
494\endraw
495
496
497
498*/
499
Note: See TracBrowser for help on using the repository browser.