src/quick/doc/src/concepts/topic.qdoc

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the documentation of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:FDL$
   9 ** GNU Free Documentation License
  10 ** Alternatively, this file may be used under the terms of the GNU Free
  11 ** Documentation License version 1.3 as published by the Free Software
  12 ** Foundation and appearing in the file included in the packaging of
  13 ** this file.
  14 **
  15 ** Other Usage
  16 ** Alternatively, this file may be used in accordance with the terms
  17 ** and conditions contained in a signed written agreement between you
  18 ** and Nokia.
  19 **
  20 **
  21 **
  22 **
  23 **
  24 ** $QT_END_LICENSE$
  25 **
  26 ****************************************************************************/
  27
  28 /*!
  29 \page qtquick-concepts-topic.html
  30 \title Important Concepts In Qt Quick
  31 \brief Overview of important concepts in Qt Quick
  32
  33 Qt Quick provides everything needed to create a rich application with a fluid
  34 and dynamic user interface.  It is based around behavior declaration rather
  35 than imperative programming, and defines a visual canvas with its own
  36 coordinate system and drawing implementation.  There are many ways to position
  37 user-interface elements on the screen, and animation and transition effects are
  38 a first-class concept in Qt Quick.
  39
  40 \section1 The Visual Canvas
  41
  42 The visual canvas provided by the Qt Quick is a two dimensional canvas with
  43 z-ordering.
  44
  45 \section2 Coordinate System
  46
  47 The top-left pixel in the Qt Quick coordinate system is the [0, 0] pixel.
  48 The coordinate system of a child item is relative to its visual parent item.
  49 See the documentation on the
  50 \l{qtquick-concepts-visual-coordinates.html}{Coordinate System} for
  51 in-depth information about the coordinate system utilized by Qt Quick.
  52
  53 \section2 Visual Parent
  54
  55 There are two separate kinds of parenting in a QML application which uses
  56 Qt Quick.  The first kind is the ownership-parent (also known as the QObject
  57 parent) which determines object lifetime semantics.  The second kind is the
  58 visual-parent which determines where on the canvas an item is drawn, and also
  59 certain properties (for example, opacity applies to visual children).
  60
  61 In almost all cases, the visual-parent is identical to the ownership-parent.
  62 See the documentation about the \l{qtquick-concepts-visual-parent.html}
  63 {Visual Parent}for more in-depth information on the topic.
  64
  65 \section2 Scene Graph
  66
  67 Modern computer systems and devices use OpenGL to draw graphics.  Qt Quick
  68 requires OpenGL and it is used to display applications developed with
  69 Qt Quick in QML.  In particular, Qt Quick defines a scene graph which is then
  70 rendered.  See the documentation about the
  71 \l{qtquick-concepts-visual-scenegraph.html}{Scene Graph} for in-depth
  72 information about the concept of a scene graph and why it is beneficial, and
  73 about the scene graph implementation provided by Qt Quick.
  74
  75 \section1 Positioning
  76
  77 Visual items in QML can be positioned in a variety of ways.  The most important
  78 positioning-related concept is that of anchoring, a form of relative
  79 positioning where items can be anchored (or attached) to each other at certain
  80 boundaries.  Other positioning concepts include absolute positioning,
  81 positioning with coordinate bindings, and layouts.
  82
  83 \section1 Visual Objects
  84
  85 Most user-interfaces include some visual aspect.  While multimodal interfaces
  86 are extremely interesting and can be very engaging and interactive (using,
  87 for example, haptic feedback and sounds to notify the user of changes in the
  88 state of an application), visual objects in a user-interface are able to convey
  89 a huge amount of information to the user at a glance.
  90
  91 See the \l{qtquick-qmltypereference.html}{Qt Quick QML type reference} for the
  92 complete list of visual object types provided by Qt Quick.
  93
  94 \section2 Manual Positioning
  95
  96 Items can be positioned manually.  If the user-interface is going to be
  97 static, manual positioning provides the most efficient form of positioning.
  98 See the documentation about
  99 \l{qtquick-concepts-positioning.html#manual-positioning}
 100 {Absolute Positioning} for in-depth information about this form of positioning.
 101
 102 \section2 Positioning With Bindings
 103
 104 Items may also be positioned by assigning binding expressions to the properties
 105 associated with their location in the visual canvas.  This type of positioning
 106 is the most highly dynamic, however some performance cost is associated with
 107 positioning items in this manner.  See the documentation on
 108 \l{qtquick-concepts-positioning.html#positioning-with-bindings}
 109 {positioning with bindings} for in-depth information about this form of
 110 positioning.
 111
 112 \section2 Anchors
 113
 114 Anchors allows an item to be placed either adjacent to or inside of another,
 115 by attaching one or more of the item's anchor-points (boundaries) to an
 116 anchor-point of the other.  These anchors will remain even if the dimensions
 117 or location of one of the items changes, allowing for highly dynamic
 118 user-interfaces.  For in-depth information about anchoring, see the
 119 documentation about \l{qtquick-concepts-positioning-anchors.html}
 120 {positioning with anchors}
 121
 122 \section2 Layouts
 123
 124 Qt Quick also provides some built-in layout items.  For many use cases, the
 125 best layout to use is a simple grid, row, or column, and Qt Quick provides
 126 items which will layout children in these formations in the most efficient
 127 manner possible.  See the documentation about
 128 \l{qtquick-concepts-positioning-layouts.html}{layout} for in-depth information
 129 on the topic.
 130
 131 \section2 Right-To-Left Support
 132
 133 The directionality of the written form of a language often has a great impact
 134 on how the visual elements of a user-interface should be positioned.  Qt Quick
 135 supports right-to-left positioning of elements through the predefined-layouts
 136 as well as right-to-left text layouts.
 137
 138 Please see the documentation about
 139 \l{qtquick-concepts-positioning-righttoleft.html}
 140 {right-to-left support in Qt Quick} for in-depth information on the topic.
 141
 142 \section1 User Input
 143
 144 Being able to respond to user-input is a fundamental part of user-interface
 145 design.  Depending on the use-case that an application solves, and the
 146 form-factor of the device that the application runs on, the best way
 147 to receive user-input may be different.
 148
 149 \section2 Touch
 150
 151 Allowing users to physically touch a screen to interact with an application is
 152 a popular user-interface paradigm on portable devices like smartphones and
 153 tablets.
 154
 155 Qt Quick was designed specifically with touch-driven user-interfaces in mind,
 156 and thus touch events are supported in various visual object types, from
 157 \l{Flickable} lists to the generic \l{MultiPointTouchArea} type, as well as
 158 in the \l{MouseArea} type (which will be documented thoroughly in a proceeding
 159 section).
 160
 161 \section2 Motion Gestures
 162
 163 Detecting gestures with an accelerometer, or through camera-based gesture
 164 recognition, can allow users to interact with an application without requiring
 165 their full and undevided attention.  It can also provide a more interactive
 166 and engaging experience.
 167
 168 Qt Quick itself does not offer first-class support for motion gestures, however
 169 another QML add-on module which provides support for gestures, which uses
 170 Qt Quick and integrates with Qt Quick's visual canvas does exist.  See the
 171 Qt Sensors module documentation for more information on the topic.
 172
 173 \section2 Keyboard
 174
 175 Supporting input from a keyboard is a vital component of the user-interface of
 176 many applications.
 177
 178 XXX TODO: generic keypress event handling documentation?
 179
 180 Qt Quick also provides visual object types which automatically receive keyboard
 181 events and key-presses, and displays the appropriate text.  Please see the
 182 documentation about \l{qtquick-concepts-input-text.html}{text input} for
 183 in-depth information on the topic.
 184
 185 \section2 Mouse
 186
 187 The computer mouse is still a very important vector for user-input.  Detecting
 188 and reacting to clicks and presses according to their position is a fundamental
 189 concept in user-interface design.
 190
 191 Qt Quick provides the MouseArea visual object type which automatically receives
 192 mouse events (including clicks and wheel events) which allows developers to
 193 create custom user-interface objects to handle mouse input.  Please see the
 194 documentation about \l{qtquick-concepts-input-mouseevents.html}
 195 {mouse events in Qt Quick} for more information on the topic.
 196
 197 \section2 Focus
 198
 199 Most user-interfaces have multiple visual objects, but usually only one object
 200 has focus (that is, receives key-press events) at any time.  Qt Quick has
 201 support for complex focus specification.  See the documentation about
 202 \l{qtquick-concepts-input-focus.html}{keyboard focus in Qt Quick} for more
 203 information on this topic.
 204
 205 \section1 Event Interceptors
 206
 207 In a highly dynamic user-interface, the application developer will often wish
 208 to intercept some events (such as property assignments) so that the change can
 209 be animated.  Interceptors are a first-class concept in Qt Quick, and
 210 application developers can dynamically intercept property assignments and
 211 signal emissions, and define dynamic bindings.
 212
 213 \section2 Animating Property Assignments
 214
 215 When the location of a visual item changes, it is often suboptimal to simply
 216 change the location instantaneously.  It may be better to animate the update
 217 to allow the user's eye to follow the change, thus providing a seamless
 218 user-experience.  See the documentation on
 219 \l{qtquick-concepts-interceptors.html#animating-property-assignments}
 220 {Animating Property Assignments} for more information about property assignment
 221 interception.
 222
 223 \section2 Dynamic Bindings
 224
 225 Assigning binding expressions to properties is a fundamental concept of QML,
 226 and Qt Quick extends upon the idea with dynamic bindings where the target of
 227 the binding can be defined outside of the binding expression itself.  See the
 228 \l{qtquick-concepts-interceptors.html#dynamic-bindings}{Dynamic Bindings} page
 229 for more information about this concept.
 230
 231 \section2 Dynamic Signal Connections
 232
 233 Just as bindings can be retargeted dynamically in Qt Quick, so too can signal
 234 connections.  This allows highly dynamic dispatch to be implemented in a user
 235 interface where different visual items need to handle different events,
 236 depending on the situation, at run-time.  See the documentation about
 237 \l{qtquick-concepts-interceptors.html#dynamic-signal-connections}
 238 {Dynamic Signal Connections} for in-depth information.
 239
 240 \section1 States, Transitions And Animations
 241
 242 In any modern user-interface, transitioning between states and animating
 243 the user-interface is highly beneficial.  These are first-class concepts in
 244 Qt Quick, and are discussed in more detail in the
 245 \l{qtquick-concepts-statesanimations.html}{States, Transitions And Animations}
 246 documentation.
 247
 248 \section1 Data - Models, Views and Data Storage
 249
 250 Most applications will have data that needs to be displayed to the user.  That
 251 data might come from a variety of sources: network sources, local files, and
 252 databases are all common sources of data.
 253
 254 \section2 Models and Views
 255
 256 It is often advantageous to show similar data in a similar manner, within an
 257 application, and this gives rise to the idea of having a model which contains
 258 data, and a view which displays the data.  The view will display a delegate
 259 for every datum in the model.
 260
 261 For information about how the Model/View paradigm is implemented in Qt Quick,
 262 see the page titled \l{qtquick-concepts-data-modelview.html}
 263 {Models and Views in Qt Quick}.
 264
 265 \section2 Data Storage and Access
 266
 267 Databases are commonly used to store information in applications.  Qt Quick
 268 provides simplified access to relational databases via the
 269 \l{qtquick-concepts-data-localstorage.html}{Qt Quick local storage module}.
 270
 271 \section1 Graphical Effects and Particles
 272
 273 Visually appealing user-interfaces are more engaging than lacklustre ones.
 274 That said, the designer must bear in mind that visual effects simply provide
 275 a useful way to subtlely communicate to the user (for example, which visual
 276 item is active, or how focus is being transferred).  Over-use of visual
 277 effects can actually detract from the user-experience.
 278
 279 \section2 Visual Transformation
 280
 281 Visual objects can be transformed.  For example, they can be scaled or rotated.
 282 These sort of transformations can provide hints about focus or selection, and
 283 can provide intuitive hints about what events are occurring in an application.
 284
 285 For information about visual transformations to visual objects, see the
 286 page titled \l{qtquick-concepts-effects-transformations.html}
 287 {Qt Quick Transformation Types}.
 288
 289 \section2 Shader Effects
 290
 291 Shader effects allow the full, raw power of a graphics processing unit to be
 292 utilized directly via vertex and pixel shaders.  Using too many shader effects
 293 can result in increased power usage and sometimes slow performance, but if
 294 used sparingly and carefully, a shader can allow complex and visually appealing
 295 effects to be applied to a visual object (for example, ripples in water).
 296
 297 For information about shader programs and shader effects, see the page
 298 titled \l{qtquick-concepts-effects-shaders.html}
 299 {Qt Quick Shader Effects}.
 300
 301 \section2 Particles
 302
 303 A particle system allows explosions, fireworks, smoke, fog and wind effects to
 304 be simulated and displayed to the user.  Qt Quick provides a particle system
 305 which allows these sort of complex, 2D simulations to be performed, including
 306 support for environmental effects like gravity and turbulence.
 307 Particles are most commonly used to add subtle and visually appealing effects
 308 to currently selected items in lists or in activity notifiers, and in games.
 309
 310 For information about particles, see the documentation about the
 311 \l{qtquick-concepts-effects-particles.html}{Qt Quick Particle System}.
 312
 313 \section2 Sprites
 314
 315 A sprite is an animated image made up of frames.  Sprites are commonly found
 316 in games.  Qt Quick provides a visual type to display sprites, as well as a
 317 complex, stochastic, frame-transition controller for more complex applications
 318 which use sprites extensively (such as games).
 319
 320 For information about sprite animations, see the page titled
 321 \l{qtquick-concepts-effects-sprites.html}{Sprite Animations}.
 322
 323 \section1 Defining And Using Modular Components
 324
 325 One of the aims of QML is to allow developers to write modular user-interface
 326 types which may be reused to build complex, interactive applications which
 327 are highly maintainable.  Reusable components and dynamic object instantiation
 328 are fundamental building blocks which allow this paradigm to be realised in
 329 Qt Quick.
 330
 331 \section2 Defining Reusable Components
 332
 333 Being able to define reusable components is a fundamental feature of the QML
 334 language.  Qt Quick extends on this, by providing some types which make the
 335 dynamic construction of reusable components simpler and more efficient.  Please
 336 see the documentation on \l{qtquick-concepts-components.html}
 337 {Defining Reusable Components} for more information on the topic.
 338
 339 \section2 Dynamic Instantiation and Lazy Initialization
 340
 341 Qt Quick also provides the Loader type which may be used in conjuction with a
 342 Component or a QML document to instantiate objects lazily and on-demand.
 343 Please see the \l{qtquick-performance.html}{performance guide} for more
 344 information on using dynamic instantiation and lazy initialization to improve
 345 application performance.
 346
 347 */