...
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
Javadoc resource link |
---|
rangeHigherVersion | 5.7 |
---|
className | info.magnolia.ui.vaadin.integration.contentconnector.ContentConnector |
---|
renderType | asynchronous |
---|
|
. See also
Content app with an Object ItemId and different containers for an example of a hierarchical container.
...
Localtab Group |
---|
Localtab |
---|
| Code Block |
---|
| 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: |
|
Localtab |
---|
| Advanced Tables - Table Plus |
---|
heading | 0 |
---|
multiple | false |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
| Node name | Value |
---|
| |
| | |
| |
| | |
| | |
| | |
| | |
| |
| | info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor | | info.magnolia.ui.contentapp.browser.BrowserSubApp | | info.magnolia.ui.contentapp.ContentApp | |
|
|
...
flickr-simple-browser
| required App |
subapps
| required
|
browser
| required Subapp |
class
| required Javadoc |
---|
0 | info.magnolia.ui.contentapp.browser.BrowserSubAppDescriptor |
---|
|
subAppClass required | javadocclassName | 0 | info.magnolia.ui.contentapp.browser.BrowserSubAppBrowserSubAppDescriptor |
---|
renderType | asynchronous |
---|
|
|
subAppClass
appClass | requiredMust be Javadoc |
---|
0 | info.magnolia.ui.contentapp.ContentApp |
---|
| or a subclassBrowserSubApp | rangeHigherVersion | 5.7 |
---|
className | info.magnolia.ui.contentapp.browser.BrowserSubApp |
---|
renderType | asynchronous |
---|
|
|
appClass
| required Must be Javadoc resource link |
---|
0 | info.magnolia.ui.contentapp.ContentApp |
---|
rangeHigherVersion | 5.7 |
---|
className | info.magnolia.ui.contentapp.ContentApp |
---|
renderType | asynchronous |
---|
| or a subclass. |
For 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
Javadoc |
---|
0 | info.magnolia.flickr.simplebrowser.app.item.SimpleFlickrItem |
---|
rangeHigherVersion | 1.2 |
---|
className | info.magnolia.flickr.simplebrowser.app.item.SimpleFlickrItem |
---|
renderType | asynchronous |
---|
|
. Code Block |
---|
|
Code Block |
---|
language | java |
---|
title | info.magnolia.flickr.simplebrowser.app.item.SimpleFlickrItem |
---|
|
public interface SimpleFlickrItem extends BasicFlickrItem {
} |
The interface extends
Javadoc |
---|
0 | info.magnolia.flickr.app.item.BasicFlickrItem |
---|
rangeHigherVersion | 1.2 |
---|
className | info.magnolia.flickr.app.item.BasicFlickrItem |
---|
renderType | asynchronous |
---|
|
in the flickr-integration
module which is the basic item interface that other submodules extend. SimpleFlickrItem
has no other properties....
The implementation class allows us to handle a set of identified properties.
Javadoc |
---|
0 | info.magnolia.flickr.simplebrowser.app.item.SimpleFlickrPropertysetItem |
---|
rangeHigherVersion | 1.2 |
---|
className | info.magnolia.flickr.simplebrowser.app.item.SimpleFlickrPropertysetItem |
---|
renderType | asynchronous |
---|
|
extends
PropertysetItem, one of the implementations provided by Vaadin.
...
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
Javadoc |
---|
0 | info.magnolia.flickr.simplebrowser.app.contentconnector.ConfiguredSimpleFlickrBrowserContentConnectorDefinition |
---|
rangeHigherVersion | 1.2 |
---|
className | info.magnolia.flickr.simplebrowser.app.contentconnector.ConfiguredSimpleFlickrBrowserContentConnectorDefinition |
---|
renderType | asynchronous |
---|
|
class extends Javadoc |
---|
0 | info.magnolia.ui.vaadin.integration.contentconnector.ConfiguredContentConnectorDefinition |
---|
|
andrangeHigherVersion | 5.7 |
---|
className | info.magnolia.ui.vaadin.integration.contentconnector.ConfiguredContentConnectorDefinition |
---|
renderType | asynchronous |
---|
|
and sets the implementation class Javadoc |
---|
0 | info.magnolia.flickr.simplebrowser.app.contentconnector.SimpleFlickrBrowserContentConnectorImpl |
---|
|
. Localtab Group |
---|
Localtab |
---|
| Code Block |
---|
| browser:
contentConnector:
class: info.magnolia.flickr.simplebrowser.app.contentconnector.ConfiguredSimpleFlickrBrowserContentConnectorDefinition |
|
Localtab |
---|
| Advanced Tables - Table Plus |
---|
heading | 0 |
---|
multiple | false |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
| Node name | Value |
---|
|
| |
| | info.magnolia.flickr.simplebrowser.app.contentconnector.ConfiguredSimpleFlickrBrowserContentConnectorDefinition |
|
|
|
Javadoc |
---|
0 | info.magnolia.ui.contentapp.contentconnector.ContentConnectorProvider |
---|
rangeHigherVersion | 5.7 |
---|
className | info.magnolia.ui.contentapp.contentconnector.ContentConnectorProvider |
---|
renderType | asynchronous |
---|
|
creates and provides only one instance of SimpleFlickrBrowserContentConnector
in our subapp. The content connector can be injected into any class used within the subapp. You can cast it to your own type if required....
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
Javadoc |
---|
0 | info.magnolia.ui.workbench.container.Refreshable |
---|
rangeHigherVersion | 5.7 |
---|
className | info.magnolia.ui.workbench.container.Refreshable |
---|
renderType | asynchronous |
---|
|
so we can use the refresh mechanism in the Magnolia workbench. We also need the
Container.Indexed
subinterface for lazy loading.
...
In the presenter class, extend
Javadoc |
---|
0 | info.magnolia.ui.workbench.thumbnail.ThumbnailPresenter |
---|
rangeHigherVersion | 5.7 |
---|
className | info.magnolia.ui.workbench.thumbnail.ThumbnailPresenter |
---|
renderType | asynchronous |
---|
|
and initialize the container:
...
Localtab Group |
---|
Localtab |
---|
| Code Block |
---|
| browser:
workbench:
contentViews:
- name: thumbnail
class: info.magnolia.flickr.simplebrowser.app.workbench.SimpleFlickrThumbnailPresenterDefinition |
|
Localtab |
---|
| Advanced Tables - Table Plus |
---|
heading | 0 |
---|
multiple | false |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
| Node name | Value |
---|
|
| |
| |
| | |
| | info.magnolia.flickr.simplebrowser.app.workbench.SimpleFlickrThumbnailPresenterDefinition |
|
|
|
...
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 |
---|
0 | info.magnolia.ui.workbench.thumbnail.ThumbnailContainer |
---|
|
and Javadoc |
---|
0 | info.magnolia.ui.workbench.thumbnail.ThumbnailContainer.ThumbnailItem |
---|
|
and store the URL as a property in the item. Code Block |
---|
language | java |
---|
title | info.magnolia.flickr.simplebrowser.app.imageprovider.SimpleFlickrBrowserPreviewImageProvider |
---|
collapse | true |
---|
|
public class SimpleFlickrBrowserPreviewImageProvider implements ImageProvider {
private final 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
...
Localtab Group |
---|
Localtab |
---|
| Code Block |
---|
| browser:
imageProvider:
class: info.magnolia.ui.imageprovider.definition.ConfiguredImageProviderDefinition
imageProviderClass: info.magnolia.flickr.simplebrowser.app.imageprovider.SimpleFlickrBrowserPreviewImageProvider |
|
Localtab |
---|
| Advanced Tables - Table Plus |
---|
heading | 0 |
---|
multiple | false |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
| Node name | Value |
---|
|
| |
| | info.magnolia.ui.imageprovider.definition.ConfiguredImageProviderDefinition | | info.magnolia.flickr.simplebrowser.app.imageprovider.SimpleFlickrBrowserPreviewImageProvider |
|
|
|
...
Localtab Group |
---|
Localtab |
---|
| Code Block |
---|
| 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 |
|
Localtab |
---|
| Advanced Tables - Table Plus |
---|
heading | 0 |
---|
multiple | false |
---|
enableHeadingAttributes | false |
---|
enableSorting | false |
---|
class | m5-configuration-tree |
---|
enableHighlighting | false |
---|
| Node name | Value |
---|
|
| | |
| |
| |
| | |
| | |
| | info.magnolia.flickr.app.workbench.FlickrBrowserItemColumnDefinition | | info.magnolia.flickr.app.workbench.FlickrBrowserItemColumnFormatter | | title | | info.magnolia.flickr.simplebrowser.app.workbench.SimpleFlickrListPresenterDefinition |
|
|
|
Properties:
list | required
|
columns
| required Column definitions for tree, list and search views. You don't need to define columns for the thumbnail view. |
<column name>
| required You can choose the name of the column. H owever, it is common practice to use same name as in propertyName . |
class
| required The column definition class reads the column configuration and displays the column accordingly. The class must implement Javadoc |
---|
0 | info.magnolia.ui.workbench.column.definition.ColumnDefinition |
---|
|
. |
formatterClass
| required Defines how the column's value is displayed in the UI. This is useful for making the raw data more readable or making it adhere to a formatting convention.The formatter class must extend Javadoc |
---|
0 | info.magnolia.ui.workbench.column.AbstractColumnFormatter |
---|
|
|
propertyName
| required The name of the property as configured in the container. See Javadoc |
---|
0 | info.magnolia.flickr.simplebrowser.app.container.SimpleFlickrFlatContainer |
---|
| #configure and SimpleFlickrItem.IDs#getIDs . |
class
| required Presenter definition class. |