<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qmlscene.qdoc -->
<title>Prototyping with qmlscene | Qt 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td ><a href="index.html">Qt 5.9</a></td><td >Prototyping with qmlscene</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#adding-module-import-paths">Adding Module Import Paths</a></li>
<li class="level1"><a href="#loading-test-data">Loading Test Data</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Prototyping with qmlscene</h1>
<span class="subtitle"></span>
<!-- $$$qtquick-qmlscene.html-description -->
<div class="descr"> <a name="details"></a>
<p>Qt 5 includes <code>qmlscene</code>, a utility that loads and displays QML documents even before the application is complete. This utility also provides the following additional features that are useful while developing QML applications:</p>
<ul>
<li>View the QML document in a maximized window.</li>
<li>View the QML document in full-screen mode.</li>
<li>Make the window transparent.</li>
<li>Disable multi-sampling (anti-aliasing).</li>
<li>Do not detect the version of the .qml file.</li>
<li>Run all animations in slow motion.</li>
<li>Resize the window to the size of the root item.</li>
<li>Add the list of import paths.</li>
<li>Add a named bundle.</li>
<li>Use a translation file to set the language.</li>
</ul>
<p>The <code>qmlscene</code> utility is meant to be used for testing your QML applications, and not as a launcher in a production environment. To launch a QML application in a production environment, develop a custom C++ application or bundle the QML file in a module. See <a href="qtquick-deployment.html">Deploying QML applications</a> for more information.</p>
<p>To load a .qml file, run the tool and select the file to be opened, or provide the file path on the command prompt:</p>
<pre class="cpp">
qmlscene myqmlfile<span class="operator">.</span>qml
</pre>
<p>To see the configuration options, run <code>qmlscene</code> with the <code>-help</code> argument.</p>
<a name="adding-module-import-paths"></a>
<h2 id="adding-module-import-paths">Adding Module Import Paths</h2>
<p>Additional module import paths can be provided using the <code>-I</code> flag. For example, the QML plugin example creates a C++ plugin identified with the namespace, <code>TimeExample</code>. To load the plugin, you must run <code>qmlscene</code> with the <code>-I</code> flag from the example's base directory:</p>
<pre class="cpp">
qmlscene <span class="operator">-</span>I imports plugins<span class="operator">.</span>qml
</pre>
<p>This adds the current directory to the import path so that <code>qmlscene</code> will find the plugin in the <code>imports</code> directory.</p>
<p><b>Note: </b>By default, the current directory is included in the import search path, but modules in a namespace such as <code>TimeExample</code> are not found unless the path is explicitly added.</p><a name="loading-test-data"></a>
<h2 id="loading-test-data">Loading Test Data</h2>
<p>Often, QML applications are prototyped with test data that is later replaced by real data sources from C++ plugins. The <code>qmlscene</code> utility assists in this aspect by loading test data into the application context. It looks for a directory named <code>dummydata</code> in the same directory as the target QML file, and loads the .qml files in that directory as QML objects and bind them to the root context as properties named after the files.</p>
<p>For example, the following QML document refers to a <code>lottoNumbers</code> property which does not exist within the document:</p>
<pre class="qml">
import QtQuick 2.3
<span class="type">ListView</span> {
<span class="name">width</span>: <span class="number">200</span>; <span class="name">height</span>: <span class="number">300</span>
<span class="name">model</span>: <span class="name">lottoNumbers</span>
<span class="name">delegate</span>: <span class="name">Text</span> { <span class="name">text</span>: <span class="name">number</span> }
}
</pre>
<p>If, within the document's directory, there is a <code>dummydata</code> directory which contains a <code>lottoNumbers.qml</code> file like this:</p>
<pre class="qml">
import QtQuick 2.3
<span class="type">ListModel</span> {
<span class="type">ListElement</span> { <span class="name">number</span>: <span class="number">23</span> }
<span class="type">ListElement</span> { <span class="name">number</span>: <span class="number">44</span> }
<span class="type">ListElement</span> { <span class="name">number</span>: <span class="number">78</span> }
}
</pre>
<p>Then this model would be automatically loaded into the ListView in the previous document.</p>
<p>Child properties are included when loaded from <code>dummydata</code>. The following document refers to a <code>clock.time</code> property:</p>
<pre class="qml">
import QtQuick 2.3
<span class="type">Text</span> { <span class="name">text</span>: <span class="name">clock</span>.<span class="name">time</span> }
</pre>
<p>The text value could be filled by a <code>dummydata/clock.qml</code> file with a <code>time</code> property in the root context:</p>
<pre class="qml">
import QtQuick 2.3
<span class="type">QtObject</span> { property <span class="type">int</span> <span class="name">time</span>: <span class="number">54321</span> }
</pre>
<p>To replace this with real data, bind the real data object to the root context in C++ using QQmlContext::setContextProperty(). This is detailed in Integrating QML and C++.</p>
</div>
<!-- @@@qtquick-qmlscene.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
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> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
