List elements are defined like other QML types except that they contain a collection of role definitions instead of properties. Roles both define how the data is accessed and include the data itself. For each list element, we use the tag role to specify the photos to download.

A DelegateModel type is used together with the Package type to provide delegates to multiple views. The model property holds the model providing data for the delegate model and the delegate property specifies the template defining each item instantiated by a view:

The model property references the package name album that we specify in AlbumDelegate.qml. We use the Package type to allow the photos to move between different views. The Package contains the named items browser, fullscreen, and album:

We use the tags custom property to specify which photos to download. The encodeTags custom function uses the encodeURIComponent JavaScript method to ensure that the requests to the server are correctly formatted.

We use the source property to fetch photos that have the specified tags attached from public Flickr feeds:

The path property holds the Path type that defines the path used by the PathView. The PathAttribute types are used to set a range of 0 to 9999 for the z attribute. This way, the path creates a stack of album photos. Because each PhotoDelegate is slightly rotated at a random angle, this results in a realistic-looking stack of photos.

Providing Feedback to Users

We use a busy indicator and a progress bar to indicate activity while Flickr feeds and photos are being loaded.

In AlbumDelegate.qml, we use the BusyIndicator custom type and the on custom property to display a rotating image while the Flickr feed is being loaded:

We define the ProgressBar type in ProgressBar.qml. We use a Rectangle type to create the progress bar and apply a NumberAnimation to its opacity property to change the color of the bar from black to white as data loading proceeds:

We use the lupdate() tool to generate the translation source files and the lrelease() tool to convert the translated strings to the QM files used by the application at runtime. These files are stored in the i18n directory.

To make the application aware of the translations, we add code to the main() function in the main.cpp file. The code creates a QTranslator object, loads a translation according to the current locale at runtime, and installs the translator object into the application: