qt5-doc-html 5.3.2-3 / usr / share / qt5 / doc / qtdoc / scalability.html

This file is indexed.

/usr/share/qt5/doc/qtdoc/scalability.html is in qt5-doc-html 5.3.2-3.

This file is owned by root:root, with mode 0o644.

The actual contents of the file can be viewed below. 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- scalabilityintro.qdoc -->
  <title>Scalability | QtDoc 5.3</title>
  <link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
    <div class="main">
    <div class="main-rounded">
        <div class="navigationbar">
        <ul>
<li><a href="index.html">Qt 5.3</a></li>
<li>Scalability</li>
<li id="buildversion">
Qt 5.3.2 Reference Documentation</li>
    </ul>
    </div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#resizing-screens-dynamically">Resizing Screens Dynamically</a></li>
<li class="level1"><a href="#laying-out-screens-dynamically">Laying out Screens Dynamically</a></li>
<li class="level1"><a href="#handling-pixel-density">Handling Pixel Density</a></li>
<li class="level1"><a href="#loading-files-depending-on-platform">Loading Files Depending on Platform</a></li>
<li class="level1"><a href="#loading-components-on-demand">Loading Components on Demand</a></li>
<li class="level1"><a href="#switching-orientation">Switching Orientation</a></li>
</ul>
</div>
<h1 class="title">Scalability</h1>
<span class="subtitle"></span>
<!-- $$$scalability.html-description -->
<div class="descr"> <a name="details"></a>
<p>Qt Quick enables you to develop applications that can run on different types of devices, such as tablets and handsets. In particular, they can cope with different screen configurations: size, density, orientation, resolution, and aspect ratio.</p>
<p>You need to consider scalability when:</p>
<ul>
<li>You want to deploy your application to more than one device platform, such as Android, BlackBerry, and iOS, or more than one device screen configuration or form factor.</li>
<li>Your want to be prepared for new devices that might appear on the market after your initial deployment.</li>
</ul>
<p>To implement scalable applications using <a href="../qtquick/qtquick-index.html">Qt Quick</a>:</p>
<ul>
<li>Design UIs using <i>Qt Quick Controls</i> that provide a set of UI controls.</li>
<li>Define layouts using <i>Qt Quick Layouts</i>, which can resize their items.</li>
<li>Use <i>property binding</i> to implement use cases not covered by the layouts. For example, to display alternative versions of images on screens with low and high pixel density or automatically rotate view contents according to the current screen orientation.</li>
<li>Load platform-specific assets using <i>file selectors</i>.</li>
<li>Load components on demand by using a <i>Loader</i>.</li>
</ul>
<p>Consider an application that has to be deployed to devices that have different screen configurations, form factors, or UI conventions. There are some patterns that you might consider when designing your application:</p>
<ul>
<li>The contents of a view might be quite similar on all screen sizes, but with an expanded content area. If you use the <a href="../qtquickcontrols/qml-qtquick-controls-applicationwindow.html">ApplicationWindow</a> QML type from Qt Quick Controls, it will automatically calculate the window size based on the sizes of its content items. If you use Qt Quick Layouts to position the content items, they will automatically resize the items pushed to them.</li>
<li>The contents of an entire page in a smaller device could form a component element of a layout in a larger device. Therefore, consider making that a separate component (that is, defined in a separate QML file), and in the smaller device, the view will simply contain an instance of that component. On the larger device, there may be enough space to use loaders to show additional items. For example, in an email viewer, if the screen is large enough, it may be possible to show the email list view, and the email reader view side by side.</li>
<li>The screen size and form factors of two devices might be quite similar, but the UI conventions might be totally different.</li>
</ul>
<a name="resizing-screens-dynamically"></a>
<h2>Resizing Screens Dynamically</h2>
<p><a href="../qtquickcontrols/qtquickcontrols-index.html">Qt Quick Controls</a> provide a set of UI controls to create user interfaces in Qt Quick. Typically, you declare an <a href="../qtquickcontrols/qml-qtquick-controls-applicationwindow.html">ApplicationWindow</a> control as the root item of your application. The <a href="../qtquickcontrols/qml-qtquick-controls-applicationwindow.html">ApplicationWindow</a> adds convenience for positioning other controls, such as <a href="../qtquickcontrols/qml-qtquick-controls-menubar.html">MenuBar</a>, <a href="../qtquickcontrols/qml-qtquick-controls-toolbar.html">ToolBar</a>, and <a href="../qtquickcontrols/qml-qtquick-controls-statusbar.html">StatusBar</a> in a platform independent manner. The <a href="../qtquickcontrols/qml-qtquick-controls-applicationwindow.html">ApplicationWindow</a> uses the size constraints of the content items as input when calculating the effective size constraints of the actual window.</p>
<p>In addition to controls that define standard parts of application windows, controls are provided for creating views and menus, as well as presenting or receiving input from users. You can use <a href="../qtquickcontrols/qtquickcontrolsstyles-index.html">Qt Quick Controls Styles</a> to apply custom styling to the predefined controls.</p>
<p>Qt Quick Controls, such as the <a href="../qtquickcontrols/qml-qtquick-controls-toolbar.html">ToolBar</a>, do not provide a layout of their own, but require you to position their contents. For this, you can use Qt Quick Layouts.</p>
<a name="laying-out-screens-dynamically"></a>
<h2>Laying out Screens Dynamically</h2>
<p><a href="../qtquicklayouts/qtquicklayouts-index.html">Qt Quick Layouts</a> provide ways of laying out screen controls in a row, column, or grid, using the <a href="../qtquicklayouts/qml-qtquick-layouts-rowlayout.html">RowLayout</a>, <a href="../qtquicklayouts/qml-qtquick-layouts-columnlayout.html">ColumnLayout</a>, and <a href="../qtquicklayouts/qml-qtquick-layouts-gridlayout.html">GridLayout</a> QML types. The properties for these QML types hold their layout direction and spacing between the cells.</p>
<p>You can use the <a href="../qtquicklayouts/qml-qtquick-layouts-layout.html">Layout</a> QML type to attach additional properties to the items pushed to the layouts. For example, you can specify mininum, maximum, and preferred values for item height, width, and size.</p>
<p>The layouts ensure that your UIs are scaled properly when windows and screens are resized and always use the maximum amount of space available.</p>
<p>Constantly resizing and recalculating screens comes with a performance cost. Mobile and embedded devices might not have the power required to recalculate the size and position of animated objects for every frame, for example. If you run into performance problems when using layouts, consider using some other methods, such as bindings, instead.</p>
<p>Here are some things not to do with layouts:</p>
<ul>
<li>Do not have bindings to the x, y, width, or height properties of items in a Layout, since this would conflict with the goal of the Layout, and also cause binding loops.</li>
<li>Do not define complex JavaScript functions that are regularly evaluated. This will cause poor performance, particularly during animated transitions.</li>
<li>Do not make assumptions about the container size, or about the size of child items. Try to make flexible layout definitions that can absorb changes in the available space.</li>
<li>Do not use layouts if you want the design to be pixel perfect. Content items will be automatically resized and positioned depending on the space available.</li>
</ul>
<a name="handling-pixel-density"></a>
<h2>Handling Pixel Density</h2>
<p>If Qt Quick Layouts do not fit your needs, you can fall back to using <a href="../qtqml/qtqml-syntax-propertybinding.html">property binding</a>. Binding enables objects to automatically update their properties in response to changing attributes in other objects or the occurrence of some external event.</p>
<p>When an object's property is assigned a value, it can either be assigned a static value, or bound to a JavaScript expression. In the former case, the property's value will not change unless a new value is assigned to the property. In the latter case, a property binding is created and the property's value is automatically updated by the QML engine whenever the value of the evaluated expression changes.</p>
<p>This type of positioning is the most highly dynamic. However, constantly evaluating JavaScript expressions comes with a performance cost.</p>
<p>For example, bindings are a good way to handle low and high pixel density. The following code snippet uses the <a href="../qtquick/qml-qtquick-window-screen.html">Screen.logicalPixelDensity</a> attached property to specify different images to display on screens with low, high, or normal pixel density:</p>
<pre class="cpp">Image {
    source: {
        <span class="keyword">if</span> (Screen<span class="operator">.</span>logicalPixelDensity <span class="operator">&lt;</span> <span class="number">40</span>)
        <span class="string">&quot;image_low_dpi.png&quot;</span>
        <span class="keyword">else</span> <span class="keyword">if</span> (Screen<span class="operator">.</span>logicalPixelDensity <span class="operator">&gt;</span> <span class="number">300</span>)
        <span class="string">&quot;image_high_dpi.png&quot;</span>
        <span class="keyword">else</span>
        <span class="string">&quot;image.png&quot;</span>
        }
    }</pre>
