blob: 418a724dd8f65899a8330a06cce960dc87e1a0e3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
/****************************************************************************
**
** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and Digia. For licensing terms and
** conditions see http://qt.digia.com/licensing. For further information
** use the contact form at http://qt.digia.com/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: http://www.gnu.org/copyleft/fdl.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\title Enginio QML Examples - Image Gallery
\example image-gallery
\brief This is an example that demonstrates uploading and downloading of files in Enginio.
\ingroup enginio-qml-examples
\inmodule enginio-qml
The user interface is a list of images with their meta-information
and a button to upload more images.
\image image-gallery.png
\section1 Backend configuration
The Enginio backend needs to be set up to get this example working.
Go to the Enginio Dashboard and create a new backend with 'Image Gallery' template.
The template will construct a new custom backend by executing steps:
\list
\li Create a new object type "objects.image" (on the Object Types page).
Add two properties to the image object:
name:"name", type: "String" and name: "file", type: "Ref" with target "files".
\li Add a file processor by clicking the "file" property.
Choose "Image processor" and in "Variants" enter:
\code
{
"thumbnail": { "crop":"100x100" }
}
\endcode
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.
\endlist
Copy the backend Id from the Enginio dashboard.
They need to be entered into the example when it is executed for the first time.
\section1 The example code
The first step is to set up the \l Enginio::EnginioClient client.
\snippet image-gallery/image-gallery.qml client
The model gets initialized with the client declared above.
\snippet image-gallery/image-gallery.qml model
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.
\note in a real application it might be necessary to cache the images.
The Component.onCompleted function is used to fetch the image.
When the delegate is created, it has the JSON image object data.
The information needed is the "file.id" reference.
The "file" property was introduced in the backend setup section. Every
object (files are just objects) contains an ID that uniquely identifies the image file.
The image's thumbnail-url is retrieved using the ID ("variant": "thumbnail").
\snippet image-gallery/image-gallery.qml image-fetch
The meta-information about each image is displayed in simple Text elements.
For the filename, it is possible to directly reference the \c name property as
defined in the JSON.
\qml
Text { text: name }
\endqml
*/
|