blob: a6d132f87b6b82c02eae54ee46f3357b1b2f129b (
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 the \c{Image Gallery} template.
The template will construct a new custom backend by executing the following steps:
\list
\li Create a new object type \c objects.image (on the \gui{Object Types} page).
Add two properties to the image object:
\c {name:"name"}, \c {type: "String"} and \c {name: "file"}, \c {type: "Ref"} with \c {target "files"}.
\li Add a file processor by clicking the \c file property.
Choose \gui {Image processor}, and in \gui 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 \e {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 {EnginioClient} {Enginio client}.
\snippet image-gallery/image-gallery.qml client
Then the model is initialized with that client.
\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 \c 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 \c file.id reference.
The \c 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 thumbnail url of the image 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 \c 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
*/
|
