source: trunk/doc/src/declarative/qmlviewer.qdoc@ 1036

Last change on this file since 1036 was 846, checked in by Dmitry A. Kuminov, 14 years ago

trunk: Merged in qt 4.7.2 sources from branches/vendor/nokia/qt.

File size: 7.8 KB
Line 
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
34The Declarative UI package includes \QQV, a tool for loading QML documents that
35makes it easy to quickly develop and debug QML applications. It invokes the QML
36runtime to load QML documents and also includes additional features useful for
37the development of QML-based applications.
38
39The 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
41deployment of QML applications. In those cases, the QML runtime should be invoked
42from a Qt application instead; see \l {Qt Declarative UI Runtime} for more
43information.
44
45The viewer is located at \c QTDIR/bin/qmlviewer. To load a \c .qml file
46with the viewer, run the viewer and select the file to be opened, or provide the
47file path on the command line:
48
49\code
50 qmlviewer myqmlfile.qml
51\endcode
52
53On Mac OS X, the QML Viewer application is named "QMLViewer" instead. You
54can launch the viewer by opening the QMLViewer application from the Finder, or
55from the command line:
56
57\code
58 QMLViewer.app/Contents/MacOS/QMLViewer myqmlfile.qml
59\endcode
60
61The QML Viewer has a number of configuration options involving features such as
62fullscreen display, module import path configurations, video recording of QML
63animations, and OpenGL support.
64
65To see the configuration options, run \c qmlviewer with the \c -help argument.
66
67
68\section1 Adding module import paths
69
70Additional module import paths can be provided using the \c -I flag.
71For example, the \l{declarative/cppextensions/plugins}{QML plugins example} creates
72a C++ plugin identified as \c com.nokia.TimeExample. Since this has a namespaced
73identifier, the viewer has to be run with the \c -I flag from the example's
74base directory:
75
76\code
77qmlviewer -I . plugins.qml
78\endcode
79
80This adds the current directory to the import path so that the viewer will
81find the plugin in the \c com/nokia/TimeExample directory.
82
83Note by default, the current directory is included in the import search path,
84but namespaced modules like \c com.nokia.TimeExample are not found unless
85the path is explicitly added.
86
87
88\section1 Loading translation files
89
90When 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
92translation files named "qml_<language>.qm", where <language> is a two-letter
93ISO 639 language, such as "qml_fr.qm", optionally followed by an underscore and
94an uppercase two-letter ISO 3166 country code, such as "qml_fr_FR.qm" or
95"qml_fr_CA.qm".
96
97Such files can be created using \l {Qt Linguist}.
98
99The actual translation file that is loaded depends on the system locale.
100Additionally, the viewer will load any translation files specified on the command
101line via the \c -translation option.
102
103See the \l{declarative/i18n}{QML i18n example} for an example. Also, the
104\l{scripting.html#internationalization}{Qt Internationalization} documentation
105shows how JavaScript code in QML files can be made to use translatable strings.
106
107
108\section1 Loading placeholder data with QML Viewer
109
110Often, QML applications are prototyped with fake data that is later replaced
111by real data sources from C++ plugins. QML Viewer assists in this aspect by
112loading 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
114files in that directory are loaded as QML objects and bound to the root context
115as properties named after the files.
116
117For example, this QML document refers to a \c lottoNumbers property which does
118not actually exist within the document:
119
120\qml
121import QtQuick 1.0
122
123ListView {
124 width: 200; height: 300
125 model: lottoNumbers
126 delegate: Text { text: number }
127}
128\endqml
129
130If within the document's directory, there is a "dummydata" directory which
131contains a \c lottoNumbers.qml file like this:
132
133\qml
134import QtQuick 1.0
135
136ListModel {
137 ListElement { number: 23 }
138 ListElement { number: 44 }
139 ListElement { number: 78 }
140}
141\endqml
142
143Then this model would be automatically loaded into the ListView in the previous document.
144
145Child properties are included when loaded from dummy data. The following document
146refers to a \c clock.time property:
147
148\qml
149import QtQuick 1.0
150Text { text: clock.time }
151\endqml
152
153The text value could be filled by a \c dummydata/clock.qml file with a \c time
154property in the root context:
155
156\qml
157import QtQuick 1.0
158QtObject { property int time: 54321 }
159\endqml
160
161To replace this with real data, you can simply bind the real data object to
162the root context in C++ using QDeclarativeContext::setContextProperty(). This
163is detailed in \l {Using QML in C++ Applications}.
164
165\section1 Using the \c runtime object
166
167QML 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
169information 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
177window on the system. It is useful for "pausing" an application, particularly
178animations, when the QML Viewer loses focus or moves to the background.
179
180For example, the following animation is only played when the QML Viewer is
181the active window:
182
183\qml
184Rectangle {
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
200N900 platform and most S60 5.0-based or newer Symbian devices, this property
201automatically updates to reflect the device's actual orientation; on other platforms,
202this 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
212When the viewer's orientation changes, the appearance of the loaded QML document
213does not change unless it has been set to respond to changes in
214\c runtime.orientation. For example, the following Rectangle changes its
215aspect ratio depending on the orientation of the QML Viewer:
216
217\qml
218Rectangle {
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
Note: See TracBrowser for help on using the repository browser.