<a name="loading-files-depending-on-platform"></a>
<h2>Loading Files Depending on Platform</h2>
<p>You can use the <a href="../qtqml/qqmlfileselector.html">QQmlFileSelector</a> to apply a <a href="../qtcore/qfileselector.html">QFileSelector</a> to QML file loading. This enables you to load altenative resources depending on the platform on which the application is run. For example, you can use the <tt>+android</tt> and <tt>+blackberry</tt> file selectors to load different image files when run on Android and BlackBerry devices.</p>
<p>You can use file selectors together with singleton objects to access a single instance of an object on a particular platform.</p>
<p>File selectors are static and enforce a file structure where platform-specific files are stored in subfolders named after the platform. If you need a more dynamic solution for loading parts of your UI on demand, you can use a Loader.</p>
<a name="loading-components-on-demand"></a>
<h2>Loading Components on Demand</h2>
<p>A <a href="../qtquick/qml-qtquick-loader.html">Loader</a> can load a QML file (using the source property) or a Component object (using the sourceComponent property). It is useful for delaying the creation of a component until it is required. For example, when a component should be created on demand, or when a component should not be created unnecessarily for performance reasons.</p>
<p>You can also use loaders to react to situations where parts of your UI are not needed on a particular platform, because the platform does not support some functionality. Instead of displaying a view that is not needed on the device the application is running on, you can determine that the view is hidden and use loaders to display something else in its place.</p>
<a name="switching-orientation"></a>
<h2>Switching Orientation</h2>
<p>The <a href="../qtquick/qml-qtquick-window-screen.html">Screen.orientation</a> attached property contains the current orientation of the screen, from the accelerometer (if available). On a desktop computer, this value typically does not change.</p>
<p>If <tt>primaryOrientation</tt> follows <tt>orientation</tt>, it means that the screen automatically rotates all content that is displayed, depending on how you hold the device. If orientation changes even though <tt>primaryOrientation</tt> does not change, the device might not rotate its own display. In that case, you may need to use <a href="../qtquick/qml-qtquick-item.html#rotation-prop">Item.rotation</a> or <a href="../qtquick/qml-qtquick-item.html#transform-prop">Item.transform</a> to rotate your content.</p>
<p>Application top-level page definitions and reusable component definitions should use one QML layout definition for the layout structure. This single definition should include the layout design for separate device orientations and aspect ratios. The reason for this is that performance during an orientation switch is critical, and it is therefore a good idea to ensure that all of the components needed by both orientations are loaded when the orientation changes.</p>
<p>On the contrary, you should perform thorough tests if you choose to use a <a href="../qtquick/qml-qtquick-loader.html">Loader</a> to load additional QML that is needed in separate orientations, as this will affect the performance of the orientation change.</p>
<p>In order to enable layout animations between the orientations, the anchor definitions must reside within the same containing component. Therefore the structure of a page or a component should consist of a common set of child components, a common set of anchor definitions, and a collection of states (defined in a <a href="../qtquick/qml-qtquick-stategroup.html">StateGroup</a>) representing the different aspect ratios supported by the component.</p>
<p>If a component contained within a page needs to be hosted in numerous different form factor definitions, then the layout states of the view should depend on the aspect ratio of the page (its immediate container). Similarly, different instances of a component might be situated within numerous different containers in a UI, and so its layout states should be determined by the aspect ratio of its parent. The conclusion is that layout states should always follow the aspect ratio of the direct container (not the &quot;orientation&quot; of the current device screen).</p>
<p>Within each layout <a href="../qtquick/qml-qtquick-state.html">State</a>, you should define the relationships between items using native QML layout definitions. See below for more information. During transitions between the states (triggered by the top level orientation change), in the case of anchor layouts, <a href="../qtquick/qml-qtquick-anchoranimation.html">AnchorAnimation</a> elements can be used to control the transitions. In some cases, you can also use a <a href="../qtquick/qml-qtquick-numberanimation.html">NumberAnimation</a> on e.g&#x2e; the width of an item. Remember to avoid complex JavaScript calculations during each frame of animation. Using simple anchor definitions and anchor animations can help with this in the majority of cases.</p>
<p>There are a few additional cases to consider:</p>
<ul>
<li>What if you have a single page that looks completely different between landscape and portrait, i.e&#x2e; all of the child items are different? For each page, have two child components, with separate layout definitions, and make one or other of the items have zero opacity in each state. You can use a cross-fade animation by simply applying a <a href="../qtquick/qml-qtquick-numberanimation.html">NumberAnimation</a> transition to the opacity.</li>
<li>What if you have a single page that shares 30% or more of the same layout contents between portrait and landscape? In that case, consider having one component with landscape and portrait states, and a collection of separate child items whose opacity (or position) depends on the orientation state. This will enable you to use layout animations for the items that are shared between the orientations, whilst the other items are either faded in/out, or animated on/off screen.</li>
<li>What if you have two pages on a handheld device that need to be on screen at the same time, for example on a larger form factor device? In this case, notice that your view component will no longer be occupying the full screen. Therefore it's important to remember in all components (in particular, list delegate items) should depend on the size of the containing component width, not on the screen width. It may be necessary to set the width in a Component.onCompleted() handler in this case, to ensure that the list item delegate has been constructed before the value is set.</li>
<li>What if the two orientations take up too much memory to have them both in memory at once? Use a <a href="../qtquick/qml-qtquick-loader.html">Loader</a> if necessary, if you cannot keep both versions of the view in memory at once, but beware performance on the cross-fade animation during layout switch. One solution could be to have two &quot;splash screen&quot; items that are children of the Page, then you cross fade between those during rotation. Then you can use a <a href="../qtquick/qml-qtquick-loader.html">Loader</a> to load another child component that loads the actual model data to another child Item, and cross-fade to that when the <a href="../qtquick/qml-qtquick-loader.html">Loader</a> has completed.</li>
</ul>
</div>
<!-- @@@scalability.html -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2014 Digia Plc and/or its
   subsidiaries. Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Digia, Qt and their respective logos are trademarks of Digia Plc     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>

APT Browse - Built by Thomas Orozco.