<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- network.qdoc -->
<title>Qt 4.8: Network Transparency</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>Network Transparency</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="qdeclarativedynamicobjects.html" />
<link rel="next" href="qdeclarativei18n.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qdeclarativedynamicobjects.html">Dynamic Object Management</a>
<a class="nextPage" href="qdeclarativei18n.html">Internationalization</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#relative-vs-absolute-urls">Relative vs. Absolute URLs</a></li>
<li class="level1"><a href="#progressive-loading">Progressive Loading</a></li>
<li class="level1"><a href="#accessing-network-services">Accessing Network Services</a></li>
<li class="level1"><a href="#configuring-the-network-access-manager">Configuring the Network Access Manager</a></li>
<li class="level1"><a href="#qrc-resources">QRC Resources</a></li>
<li class="level1"><a href="#limitations">Limitations</a></li>
</ul>
</div>
<h1 class="title">Network Transparency</h1>
<span class="subtitle"></span>
<!-- $$$qdeclarativenetwork.html-description -->
<div class="descr"> <a name="details"></a>
<p>QML supports network transparency by using URLs (rather than file names) for all references from a QML document to other content:</p>
<pre class="qml"> <span class="type"><a href="qml-image.html">Image</a></span> {
<span class="name">source</span>: <span class="string">"http://www.example.com/images/logo.png"</span>
}</pre>
<p>Since a <i>relative</i> URL is the same as a relative file, development of QML on regular file systems remains simple:</p>
<pre class="qml"> <span class="type"><a href="qml-image.html">Image</a></span> {
<span class="name">source</span>: <span class="string">"images/logo.png"</span>
}</pre>
<p>Network transparency is supported throughout QML, for example:</p>
<ul>
<li>Fonts - the <tt>source</tt> property of <a href="qml-fontloader.html">FontLoader</a> is a URL</li>
<li>WebViews - the <tt>url</tt> property of <a href="qml-webview.html">WebView</a> (obviously!)</li>
</ul>
<p>Even QML types themselves can be on the network - if the <a href="qmlviewer.html">QML Viewer</a> is used to load <tt>http://example.com/mystuff/Hello.qml</tt> and that content refers to a type "World", the engine will load <tt>http://example.com/mystuff/qmldir</tt> and resolve the type just as it would for a local file. For example if the qmldir file contains the line "World World.qml", it will load <tt>http://example.com/mystuff/World.qml</tt> Any other resources that <tt>Hello.qml</tt> referred to, usually by a relative URL, would similarly be loaded from the network.</p>
<a name="relative-vs-absolute-urls"></a>
<h2>Relative vs. Absolute URLs</h2>
<p>Whenever an object has a property of type URL (<a href="qurl.html">QUrl</a>), assigning a string to that property will actually assign an absolute URL - by resolving the string against the URL of the document where the string is used.</p>
<p>For example, consider this content in <tt>http://example.com/mystuff/test.qml</tt>:</p>
<pre class="qml"> <span class="type"><a href="qml-image.html">Image</a></span> {
<span class="name">source</span>: <span class="string">"images/logo.png"</span>
}</pre>
<p>The <a href="qml-image.html">Image</a> source property will be assigned <tt>http://example.com/mystuff/images/logo.png</tt>, but while the QML is being developed, in say <tt>C:\User\Fred\Documents\MyStuff\test.qml</tt>, it will be assigned <tt>C:\User\Fred\Documents\MyStuff\images\logo.png</tt>.</p>
<p>If the string assigned to a URL is already an absolute URL, then "resolving" does not change it and the URL is assigned directly.</p>
<a name="progressive-loading"></a>
<h2>Progressive Loading</h2>
<p>Because of the declarative nature of QML and the asynchronous nature of network resources, objects which reference network resource generally change state as the network resource loads. For example, an Image with a network source will initially have a <tt>width</tt> and <tt>height</tt> of 0, a <tt>status</tt> of <tt>Loading</tt>, and a <tt>progress</tt> of 0.0. While the content loads, the <tt>progress</tt> will increase until the content is fully loaded from the network, at which point the <tt>width</tt> and <tt>height</tt> become the content size, the <tt>status</tt> becomes <tt>Ready</tt>, and the <tt>progress</tt> reaches 1.0. Applications can bind to these changing states to provide visual progress indicators where appropriate, or simply bind to the <tt>width</tt> and <tt>height</tt> as if the content was a local file, adapting as those bound values change.</p>
<p>Note that when objects reference local files they immediately have the <tt>Ready</tt> status, but applications wishing to remain network transparent should not rely on this. Future versions of QML may also use asynchronous local file I/O to improve performance.</p>
<a name="accessing-network-services"></a>
<h2>Accessing Network Services</h2>
<p>QML types such as <a href="qml-xmllistmodel.html">XmlListModel</a>, and JavaScript classes like <a href="qdeclarativeglobalobject.html#xmlhttprequest">XMLHttpRequest</a> are intended entirely for accessing network services, which usually respond with references to content by URLs that can then be used directly in QML. For example, using these facilities to access an on-line photography service would provide the QML application with URLs to photographs, which can be directly set on an <a href="qml-image.html">Image</a> <tt>source</tt> property.</p>
<p>See the <tt>demos/declarative/flickr</tt> for a real demonstration of this.</p>
<a name="configuring-the-network-access-manager"></a>
<h2>Configuring the Network Access Manager</h2>
<p>All network access from QML is managed by a <a href="qnetworkaccessmanager.html">QNetworkAccessManager</a> set on the <a href="qdeclarativeengine.html">QDeclarativeEngine</a> which executes the QML. By default, this is an unmodified Qt <a href="qnetworkaccessmanager.html">QNetworkAccessManager</a>. You may set a different manager by providing a <a href="qdeclarativenetworkaccessmanagerfactory.html">QDeclarativeNetworkAccessManagerFactory</a> and setting it via <a href="qdeclarativeengine.html#setNetworkAccessManagerFactory">QDeclarativeEngine::setNetworkAccessManagerFactory</a>(). For example, the <a href="qmlviewer.html">QML Viewer</a> sets a <a href="qdeclarativenetworkaccessmanagerfactory.html">QDeclarativeNetworkAccessManagerFactory</a> which creates <a href="qnetworkaccessmanager.html">QNetworkAccessManager</a> that trusts HTTP Expiry headers to avoid network cache checks, allows HTTP Pipelining, adds a persistent HTTP CookieJar, a simple disk cache, and supports proxy settings.</p>
<a name="qrc-resources"></a>
<h2>QRC Resources</h2>
<p>One of the URL schemes built into Qt is the "qrc" scheme. This allows content to be compiled into the executable using <a href="resources.html">The Qt Resource System</a>. Using this, an executable can reference QML content that is compiled into the executable:</p>
<pre class="qml"> <span class="type"><a href="qdeclarativeview.html">QDeclarativeView</a></span> view;
view<span class="operator">.</span>setSource(<span class="type"><a href="qurl.html">QUrl</a></span>(<span class="string">"qrc:/main.qml"</span>));</pre>
<p>The content itself can then use relative URLs, and so be transparently unaware that the content is compiled into the executable.</p>
<a name="limitations"></a>
<h2>Limitations</h2>
<p>The <tt>import</tt> statement is only network transparent if it has an "as" clause.</p>
<p>More specifically:</p>
<ul>
<li><tt>import "dir"</tt> only works on local file systems</li>
<li><tt>import libraryUri</tt> only works on local file systems</li>
<li><tt>import "dir" as D</tt> works network transparently</li>
<li><tt>import libraryUrl as U</tt> works network transparently</li>
</ul>
</div>
<!-- @@@qdeclarativenetwork.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qdeclarativedynamicobjects.html">Dynamic Object Management</a>
<a class="nextPage" href="qdeclarativei18n.html">Internationalization</a>
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
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.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
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. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
