/****************************************************************************
**
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing/
**
** 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 The Qt Company. For licensing terms
** and conditions see http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/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

*/
