Creating a custom content app

In this section you learn to create a custom content app:

Start with the content app framework and learn the building blocks.
Get the sample code for a Flickr photo app.
Do the simple tutorial where you use a String as an item ID and create a single container.

The example photo app uses the Flickr Web service as a remote data source. If you are interested in non-JCR data sources in general see Content app with non-JCR content.

Use case: accessing remotely stored images

Digital agencies use thousands of images to build attractive Web content. Large image libraries are typically not stored locally in the JCR but in purpose-built digital asset servers and repositories either on the company's premises or at remote host.

In these tutorials we:

Connect a remote image hosting service to Magnolia.
Create a custom content app that makes it easy for Magnolia editors to browse remotely stored images.
Create a dialog that allows editors to select an image for use on the site.

The custom app avoids the cumbersome process of downloading each image separately from the host and adding it to Magnolia's DAM before it is available for use.

In this tutorial we don't go into details of creating a template to embed an image on the site. However, we provide an example component template that uses the Flickr browser app in a choose dialog.

Flickr

Flickr is a popular photo sharing site that hosts billions of images. It also provides an API to fetch data, has high availability, and creates many different sizes of an image. In this example we use Flickr as a media store.

Flickr account

To upload and host photos on Flickr you need an account. Every photo has a unique ID. The ID is not only unique within an account but within Flickr as a whole.

Flickr allows you to organize photos into albums. One photo can belong to one or more albums. Each album also has a unique ID.

Flickr API key and secret

To use use the Flickr API you have to apply for an API key. You will get a key and a secret. To fetch data from the API, use your account ID, API key and API secret.

The example module contains an account that has access to a few albums and photos. Please do not abuse the account, otherwise we have to remove it.

If you need to access many Flickr accounts and choose photos from them, create another app to manage Flickr account data. This could be done in a simple JCR content app.

Referencing photos

We only store a reference to a Flickr photo in the JCR content of a page instead of storing the UUID of a Magnolia Asset. We let the rendered page fetch the picture from Flickr. Such a solution may save a lot of bandwidth for your infrastructure but it also means that the images are always served from the remote host.

Flickr4Java

Flickr4Java is a Java API which wraps the REST-based Flickr API. We use it in the example to make accessing Flickr from Java code easier.

Get the `flickr-integration` project

To understand the tutorials and the Flickr example, install the flickr-integration project into your development environment.

If you use an IDE, add the modules to the POM file of your development project and clone the resources from the Magnolia Git repository. You can read the complete source and debug the examples.
If you don't use an IDE, add the required JAR files to your bundle .

Project structure

The project has a parent pom which contains 6 submodules.

flickr-integration-parent: Takes care for dependency management.
- flickr-accounts: JCR based content app to manage Flickr accounts. Data* is read by flickr-integration.
- flickr-integration: Provides classes to fetch data via Flickr API.
- flickr-simple-browser: A simple content app to browse Flickr photos.
- flickr-browser: Extended content app to browse Flickr photos and albums.
- flickr-templates: Minimal set of templates to add Flickr photos to Magnolia pages, storing references to Flickr photos or albums.
- flickr-integration-bundle: Bundles all the other submodules including their dependencies to third party libraries

*) The accounts submodule contains access data for a demo Flickr account to play around. Please do not abuse - neither account data nor the account itself.

Adding modules to your project POM

Add the modules flickr-accounts, flickr-integration, flickr-simple-browser, flickr-browser and flickr-templates to your project.

Assuming your project has - similar to the ce-bundle - a parent POM file and a POM file for the Magnolia bundled webapp, do the following:

Add the dependencies in the dependencyManagement section of the parent POM. Include the versions.

pom file of your parent bundle

<properties>
   <flickrIntegrationVersion>1.0.4</flickrIntegrationVersion>
</properties>

<dependencyManagement>
   <dependencies>
      <!-- more dependencies here -->
      <!-- flickr-integration -->
      <dependency>
         <groupId>info.magnolia.documentation</groupId>
         <artifactId>flickr-accounts</artifactId>
         <version>${flickrIntegrationVersion}</version>
      </dependency>
      <dependency>
         <groupId>info.magnolia.documentation</groupId>
         <artifactId>flickr-integration</artifactId>
         <version>${flickrIntegrationVersion}</version>
      </dependency>
      <dependency>
         <groupId>info.magnolia.documentation</groupId>
         <artifactId>flickr-simple-browser</artifactId>
         <version>${flickrIntegrationVersion}</version>
      </dependency>
      <dependency>
         <groupId>info.magnolia.documentation</groupId>
         <artifactId>flickr-browser</artifactId>
         <version>${flickrIntegrationVersion}</version>
      </dependency>
      <dependency>
         <groupId>info.magnolia.documentation</groupId>
         <artifactId>flickr-templates</artifactId>
         <version>${flickrIntegrationVersion}</version>
      </dependency>
      <!-- more dependencies here -->
   </dependencies>
</dependencyManagement>

fake
Add the dependencies to the bundle POM file too. This time you can leave out the versions.

pom file of the web app bundle

<dependencies>
   <!-- more dependencies here -->
   <!-- flickr-integration -->
   <dependency>
      <groupId>info.magnolia.documentation</groupId>
      <artifactId>flickr-integration</artifactId>
   </dependency>
   <dependency>
      <groupId>info.magnolia.documentation</groupId>
      <artifactId>flickr-accounts</artifactId>
   </dependency>
   <dependency>
      <groupId>info.magnolia.documentation</groupId>
      <artifactId>flickr-browser</artifactId>
   </dependency>
   <dependency>
      <groupId>info.magnolia.documentation</groupId>
      <artifactId>flickr-simple-browser</artifactId>
   </dependency>
   <dependency>
      <groupId>info.magnolia.documentation</groupId>
      <artifactId>flickr-templates</artifactId>
   </dependency>
</dependencies>

Clone the project from Git

The project code is stored on Magnolia's Git repository.

Open a shell, change to a directory where you want to clone the project, and type the following:

git clone http://git.magnolia-cms.com/git/documentation/flickr-integration.git

Adding JAR files to a bundle

To install the Flickr project to a bundle, download the latest flickr-integration-bundle module. The ZIP contains all other submodules plus all direct and transient dependencies such as the Flickr4Java wrapper.

To install, unzip the file and copy all the files from the directory to $<yourBundle/webapps/<contextPath>/WEB-INF/libs. Some of the files may already be present in the WEB-INF/libs directory of your Magnolia webapp.

Page tree