<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- image-gallery.qdoc -->
<title>Enginio QML Examples - Image Gallery | Enginio Manual 1.6.3</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 1.6</td><td ><a href="enginio-index.html">Enginio Manual</a></td><td >Enginio QML Examples - Image Gallery</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="enginio-index.html">Qt 1.6.3 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="#backend-configuration">Backend Configuration</a></li>
<li class="level1"><a href="#the-example-code">The Example Code</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Enginio QML Examples - Image Gallery</h1>
<span class="subtitle"></span>
<!-- $$$image-gallery-brief -->
<p>This is an example that demonstrates uploading and downloading of files in Enginio.</p>
<!-- @@@image-gallery -->
<!-- $$$image-gallery-description -->
<div class="descr"> <a name="details"></a>
<p>The user interface is a list of images with their meta-information and a button to upload more images.</p>
<p class="centerAlign"><font color="red">[Missing image image-gallery.png]</font></p><a name="backend-configuration"></a>
<h2 id="backend-configuration">Backend Configuration</h2>
<p>The Enginio backend needs to be set up to get this example working.</p>
<p>Go to the Enginio Dashboard and create a new backend with the <code>Image Gallery</code> template.</p>
<p>The template will construct a new custom backend by executing the following steps:</p>
<ul>
<li>Create a new object type <code>objects.image</code> (on the <b>Object Types</b> page).<p>Add two properties to the image object: <code>name:"name"</code>, <code>type: "String"</code> and <code>name: "file"</code>, <code>type: "Ref"</code> with <code>target "files"</code>.</p>
</li>
<li>Add a file processor by clicking the <code>file</code> property. Choose <b>Image processor</b>, and in <b>Variants</b> enter:<pre class="cpp">
{
<span class="string">"thumbnail"</span>: { <span class="string">"crop"</span>:<span class="string">"100x100"</span> }
}
</pre>
<p>This JSON snippet triggers the server to generate thumbnails for all uploaded images. In the image gallery the thumbnails will be used in the list view. The full image will be shown when the thumbnail is clicked.</p>
</li>
</ul>
<p>Copy the <i>backend id</i> from the Enginio dashboard. They need to be entered into the example when it is executed for the first time.</p>
<a name="the-example-code"></a>
<h2 id="the-example-code">The Example Code</h2>
<p>The first step is to set up the <a href="qml-enginio-enginioclient.html">Enginio client</a>.</p>
<pre class="qml">
</pre>
<p>Then the model is initialized with that client.</p>
<pre class="qml">
</pre>
<p>A delegate is needed to present the images nicely. The model is used to get the list of image objects, but the images are only attached to the objects as file references. Thus the image's thumbnail is fetched by each delegate.</p>
<p><b>Note: </b>In a real application it might be necessary to cache the images.</p><p>The <code>Component.onCompleted</code> function is used to fetch the image. When the delegate is created, it has the JSON image object data. The information needed is the <code>file.id</code> reference. The <code>file</code> property was introduced in the backend setup section. Every object (files are just objects) contains an ID that uniquely identifies the image file. The thumbnail url of the image is retrieved using the ID ("variant": "thumbnail").</p>
<pre class="qml">
</pre>
<p>The meta-information about each image is displayed in simple <code>Text</code> elements. For the filename, it is possible to directly reference the <code>name</code> property as defined in the JSON.</p>
<pre class="qml">
</pre>
</div>
<!-- @@@image-gallery -->
</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
>
4ff6143ff2a088c33c83add3bab6e293
>
files
>
72
