Page History

The flickr-simple-browser module is an example of how to build a custom content app. The module installs an app that allows you to browse photos on Flickr. We use a String as ItemId, which is easy to implement but has the disadvantage that we cannot tell the difference between photos and albums. This example also shows how to use an external Web service as the data source. The list view and the thumbnail view use the same Container coupled to a 

...

name: flickr-simple-browser
appClass: info.magnolia.ui.contentapp.ContentApp
subApps:
  browser:
    subAppClass: info.magnolia.ui.contentapp.browser.BrowserSubApp
    class: info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor
    # contentConnector:
    # workbench:
    # imageProvider:

...

For the details of contentConnector, workbench and imageProvider definition, see below.

...

An Item has properties and every property is identified by its property ID. Define the properties in an interface. In this module we define the interface 

public interface SimpleFlickrItem extends BasicFlickrItem {

}

The interface extends 

...

The implementation class allows us to handle a set of identified properties. 

...

• getItemUrlFragment(Object itemId) (see line 16) and getItemIdByUrlFragment(String urlFragment) (see line 20) methods can return their input parameters since our ItemId is a string and the URL fragment and the ItemId are identical in this simple example.
• getDefaultItemId() method does not need to be implemented. It can return null. But since FlickrService provides a default photo we implement the method. In some cases it is helpful to work with a default item.
• canHandle() should reject invalid ItemIds. The app could fire an event with an ID / and the event would be handled by the ContentConnector but there is no Flickr photo with the ID /.
• The 

  Javadoc
  0 info.magnolia.flickr.app.flickrservice.FlickrService

   interface

  rangeHigherVersion 1.2 className info.magnolia.flickr.app.flickrservice.FlickrService renderType asynchronous

   interface is injected in the constructor. FlickrService is instantiated by

  Javadoc
  0 info.magnolia.flickr.app.flickrservice.FlickrServiceProvider rangeHigherVersion 1.2 className info.magnolia.flickr.app.flickrservice.FlickrServiceProvider renderType asynchronous

   which is registered in the flickr-integration module.

...

Every subapp must configure its own content connector. The 

browser:
  contentConnector:
    class: info.magnolia.flickr.simplebrowser.app.contentconnector.ConfiguredSimpleFlickrBrowserContentConnectorDefinition

...

We use the same container for the tree view and the thumbnail view. In this case it would be sufficient to implement just the base interface Container. However, we also implement 

...

In the presenter class, extend 

...

browser:
  workbench:
    contentViews:
      - name: thumbnail
        class: info.magnolia.flickr.simplebrowser.app.workbench.SimpleFlickrThumbnailPresenterDefinition

Creating and configuring an image provider

...

To improve the performance, we could use a POJO as an ItemId. We do so in the second tutorial  Content app with an Object ItemId and different containers . Alternatively, extend Javadoc

public class SimpleFlickrBrowserPreviewImageProvider implements ImageProvider {


    private final FlickrService flickrService;

    @Inject
    public SimpleFlickrBrowserPreviewImageProvider(FlickrService flickrService) {
        this.flickrService = flickrService;
    }

    @Override
    public String getPortraitPath(Object itemId) {
        return null;
    }

    @Override
    public String getThumbnailPath(Object itemId) {
        return null;
    }

    @Override
    public String resolveIconClassName(String mimeType) {
        return null;
    }

 @Override public   @Override
    public Object getThumbnailResource(Object itemId, String generator) {
        Resource resource = null;

        if (itemId instanceof String) {
            String photoId = (String) itemId;
            if (StringUtils.isNotBlank(photoId)) {
                /**
                 * To grep data from flickr API here is very costly - since a thumbnail container could call this method here many 100s100 of times.
 * Here it would make sense to add the smallUrl as a property of a more sophisticated ItemId */ Photo photo = flickrService.getPhoto(photoId); if (photo != null) { String smallPicUrl = photo.getSmallUrl(); if (StringUtils.isNotBlank(smallPicUrl)) { resource = new ExternalResource(smallPicUrl); } } } } return resource; }              * Here it would make sense to add the smallUrl as a property of a more sophisticated ItemId
                 */
                Photo photo = flickrService.getPhoto(photoId);
                if (photo != null) {
                    String smallPicUrl = photo.getSmallUrl();
                    if (StringUtils.isNotBlank(smallPicUrl)) {
                        resource = new ExternalResource(smallPicUrl);
                    }
                }
            }
        }
        return resource;
    }
}

Anchor
Creating and configuring an image provider- Creating and configuring an image provider-

Configuration

...

browser:
  imageProvider:
    class: info.magnolia.ui.imageprovider.definition.ConfiguredImageProviderDefinition
    imageProviderClass: info.magnolia.flickr.simplebrowser.app.imageprovider.SimpleFlickrBrowserPreviewImageProvider

...

browser:
  workbench:
    contentViews:
      - name: list 
        class: info.magnolia.flickr.simplebrowser.app.workbench.SimpleFlickrListPresenterDefinition
        columns:
          - name: title
            class: info.magnolia.flickr.app.workbench.FlickrBrowserItemColumnDefinition
            formatterClass: info.magnolia.flickr.app.workbench.FlickrBrowserItemColumnFormatter
            propertyName: title

Properties: