<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- directoryimports.qdoc -->
<title>Importing QML Document Directories | Qt QML 5.12.6</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 >Qt 5.12</td><td ><a href="qtqml-index.html">Qt QML</a></td><td >Importing QML Document Directories</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtqml-index.html">Qt 5.12.6 Reference Documentation</a></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="#local-directory-imports">Local Directory Imports</a></li>
<li class="level2"><a href="#an-example">An Example</a></li>
<li class="level1"><a href="#remotely-located-directories">Remotely Located Directories</a></li>
<li class="level1"><a href="#directory-listing-qmldir-files">Directory Listing qmldir Files</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Importing QML Document Directories</h1>
<span class="subtitle"></span>
<!-- $$$qtqml-syntax-directoryimports.html-description -->
<div class="descr"> <a name="details"></a>
<p>A local directory of QML files can be imported without any additional setup or configuration. A remote directory of QML files can also be imported, but requires a directory listing <code>qmldir</code> file to exist. A local directory may optionally contain a directory listing <code>qmldir</code> file in order to define the type names which should be provided to clients which import the directory, and to specify JavaScript resources which should be made available to importers.</p>
<a name="local-directory-imports"></a>
<h2 id="local-directory-imports">Local Directory Imports</h2>
<p>Any QML file on the local file system can import a local directory as using an import statement that refers to the directory's absolute or relative file system path, enabling the file to use the <a href="qtqml-typesystem-objecttypes.html">object types</a> defined within that directory.</p>
<p>If the local directory contains a directory listing <code>qmldir</code> file, the types will be made available with the type names specified in the <code>qmldir</code> file; otherwise, they will be made available with type names derived from the filenames of the QML documents. Only filenames beginning with an uppercase letter and ending with ".qml" will be exposed as types if no <code>qmldir</code> file is specified in the directory.</p>
<a name="an-example"></a>
<h3 id="an-example">An Example</h3>
<p>Consider the following QML project directory structure. Under the top level directory <code>myapp</code>, there are a set of common UI components in a sub-directory named <code>mycomponents</code>, and the main application code in a sub-directory named <code>main</code>, like this:</p>
<pre class="cpp">
myapp
<span class="operator">|</span><span class="operator">-</span> mycomponents
<span class="operator">|</span><span class="operator">-</span> CheckBox<span class="operator">.</span>qml
<span class="operator">|</span><span class="operator">-</span> DialogBox<span class="operator">.</span>qml
<span class="operator">|</span><span class="operator">-</span> Slider<span class="operator">.</span>qml
<span class="operator">|</span><span class="operator">-</span> main
<span class="operator">|</span><span class="operator">-</span> application<span class="operator">.</span>qml
</pre>
<p>The <code>main/application.qml</code> file can import the <code>mycomponents</code> directory using the relative path to that directory, allowing it to use the QML object types defined within that directory:</p>
<pre class="qml">
</pre>
<p>The directory may be imported into a qualified local namespace, in which case uses of any types provided in the directory must be qualified:</p>
<pre class="qml">
</pre>
<p>The ability to import a local directory is convenient for cases such as in-application component sets and application prototyping, although any code that imports such modules must update their relevant <code>import</code> statements if the module directory moves to another location. This can be avoided if <a href="qtqml-modules-identifiedmodules.html">QML modules</a> are used instead, as an installed module is imported with a unique identifier string rather than a file system path.</p>
<a name="remotely-located-directories"></a>
<h2 id="remotely-located-directories">Remotely Located Directories</h2>
<p>A directory of QML files can also be imported from a remote location if the directory contains a directory listing <code>qmldir</code> file.</p>
<p>For example, if the <code>myapp</code> directory in the previous example was hosted at "http://www.my-example-server.com", and the <code>mycomponents</code> directory contained a <code>qmldir</code> file defined as follows:</p>
<pre class="cpp">
CheckBox CheckBox<span class="operator">.</span>qml
DialogBox DialogBox<span class="operator">.</span>qml
Slider Slider<span class="operator">.</span>qml
</pre>
<p>Then, the directory could be imported using the URL to the remote <code>mycomponents</code> directory:</p>
<pre class="qml">
</pre>
<p>Note that when a file imports a directory over a network, it can only access QML and JavaScript files specified in the <code>qmldir</code> file located in the directory.</p>
<p><b>Warning:</b> When importing directories from a remote server, developers should always be careful to only load directories from trusted sources to avoid loading malicious code.</p>
<a name="directory-listing-qmldir-files"></a>
<h2 id="directory-listing-qmldir-files">Directory Listing qmldir Files</h2>
<p>A directory listing <code>qmldir</code> file distinctly different from a <a href="qtqml-modules-qmldir.html">module definition qmldir file</a>. A directory listing <code>qmldir</code> file allows a group of QML documents to be quickly and easily shared, but it does not define a type namespace into which the QML object types defined by the documents are registered, nor does it support versioning of those QML object types.</p>
<p>The syntax of a directory listing <code>qmldir</code> file is as follows:</p>
<div class="table"><table class="generic">
<thead><tr class="qt-style"><th >Command</th><th >Syntax</th><th >Description</th></tr></thead>
<tr valign="top" class="odd"><td >Object Type Declaration</td><td ><TypeName> <FileName></td><td >An object type declaration allows a QML document to be exposed with the given <code><TypeName></code>.<p>Example:</p>
<pre class="cpp">
RoundedButton RoundedBtn<span class="operator">.</span>qml
</pre>
</td></tr>
<tr valign="top" class="even"><td >Internal Object Type Declaration</td><td >internal <TypeName> <FileName></td><td >An internal object type declaration allows a QML document to be registered as a type which becomes available only to the other QML documents contained in the directory import. The internal type will not be made available to clients who import the directory.<p>Example:</p>
<pre class="cpp">
internal HighlightedButton HighlightedBtn<span class="operator">.</span>qml
</pre>
</td></tr>
<tr valign="top" class="odd"><td >JavaScript Resource Declaration</td><td ><Identifier> <FileName></td><td >A JavaScript resource declaration allows a JavaScript file to be exposed via the given identifier.<p>Example:</p>
<pre class="cpp">
MathFunctions mathfuncs<span class="operator">.</span>js
</pre>
</td></tr>
</table></div>
<p>A local file system directory may optionally include a <code>qmldir</code> file. This allows the engine to only expose certain QML types to clients who import the directory. Additionally, JavaScript resources in the directory are not exposed to clients unless they are declared in a <code>qmldir</code> file.</p>
</div>
<!-- @@@qtqml-syntax-directoryimports.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 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>
distrib
>
Mageia
>
7
>
i586
>
media
>
core-updates
>
by-pkgid
>
6e2327ca1c896c6d674ae53117299f21
>
files
>
349
