<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- imports.qdoc -->
<title>Importing JavaScript Resources in QML | 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 JavaScript Resources in QML</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="#importing-a-javascript-resource-from-a-qml-document">Importing a JavaScript Resource from a QML Document</a></li>
<li class="level1"><a href="#imports-within-javascript-resources">Imports Within JavaScript Resources</a></li>
<li class="level2"><a href="#importing-a-javascript-resource-from-another-javascript-resource">Importing a JavaScript Resource from Another JavaScript Resource</a></li>
<li class="level2"><a href="#importing-a-qml-module-from-a-javascript-resource">Importing a QML Module from a JavaScript Resource</a></li>
<li class="level1"><a href="#including-a-javascript-resource-from-another-javascript-resource">Including a JavaScript Resource from Another JavaScript Resource</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Importing JavaScript Resources in QML</h1>
<span class="subtitle"></span>
<!-- $$$qtqml-javascript-imports.html-description -->
<div class="descr"> <a name="details"></a>
<p><a href="qtqml-javascript-resources.html">JavaScript resources</a> may be imported by QML documents and other JavaScript resources. JavaScript resources may be imported via either relative or absolute URLs. In the case of a relative URL, the location is resolved relative to the location of the <a href="qtqml-documents-topic.html">QML document</a> or <a href="qtqml-javascript-resources.html">JavaScript Resource</a> that contains the import. If the script file is not accessible, an error will occur. If the JavaScript needs to be fetched from a network resource, the component's <a href="qqmlcomponent.html#status-prop">status</a> is set to "Loading" until the script has been downloaded.</p>
<p>JavaScript resources may also import QML modules and other JavaScript resources. The syntax of an import statement within a JavaScript resource differs slightly from an import statement within a QML document, which is documented thoroughly below.</p>
<a name="importing-a-javascript-resource-from-a-qml-document"></a>
<h2 id="importing-a-javascript-resource-from-a-qml-document">Importing a JavaScript Resource from a QML Document</h2>
<p>A QML document may import a JavaScript resource with the following syntax:</p>
<pre class="cpp">
import <span class="string">"ResourceURL"</span> as Qualifier
</pre>
<p>For example:</p>
<pre class="cpp">
import <span class="string">"jsfile.js"</span> as Logic
</pre>
<p>Imported JavaScript resources are always qualified using the "as" keyword. The qualifier for JavaScript resources must start with an uppercase letter, and must be unique, so there is always a one-to-one mapping between qualifiers and JavaScript files. (This also means qualifiers cannot be named the same as built-in JavaScript objects such as <code>Date</code> and <code>Math</code>).</p>
<p>The functions defined in an imported JavaScript file are available to objects defined in the importing QML document, via the <code>"Qualifier.functionName(params)"</code> syntax. Functions in JavaScript resources may take parameters whose type can be any of the supported QML basic types or object types, as well as normal JavaScript types. The normal <a href="qtqml-cppintegration-data.html">data type conversion rules</a> will apply to parameters and return values when calling such functions from QML.</p>
<a name="imports-within-javascript-resources"></a>
<h2 id="imports-within-javascript-resources">Imports Within JavaScript Resources</h2>
<p>In <code>QtQuick 2.0</code>, support has been added to allow JavaScript resources to import other JavaScript resources and also QML type namespaces using a variation of the standard QML import syntax (where all of the previously described rules and qualifications apply).</p>
<p>Due to the ability of a JavaScript resource to import another script or QML module in this fashion in <code>QtQuick 2.0</code>, some extra semantics are defined:</p>
<ul>
<li>a script with imports will not inherit imports from the QML document which imported it (so accessing Component.errorString will fail, for example)</li>
<li>a script without imports will inherit imports from the QML document which imported it (so accessing Component.errorString will succeed, for example)</li>
<li>a shared script (i.e., defined as .pragma library) does not inherit imports from any QML document even if it imports no other scripts or modules</li>
</ul>
<p>The first semantic is conceptually correct, given that a particular script might be imported by any number of QML files. The second semantic is retained for the purposes of backwards-compatibility. The third semantic remains unchanged from the current semantics for shared scripts, but is clarified here in respect to the newly possible case (where the script imports other scripts or modules).</p>
<a name="importing-a-javascript-resource-from-another-javascript-resource"></a>
<h3 id="importing-a-javascript-resource-from-another-javascript-resource">Importing a JavaScript Resource from Another JavaScript Resource</h3>
<p>A JavaScript resource may import another in the following fashion:</p>
<pre class="cpp">
<span class="operator">.</span>import <span class="string">"filename.js"</span> as Qualifier
</pre>
<p>For example:</p>
<pre class="cpp">
<span class="operator">.</span>import <span class="string">"factorial.js"</span> as MathFunctions
</pre>
<a name="importing-a-qml-module-from-a-javascript-resource"></a>
<h3 id="importing-a-qml-module-from-a-javascript-resource">Importing a QML Module from a JavaScript Resource</h3>
<p>A JavaScript resource may import a QML module in the following fashion:</p>
<pre class="cpp">
<span class="operator">.</span>import TypeNamespace MajorVersion<span class="operator">.</span>MinorVersion as Qualifier
</pre>
<p>For example:</p>
<pre class="cpp">
<span class="operator">.</span>import <span class="type"><a href="qml-qtqml-qt.html">Qt</a></span><span class="operator">.</span>test <span class="number">1.0</span> as JsQtTest
</pre>
<p>In particular, this may be useful in order to access functionality provided via a singleton type; see <a href="qqmlengine.html#qmlRegisterSingletonType">qmlRegisterSingletonType</a>() for more information.</p>
<p><b>Note: </b>The .import syntax doesn't work for scripts used in the <a href="qml-workerscript.html">WorkerScript</a></p><a name="including-a-javascript-resource-from-another-javascript-resource"></a>
<h2 id="including-a-javascript-resource-from-another-javascript-resource">Including a JavaScript Resource from Another JavaScript Resource</h2>
<p>When a JavaScript file is imported, it must be imported with a qualifier. The functions in that file are then accessible from the importing script via the qualifier (that is, as <code>Qualifier.functionName(params)</code>). Sometimes it is desirable to have the functions made available in the importing context without needing to qualify them, and in this circumstance the <a href="qml-qtqml-qt.html#include-method">Qt.include()</a> function may be used to include one JavaScript file from another. This copies all functions from the other file into the current file's namespace, but ignores all pragmas and imports defined in that file.</p>
<p>For example, the QML code below left calls <code>showCalculations()</code> in <code>script.js</code>, which in turn can call <code>factorial()</code> in <code>factorial.js</code>, as it has included <code>factorial.js</code> using <a href="qml-qtqml-qt.html#include-method">Qt.include()</a>.</p>
<div class="table"><table class="generic">
<tr valign="top" class="odd"><td rowspan="2"><pre class="qml">
import QtQuick 2.0
import "script.js" as MyScript
Item {
width: 100; height: 100
MouseArea {
anchors.fill: parent
onClicked: {
MyScript.showCalculations(10)
console.log("Call factorial() from QML:",
MyScript.factorial(10))
}
}
}
</pre>
</td><td ><pre class="js">
// script.js
Qt.include("factorial.js")
function showCalculations(value) {
console.log(
"Call factorial() from script.js:",
factorial(value));
}
</pre>
</td></tr>
<tr valign="top" class="even"><td ><pre class="js">
// factorial.js
function factorial(a) {
a = parseInt(a);
if (a <= 0)
return 1;
else
return a * factorial(a - 1);
}
</pre>
</td></tr>
</table></div>
<p>Notice that calling <a href="qml-qtqml-qt.html#include-method">Qt.include()</a> copies all functions from <code>factorial.js</code> into the <code>MyScript</code> namespace, which means the QML component can also access <code>factorial()</code> directly as <code>MyScript.factorial()</code>.</p>
</div>
<!-- @@@qtqml-javascript-imports.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
>
220
