doc/src/declarative/qmlinuse.qdoc

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