Introduction

When you are usingHippo CMS, the content and the presentation logic are
clearly separated. This cleaner approach to content management allows the users to publish content to various channels with less or no effort.
In this post I’ll try to explain how you can setup a multi channel publishing system using
Hippo CMS and Hippo Site Toolkit that can serve same content to
different channels viz. Web Sites, Mobile (iPhone), iCalendar format and Layar
(Augmented Reality Browser).
In this article, I assume that you are a bit familiar with developing a website using Hippo CMS and Hippo Site Toolkit.

What is Multi Channel Publishing?

Multi Channel Publishing represents the execution and/or deployment of communication(s) across any of the various channels (of communication),
which includes print, email, mobile, web, podcasts or any other of the existing channels.
– WikiPedia

As an example scenario, consider that you are building an events website with each event having a location, image, date and time etc.
You may want to ensure the availability of the data in various channels:

Web Page

The obvious channel to publish your content is a website where people can check the list of events and the details.

iCalendar Format (ics)

You can provide the events calendar in an iCal format so that your site visitors can subscribe to the calendar using
their calendar client (iCal, Outlook etc.)

Mobile (iPhone)

You can optimize the site for best user experience by providing a customized version of the webpages specifically targeted
for different mobile devices. In our case we will see how we can generate iPhone web application type of interface fort the site using
jQTouch.

Augmented Reality Layer

If our events have location information added to them, you can also provide a Augmented Reality layer and publish using a
third party service like Layar. Let us see how we can publish to these various outlets
using CMS and Hippo Site Tookit.

Content Model

The content model for the event is fairly simple. Each event will have a Title, Description, Date, Image and Location information.
You can define the Event as a compound type in the CMS. The CND for the content type will be as follows:

The location type is just a compound type with longitude and latitude. We can use this for displaying the map and publishing the location
information to Layar.

For adding the location to the document you can use the Google Maps Plugin.
This plugin provides a Google Maps widget that you can include in the document template. And allows the user to specify the location by right clicking on the map.
I’ll explain how to install/use the plugin in a different blog post.

You can optionally add the boolean fields whether the event is available for Augmented Reality (Layar) or iCal etc.
The events page is the document which can have multiple events. The CND for the same is as follows:

As per the content storage structure, all the events documents will be stored under the myproject/events.

Presentation of Data

If you are already acquainted with Hippo Site Toolkit, the next logical step to build your site is to create the Hippo Beans
for your content model. I’ll leave out the Hippo Bean details for brevity’s sake.

Web Page

Developing a web page to display the events using HST is very straight forward. You just need to define the sitemap item and
a component with template. And link them up together. In our case, http://myproject.com/events/${eventdoc} will map to the
myprojects/events/${eventdoc}. You can define the mapping using the HSTConfig Editor or the CMS console.
As shown below, The component for retrieving the events is pretty simple.

The template just iterates through the list of events and displays them. We can use
Google Static Maps API to render the a static map on the site.
Here’s the relevant JSP snippet for the component’s template:

As you can see this is pretty straightforward and simple. Now let us take a look at how we can publish the events in iCal Format

iCal/ICS format

For the iCal file we can provide a link on the events page users can click and add it to their calendar software.
In HST Sitemap you can define a new sitemap item with /events/_default_.ics and map it to the iCal component.
For generating the iCal file I used iCal4j library. Here’s the complete code of the component
that generates the iCal file.

The corresponding JSP template is just a simple one-liner, in which you specify the contentType to be text/calendar:

Whenever users visit the http://myproject.com/events/${eventdoc}.ics the browser will automatically open the application that is bound
to the mime type text/calendar.

Mobile (iPhone using jQTouch)

You can create a mobile version of the events and make it simple, but using jQTouch the iPhone users will see your site as an application rather than a plain website. jQTouch is a really simple to use iPhone web app library built on top of jQuery. You can sniff the user agent and detect the iPhone browser and render the appropriate content. You can either have a different URL with different component, or you can use the JSP to conditionally render appropriate content if the client is an iPhone. I show how you can use the latter approach. In the EventsPage Component, just add this line:

In the JSP Template you can check for the attribute and render the jQTouch. First in the header add the jQTouch library as follows:

And in the body use the display the events using jQTouch, Navigation bar, a table view etc.

That’s it, now whenever a user visits the same URL with an iPhone the user will get the jQTouch application type of interface instead of
a simple website. Of couse, you can extend and link to google maps application on the iPhone as well.

Augmented Reality Layer (Layar)

Layar is an Augmented Reality browser for iPhone and Android.
To publish the events via the Augmented Reality application Layar, first you need to get a developer account for Layar.
You can get the account for free by going to dev.layar.com.
For each layer you want to dislay in Layar AR browser, you need to provide a JSON feed of Points Of Interest via a publicly available URL.
The Layar application wll send a GET request along with several parameters, to the URL you provided.
In our application, we will create a new Sitemap item that will publish the Layar JSON data for the URL format
http://myproject.com/events/${eventname}.poi. You can use this URL in the Layar’s developer interface.

We can create a different component or reuse the existing the events page component that will get all the events. If you use the same component, the only thing you need to do is create a simple JSP page that will render the JSON. You can use json-taglib for rendering the data as JSON.
Here’s the JSP code that will render the data as JSON using json-taglib:

As explained, you’ll get different parameters from Layar request that you can use to process the data. For example, instead of returning all the events, you can just send only the events within the range. More information on these parameters is available in Layar’s documentation.

Conclusion

As you can see, for publishing the data in different formats to different channels, we have not modified anything in the CMS. Using single HST component and different templates, we were able to publish the data. The decoupling in the content management, content retrieval and content prsentation of the Hippo CMS and HST, helps a lot in creating multi channel publishing systems. You can extend it to any kind of channel like RSS Feeds or may be even create a Podcast of the pages using a Robotic Overlord!

If you have any questions or need more explanation don’t hesitate to ask us in our forums!