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 |
|
---|