[844] | 1 | /****************************************************************************
|
---|
| 2 | **
|
---|
| 3 | ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
|
---|
| 4 | ** All rights reserved.
|
---|
| 5 | ** Contact: Nokia Corporation ([email protected])
|
---|
| 6 | **
|
---|
| 7 | ** This file is part of the documentation of the Qt Toolkit.
|
---|
| 8 | **
|
---|
| 9 | ** $QT_BEGIN_LICENSE:FDL$
|
---|
| 10 | ** Commercial Usage
|
---|
| 11 | ** Licensees holding valid Qt Commercial licenses may use this file in
|
---|
| 12 | ** accordance with the Qt Commercial License Agreement provided with the
|
---|
| 13 | ** Software or, alternatively, in accordance with the terms contained in a
|
---|
| 14 | ** written agreement between you and Nokia.
|
---|
| 15 | **
|
---|
| 16 | ** GNU Free Documentation License
|
---|
| 17 | ** Alternatively, this file may be used under the terms of the GNU Free
|
---|
| 18 | ** Documentation License version 1.3 as published by the Free Software
|
---|
| 19 | ** Foundation and appearing in the file included in the packaging of this
|
---|
| 20 | ** file.
|
---|
| 21 | **
|
---|
| 22 | ** If you have questions regarding the use of this file, please contact
|
---|
| 23 | ** Nokia at [email protected].
|
---|
| 24 | ** $QT_END_LICENSE$
|
---|
| 25 | **
|
---|
| 26 | ****************************************************************************/
|
---|
| 27 |
|
---|
| 28 | /*!
|
---|
| 29 |
|
---|
| 30 | \page qmlviewer.html
|
---|
| 31 | \title QML Viewer
|
---|
| 32 | \ingroup qttools
|
---|
| 33 |
|
---|
| 34 | The Declarative UI package includes \QQV, a tool for loading QML documents that
|
---|
| 35 | makes it easy to quickly develop and debug QML applications. It invokes the QML
|
---|
| 36 | runtime to load QML documents and also includes additional features useful for
|
---|
| 37 | the development of QML-based applications.
|
---|
| 38 |
|
---|
| 39 | The QML Viewer is a tool for testing and developing QML applications. It is
|
---|
| 40 | \e not intended for use in a production environment and should not be used for the
|
---|
| 41 | deployment of QML applications. In those cases, the QML runtime should be invoked
|
---|
| 42 | from a Qt application instead; see \l {Qt Declarative UI Runtime} for more
|
---|
| 43 | information.
|
---|
| 44 |
|
---|
| 45 | The viewer is located at \c QTDIR/bin/qmlviewer. To load a \c .qml file
|
---|
| 46 | with the viewer, run the viewer and select the file to be opened, or provide the
|
---|
| 47 | file path on the command line:
|
---|
| 48 |
|
---|
| 49 | \code
|
---|
| 50 | qmlviewer myqmlfile.qml
|
---|
| 51 | \endcode
|
---|
| 52 |
|
---|
| 53 | On Mac OS X, the QML Viewer application is named "QMLViewer" instead. You
|
---|
| 54 | can launch the viewer by opening the QMLViewer application from the Finder, or
|
---|
| 55 | from the command line:
|
---|
| 56 |
|
---|
| 57 | \code
|
---|
| 58 | QMLViewer.app/Contents/MacOS/QMLViewer myqmlfile.qml
|
---|
| 59 | \endcode
|
---|
| 60 |
|
---|
| 61 | The QML Viewer has a number of configuration options involving features such as
|
---|
| 62 | fullscreen display, module import path configurations, video recording of QML
|
---|
| 63 | animations, and OpenGL support.
|
---|
| 64 |
|
---|
| 65 | To see the configuration options, run \c qmlviewer with the \c -help argument.
|
---|
| 66 |
|
---|
| 67 |
|
---|
| 68 | \section1 Adding module import paths
|
---|
| 69 |
|
---|
| 70 | Additional module import paths can be provided using the \c -I flag.
|
---|
| 71 | For example, the \l{declarative/cppextensions/plugins}{QML plugins example} creates
|
---|
| 72 | a C++ plugin identified as \c com.nokia.TimeExample. Since this has a namespaced
|
---|
| 73 | identifier, the viewer has to be run with the \c -I flag from the example's
|
---|
| 74 | base directory:
|
---|
| 75 |
|
---|
| 76 | \code
|
---|
| 77 | qmlviewer -I . plugins.qml
|
---|
| 78 | \endcode
|
---|
| 79 |
|
---|
| 80 | This adds the current directory to the import path so that the viewer will
|
---|
| 81 | find the plugin in the \c com/nokia/TimeExample directory.
|
---|
| 82 |
|
---|
| 83 | Note by default, the current directory is included in the import search path,
|
---|
| 84 | but namespaced modules like \c com.nokia.TimeExample are not found unless
|
---|
| 85 | the path is explicitly added.
|
---|
| 86 |
|
---|
| 87 |
|
---|
| 88 | \section1 Loading translation files
|
---|
| 89 |
|
---|
| 90 | When the QML Viewer loads a QML file, it installs a translation file from a
|
---|
| 91 | "i18n" subdirectory relative to that initial file. This directory should contain
|
---|
| 92 | translation files named "qml_<language>.qm", where <language> is a two-letter
|
---|
| 93 | ISO 639 language, such as "qml_fr.qm", optionally followed by an underscore and
|
---|
| 94 | an uppercase two-letter ISO 3166 country code, such as "qml_fr_FR.qm" or
|
---|
| 95 | "qml_fr_CA.qm".
|
---|
| 96 |
|
---|
| 97 | Such files can be created using \l {Qt Linguist}.
|
---|
| 98 |
|
---|
| 99 | The actual translation file that is loaded depends on the system locale.
|
---|
| 100 | Additionally, the viewer will load any translation files specified on the command
|
---|
| 101 | line via the \c -translation option.
|
---|
| 102 |
|
---|
| 103 | See the \l{declarative/i18n}{QML i18n example} for an example. Also, the
|
---|
| 104 | \l{scripting.html#internationalization}{Qt Internationalization} documentation
|
---|
| 105 | shows how JavaScript code in QML files can be made to use translatable strings.
|
---|
| 106 |
|
---|
| 107 |
|
---|
| 108 | \section1 Loading placeholder data with QML Viewer
|
---|
| 109 |
|
---|
| 110 | Often, QML applications are prototyped with fake data that is later replaced
|
---|
| 111 | by real data sources from C++ plugins. QML Viewer assists in this aspect by
|
---|
| 112 | loading fake data into the application context: it looks for a directory named
|
---|
| 113 | "dummydata" in the same directory as the target QML file, and any \c .qml
|
---|
| 114 | files in that directory are loaded as QML objects and bound to the root context
|
---|
| 115 | as properties named after the files.
|
---|
| 116 |
|
---|
| 117 | For example, this QML document refers to a \c lottoNumbers property which does
|
---|
| 118 | not actually exist within the document:
|
---|
| 119 |
|
---|
| 120 | \qml
|
---|
| 121 | import QtQuick 1.0
|
---|
| 122 |
|
---|
| 123 | ListView {
|
---|
| 124 | width: 200; height: 300
|
---|
| 125 | model: lottoNumbers
|
---|
| 126 | delegate: Text { text: number }
|
---|
| 127 | }
|
---|
| 128 | \endqml
|
---|
| 129 |
|
---|
| 130 | If within the document's directory, there is a "dummydata" directory which
|
---|
| 131 | contains a \c lottoNumbers.qml file like this:
|
---|
| 132 |
|
---|
| 133 | \qml
|
---|
| 134 | import QtQuick 1.0
|
---|
| 135 |
|
---|
| 136 | ListModel {
|
---|
| 137 | ListElement { number: 23 }
|
---|
| 138 | ListElement { number: 44 }
|
---|
| 139 | ListElement { number: 78 }
|
---|
| 140 | }
|
---|
| 141 | \endqml
|
---|
| 142 |
|
---|
| 143 | Then this model would be automatically loaded into the ListView in the previous document.
|
---|
| 144 |
|
---|
| 145 | Child properties are included when loaded from dummy data. The following document
|
---|
| 146 | refers to a \c clock.time property:
|
---|
| 147 |
|
---|
| 148 | \qml
|
---|
| 149 | import QtQuick 1.0
|
---|
| 150 | Text { text: clock.time }
|
---|
| 151 | \endqml
|
---|
| 152 |
|
---|
| 153 | The text value could be filled by a \c dummydata/clock.qml file with a \c time
|
---|
| 154 | property in the root context:
|
---|
| 155 |
|
---|
| 156 | \qml
|
---|
| 157 | import QtQuick 1.0
|
---|
| 158 | QtObject { property int time: 54321 }
|
---|
| 159 | \endqml
|
---|
| 160 |
|
---|
| 161 | To replace this with real data, you can simply bind the real data object to
|
---|
| 162 | the root context in C++ using QDeclarativeContext::setContextProperty(). This
|
---|
| 163 | is detailed in \l {Using QML in C++ Applications}.
|
---|
| 164 |
|
---|
| 165 | \section1 Using the \c runtime object
|
---|
| 166 |
|
---|
| 167 | QML applications that are loaded with the QML Viewer have access to a special
|
---|
| 168 | \c runtime property on the root context. This property provides additional
|
---|
| 169 | information about the application's runtime environment through the following properties:
|
---|
| 170 |
|
---|
| 171 | \table
|
---|
| 172 | \row
|
---|
| 173 |
|
---|
| 174 | \o \c runtime.isActiveWindow
|
---|
| 175 |
|
---|
| 176 | \o This property indicates whether the QML Viewer window is the current active
|
---|
| 177 | window on the system. It is useful for "pausing" an application, particularly
|
---|
| 178 | animations, when the QML Viewer loses focus or moves to the background.
|
---|
| 179 |
|
---|
| 180 | For example, the following animation is only played when the QML Viewer is
|
---|
| 181 | the active window:
|
---|
| 182 |
|
---|
| 183 | \qml
|
---|
| 184 | Rectangle {
|
---|
| 185 | width: 200; height: 200
|
---|
| 186 |
|
---|
| 187 | ColorAnimation on color {
|
---|
| 188 | running: runtime.isActiveWindow
|
---|
| 189 | loops: Animation.Infinite
|
---|
| 190 | from: "green"; to: "blue"; duration: 2000
|
---|
| 191 | }
|
---|
| 192 | }
|
---|
| 193 | \endqml
|
---|
| 194 |
|
---|
| 195 | \row
|
---|
| 196 |
|
---|
| 197 | \o \c runtime.orientation
|
---|
| 198 |
|
---|
| 199 | \o This property indicates the current orientation of the QML Viewer. On the
|
---|
| 200 | N900 platform and most S60 5.0-based or newer Symbian devices, this property
|
---|
| 201 | automatically updates to reflect the device's actual orientation; on other platforms,
|
---|
| 202 | this indicates the orientation currently selected in the QML Viewer's
|
---|
| 203 | \e {Settings -> Properties} menu. The \c orientation value can be one of the following:
|
---|
| 204 |
|
---|
| 205 | \list
|
---|
| 206 | \o \c Orientation.Portrait
|
---|
| 207 | \o \c Orientation.Landscape
|
---|
| 208 | \o \c Orientation.PortraitInverted (Portrait orientation, upside-down)
|
---|
| 209 | \o \c Orientation.LandscapeInverted (Landscape orientation, upside-down)
|
---|
| 210 | \endlist
|
---|
| 211 |
|
---|
| 212 | When the viewer's orientation changes, the appearance of the loaded QML document
|
---|
| 213 | does not change unless it has been set to respond to changes in
|
---|
| 214 | \c runtime.orientation. For example, the following Rectangle changes its
|
---|
| 215 | aspect ratio depending on the orientation of the QML Viewer:
|
---|
| 216 |
|
---|
| 217 | \qml
|
---|
| 218 | Rectangle {
|
---|
| 219 | id: window
|
---|
| 220 | width: 640; height: 480
|
---|
| 221 |
|
---|
| 222 | states: State {
|
---|
| 223 | name: "landscape"
|
---|
| 224 | PropertyChanges { target: window; width: 480; height: 640 }
|
---|
| 225 | }
|
---|
| 226 | state: (runtime.orientation == Orientation.Landscape
|
---|
| 227 | || runtime.orientation == Orientation.LandscapeInverted) ? 'landscape' : ''
|
---|
| 228 | }
|
---|
| 229 | \endqml
|
---|
| 230 |
|
---|
| 231 | \endtable
|
---|
| 232 |
|
---|
| 233 | */
|
---|
| 234 |
|
---|