doc/src/declarative/qmlinuse.qdoc

   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 ** No Commercial Usage
  11 ** This file contains pre-release code and may not be distributed.
  12 ** You may use this file in accordance with the terms and conditions
  13 ** contained in the Technology Preview License Agreement accompanying
  14 ** this package.
  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</a></h2>
 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-pincharea.html">PinchArea Element</a> - The PinchArea item enables simple pinch 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