Introduction

Categorizing and presenting large volumes of documents is a big challenge. Content can be organized by a combination of three different models — Using Hierarchies (organized into folders), Using Categories (attaching taxonomy category to a document) or by Using Tags. These three organization models can serve as navigational models for the content as well.

When the content size grows larger these models hinder the accessibility of the content. This also affects the discoverability of the content, of course searching is an option but search itself cannot be considered as navigation since the users needs to be aware of what properties the content has and how to specify the criteria. Faceted Navigation solves this problem by providing a way to access the in series of refining queries. The users can drill down and access the content the way they want. Hippo CMS, along with HST provides excellent support for creating a faceted navigation of your content. In this article I’ll try to explain how you can build your own faceted navigation in your website using Hippo CMS and Hippo Site Toolkit.

Faceted Navigation

Faceted Navigation allows the user to navigate through the content by a series of refined queries on the metadata. The main benefit of having a faceted navigation than a rigid hierarchical navigation is that the user navigate the content in multiple paths, thus saving the time for reaching the content.

The Colon Classification was the first faceted classification implementation, which was developed by a noted Indian mathematician and librarian S.R.Ranganathan. Ranganathan was also famous for his Five Laws of Library Science:

1. Books are for use.
2. Every reader his [or her] book.
3. Every book its reader.
4. Save the time of the reader.
5. The library is a growing organism.

which I think can be applied not only to books but for any knowledge entities.

Faceted Navigation in Hippo Repository is built on top of document node’s properties. As you might already know Hippo CMS is a JCR (Java Content Repository) based. Each node( or document) will have various properties (or fields) in which the data is saved. To design effective faceted navigation you may want to make sure that you don’t have any implicit metadata in the structure of the content. Suppose that you have a blog with posts that belong to various categories. You should put the category name as a field in the document rather than organizing the posts into a category folder hierarchy.

Configuring Faceted Navigation in Repository

Before we delve into creating faceted navigtion, let me explain the example scenario we are going to use for this article.

Imagine you are building a website for an online game shop which sells games for computers and digital gaming consoles likee XBOX, Wii, Play Station. The repository contains documents which represent a game. The node type definition for the product is shown below:

[myshop:games] > myshop:basedocument
- myshop:title       (string)
+ myshop:description (hippostd:html)
- myshop:date        (string)
- myshop:price       (double)
- myshop:tags        (string) multiple
- myshop:genres      (string) multiple < 'Action', 'Adventure', 'Aracade', 'Board'
- myshop:consoles    (string) multiple< 'XBOX 360', 'Wii', 'Play Station', 'PC', 'Mac'

In the following I used the default content of the Hippo CMS, so the namespace of the nodes will be defaultcontent rather than myshop. In your case, it will the name you use for your project


You can create the document using the CMS template builder. For the sake of simplicity I defined the genres as a multivalued property. You can of course use some advanced way of classifying the content, e.g., using Hippo Taxonomy plugin, to categorize it properly.The properties (or fields) of the game document are self-descriptive. All the game documents are saved under the folder /content/documents/myshop/games.

Before creating any facet navigation nodes, make sure you have some content. Create a few documents in a folder called games with different values so that we can test our facets.

Simple Faceted Navigation

Let us start by a simple use case of building a faceted navigation for the games by consoles. You can configure the faceted navigation node in the repository by creating a node of the type hippofacnav:facetnavigation. The facetnavigation nodes can be created anywhere in the content tree, but the ideal place for them would be under the content/documents/{your_project}. In this way you can access the entire faceted navigation tree using the HST and display them in your website.

First open the CMS console and navigate to /content/documents/{your_project} node. Create a new node of the type hippofacnav:facetnavigation and name it games_by_console. We want to display the list of game documents under the games folder. Take a note of the UUID of the games folder. Add a new string property with name hippo:docbase and give the UUID of the games folder as the value for the property. Now add a multi-values string property with name hippofacnav:facets. Facet is the property based on which we want to provide a dimension to the facet navigation. Since we want to have a list of documents based on consoles, add the value for the facets property as {project_namespace}:consoles. In my example the property name is defaultcontent:consoles. On reloading the tree your facetnavigation node should show the results as shown below:

Facets with Ranges

Specifying the range for a facet value is very easy. Let us create a navigation based on price range. First create a new hippofacnav:facetnavigation and name it games_by_price_range. Add the hippo:docbase property similar to the previous example and specify the hippofacnav:facets property with value defaultcontent:price. Alternatively, you can just copy the games-by-consoles node and rename it accordingly. When you refresh the node it will have the result of the facet already populated as shown below:

You can specify a range of the facet/property value using JSON notation. Each of the range specifier will be similar to an object in JSON and they are wrapped into an array. To create a price range facet, replace the defaultcontent:price with

defaultcontent:price$[{name:'less 20.00', resolution:'double', end:20.00}]

Also to make the tree more readable add the hippofacnav:facetnodenames with value price. Now if you reload the tree you can see the documents that have the price range as specified.

You can add more ranges as shown below:

           defaultcontent:price$[
                {name:'less 20.00', resolution:'double', end:20.00},
                {name: '20.00 - 30.00', resolution:'double', begin:20.00, end:30.00}, 
                {name:'more than 30.00', resolution:'double', begin:30.00}
            ]

The resolution can be one of 'long', 'double', 'year', 'month', 'week', 'day', 'hour' or 'string'. The begin of the range is inclusive and the end is exclusive. So when you specify begin:1,end:5 for a facet it is equivalent to [1,5). More information about the ranges is available on the Hippo Wiki.

Guided Navigation and Multiple Facets

When you add multiple facets to a node, the resulting documents will show all the facets again. When you want to display the same navigational nodes in the website then this can be quite annoying for the user. To eliminate this problem you can configure the facets to be hidden and specify the order in which they are visible.

First modify the games-by-console by adding another facet value defaultcontent:genres. Now if you reload the tree below you'll find that under each value of console the facet consoles is repeated again. Now just replace the facetnodename value of the consoles by ${hide:'consoles'} you can hide the genres using similar approach. After the hide property is added, the nodes will look like this:

Using the same approach you can hide and show the different facets essentially creating a guided navigation for the user.

Sorting and limiting the facet results

To sort the result set of a facet you can use the sortby and sortorder for a facetnodename. To sort the game documents displayed under price range by increasing order of prices you can use the following code:

        price${sortby:'facetvalue', sortorder:'descending'}

The limit can be specified by using count as the sortby and setting limit to the desired value.

        price${sortby:'count', limit:2}

If you specify the limit the result set will still show the complete result, but the facet node's child node will only show 2 result nodes.

There are many more options you can specify in Faceted Navigation nodes, check the Wiki Page for more information.

Faceted Navigation in Website

So far we created the navagation completely in the repository. From the website perspective the facet result nodes are just regular mirror nodes. So you can fetch the data and display the nodes accordingly in your website. Another important thing to note is that the faceted navigation nodes respect the live and preview mode. So you don't need to worry about whether unpublished documents being visible in the live website. HST also provides a utility tag facetnavigationlink that can generate a link to a Tag.

To see the Facet Navigation in action, you can always checkout the Demo Suite from HST Subversion repository. Also you can see the facet navigation in @jashaj's blog posts page.

Of course, you are always welcome to ask questions on our mailing lists or send us feedback via feedback forum. Stay tuned for more In-depth articles about Hippo product suite.

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:

[myproject:event] > nt:base
- myproject:title (string)
- myproject:date (date)
+ myproject:location (myproject:location)
+ myproject:description (hippostd:html)
+ myproject:image  (hippogallerypicker:imagelink)

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.

[myproject:location] > nt:base
- myproject:longitude (double)
- myproject:latitude (double)

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:

[myproject:eventspage] > myproject:basedocument
- myproject:title (string)
+ myproject:events (myproject:event) multiple

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.

import com.onehippo.beans.EventsPageBean;
import org.hippoecm.hst.component.support.bean.BaseHstComponent;
import org.hippoecm.hst.core.component.HstComponentException;
import org.hippoecm.hst.core.component.HstRequest;
import org.hippoecm.hst.core.component.HstResponse;
 
public class EventsPage extends BaseHstComponent {
    @Override
    public void doBeforeRender(HstRequest request, HstResponse response)
                       throws HstComponentException {
        EventsPageBean eventsPageBean = (EventsPageBean) getContentBean(request);
        request.setAttribute("doc", eventsPageBean);
    }
}

The template just iterates through the list fo 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:

    <ul style="list-style: none;">
        <li>
          <ul style="list-style: none;">
                    <li>
                        <div class="eventWrapper">
                            <span class="eventTitle">${event.title}</span>, <img style="padding: 5px; margin-left: 5px;" src="http://maps.google.com/maps/api/staticmap?&amp;zoom=10&amp;size=150x150&amp;maptype=roadmap&amp;markers=color:green|${event.location.latitude},${event.location.longitude}&amp;sensor=true" alt="" align="right"> <img style="padding: 5px; margin-right: 5px;" src="${imageLink}" alt="" width="200" align="left"> ${event.description}
                        </div>
                    </li>
                </ul>
            </li>
        </ul>

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.

import java.net.SocketException;
import java.util.List;
import com.onehippo.beans.Event;
import com.onehippo.beans.EventsPageBean;
import net.fortuna.ical4j.model.Calendar;
import net.fortuna.ical4j.model.DateTime;
import net.fortuna.ical4j.model.component.VEvent;
import net.fortuna.ical4j.model.property.CalScale;
import net.fortuna.ical4j.model.property.ProdId;
import net.fortuna.ical4j.model.property.Uid;
import net.fortuna.ical4j.model.property.Version;
import net.fortuna.ical4j.util.UidGenerator;
import org.hippoecm.hst.component.support.bean.BaseHstComponent;
import org.hippoecm.hst.core.component.HstComponentException;
import org.hippoecm.hst.core.component.HstRequest;
import org.hippoecm.hst.core.component.HstResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
 
public class EventsPageICS extends BaseHstComponent {
 
    private static final Logger LOGGER = LoggerFactory.getLogger(EventsPageICS.class);
 
    @Override
    public void doBeforeRender(HstRequest request, HstResponse response)
                       throws HstComponentException {
 
        try {
            Calendar calendar = new Calendar();
            calendar.getProperties().add(new ProdId("-//Ben Fortuna//iCal4j 1.0//EN"));
            calendar.getProperties().add(Version.VERSION_2_0);
            calendar.getProperties().add(CalScale.GREGORIAN);
 
            EventsPageBean eventsPage = (EventsPageBean) getContentBean(request);
            List events = eventsPage.getEvents();
 
            for (Event event : events) {
                DateTime start = new DateTime(event.getDate().getTime());
                VEvent calendarEvent = new VEvent(start, event.getTitle());
                UidGenerator ug = new UidGenerator("uidGen");
                Uid uid = ug.generateUid();
                calendarEvent.getProperties().add(uid);
                calendar.getComponents().add(calendarEvent);
            }
            request.setAttribute("calendar", calendar);
        } catch (SocketException e) {
            LOGGER.error(e.getMessage());
 
        }
    }
}

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

            <%@ page contentType="text/calendar; charset=utf-8" %>${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:

request.setAttribute("iphone", request.getHeader("User-Agent").contains("iPhone"));

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

    <c:if test="${iphone}">
           <script type="text/javascript" charset="utf-8" src="<hst:link path='/jqtouch/jquery.1.3.2.min.js'/>"/>
           <script type="text/javascript" charset="utf-8" src="<hst:link path='/jqtouch/jqtouch.js'/>"/>
           <link rel="stylesheet" href="<hst:link path='/jqtouch/jqtouch.css'/>" type="text/css" media="screen"
                 charset="UTF-8"/>
           <link rel="stylesheet" href="<hst:link path='/themes/apple/theme.css'/>" type="text/css" media="screen"
                 charset="UTF-8"/>
           <script type="text/javascript">
               $.jQTouch({
                   statusBar: 'black'
               });
           </script>
       </c:if>

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

    <c:if test="${iphone}">
        <div id="about">
            <div class="toolbar">
                <h1>About</h1>
                <a class="button flip done" href="#events">Done</a>
            </div>
            <ul>
                <li>
                    Hippo CMS & HST Based Website - Optimized for iPhone&trade;
                </li>
            </ul>
        </div>
        <div id="events" class="current">
            <div class="toolbar">
                <h1>${doc.title}</h1>
                <a class="button flip" href="#about">About</a>
            </div>
            <ul>
                <c:forEach items="${doc.events}" var="event" varStatus="st">
                    <li class="arrow"><a href="#event-${st.index}">${event.title}</a></li>
                </c:forEach>
            </ul>
        </div>
        <c:forEach items="${doc.events}" var="event" varStatus="st">
        <div id="event-${st.index}">
            <div class="toolbar">
                <h1>${event.title}</h1>
                <a class="button back" href="#events">Events</a>
            </div>
            <h2>Title</h2>
            <ul>
                <li style="font-size:0.9em;">${event.title}</li>
            </ul>
            <h2>Description</h2>
            <ul>
                <li style="font-size:0.7em;">${event.description}</li>
            </ul>
            <h2>Date & Time</h2>
            <ul>
                <li style="font-size:0.7em"><fmt:formatDate value="${event.date.time}" pattern="dd MMM yyyy HH:mm"/></li>
            </ul>
            <h2>Image</h2>
            <ul>
                <li>
                    <img src="<hst:link hippobean='${event.image.picture}'/>" width="280"/>
                </li>
            </ul>
            <h2>Location</h2>
            <ul>
                <li>
                    <a target="_blank"
                       href="http://maps.google.com/?ll=${event.location.latitude},${event.location.longitude}">
                        <img src="http://maps.google.com/maps/api/staticmap?&zoom=10&size=280x280&maptype=roadmap&markers=color:green|${event.location.latitude},${event.location.longitude}&sensor=true"/>
                    </a>
                </li>
            </ul>
        </div>
        </c:forEach>
        </c:if>

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:

    <%@ page contentType="application/json; charset=utf-8" %>
    <%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <%@ taglib prefix="hst" uri="http://www.hippoecm.org/jsp/hst/core" %>
 
    <json:object>
        <json:array name="hotspots" items="${doc.events}" var="event">
            <json:object>
                <json:property name="title" value="${event.title}"/>
                <json:property name="distance" value="100"/>
                <json:property name="attribution" value="attribution"/>
                <json:property name="lat" value="${event.location.latitudeInt}" />
                <json:property name="lon" value="${event.location.longitudeInt}" />
                <hst:link hippobean='${event.image.thumbnail}' var="imgPath" />
                <json:property name="imageURL" value="http://myproject.com/${imgPath}"/>
                <json:property name="line2">
                    <fmt:formatDate value="${event.date.time}" pattern="dd-MMM-yyyy HH:mm"/>                
                </json:property>
                <json:property name="line3" value=""/>
                <json:property name="line4" value=""/>
                <json:property name="type" value="0"/>
                <json:property name="id" value="${event}"/>
                <json:array name="actions"/>
            </json:object>
        </json:array>
        <json:property name="layer" value="${doc.name}" />      
        <json:property name="errorString" value="ok" />
        <json:property name="errorCode" value="${0}" />
        <json:property name="morePages" value="${false}"/>
        <json:property name="nextPageKey" value="${null}" />
    </json:object>

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!

The current status is that the WebDAV addon has default support for the Hippo assets folder. This was actually quite easy to develop. This can also be used to copy all assets from a CMS 6 instance directly into a running CMS 7 instance. All other folders are not WebDAV enabled yet, but I have some plans for the other folders in the future.

via Giving Hippo CMS 7 some WebDAV support By Jeroen Reijn.

Grid View

List View

The Grid View is implemented using simple css and ul tags. Here’s an example of the HTML/CSS that is used to convert a ul with images into a Grid:

<ul class="gallery-list">
    <li class="gallery-item">
        <img src="image.png"/>
     </li>
     <li class="gallery-item">
         <img src="image2.png"/>
      </li>
</ul>

ul.gallery-list {
   display: block;
   overflow: auto;
}
 
ul.gallery-list li {
    list-style: none outside;
    float: left;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100px;
    height: 100px;
    text-align: center;
}
 
ul.gallery-list li img {
    vertical-align: middle;
    padding: 5px;
    border: 1px solid #eee;
    width: 60px;
    height: 60px;
}

There are some nice image management features planned for Hippo CMS, so stay tuned for the updates.

I’ll provide the details on how to configure and create the Easy Forms in a following post, though it is very simple to use!

The Related Documents plugin for Hippo CMS allows the editors of the documents to select “related” documents of the current document. The plugin provides automatic suggestions using Similarity Search and Referring documents. Also, the document editors/authors can hand-pick the related documents.

The plugin is now updated for CMS 7.3(released last week). You can get the plugin from the Hippo Forge, the demo project is also now updated to 7.3. If you are already using the plugin, then there are no changes required in the plugin configuration to make it work with 7.3. Just update the plugin version in your pom.xml to 2.05.00 and you’ll be good to go.

Currenlty the project is in pre-alpha, and during the next couple of weekends I’ll try to add more features – most , if not all – buttons in the UI do nothing at the moment. But the application in its current state can connect to the repository and display the node tree, and node properties (in a tab) when clicked.

Stay tuned for updates, or if you want to help, just join the project at Forge. Though the project is still in cowboy-coding phase, contributions are welcome, as always.

To see it action, check out the code and run mvn jetty:run. Make sure that your Hippo CMS/Repository is running on localhost.

The competition was along the lines of F1 racing with one training lap, 3 Qualifier rounds. And the top 5 drivers from the qualifiers went on to compete in the grand finale. And  the winners of the evening were Tjeerd, Stefan and Kenan.

After the karting, the Golden Hippo award was announced – Starting this quarter, every quarter the one of the member of the professional services will be chosen by popular vote ( by peers and Hippo partners) and will be awarded with the Golden Hippo. That’s not all, at the end of the year, the team is also planning to give out yearly “Platinum Hippo Award” – for the best team member voted similarly. The awards also come with nice little bonus as well.

And the first Golden Hippo winner for Q1 this year is Marijan Milicevic, he got the most number of votes for Q1. Marijan has also contributed to several projects on Hippo Forge  - Import Tool, Simple Validation Framework and Easy Forms HST Component etc.

The Hippo CMS  team has big plans for 2010. Early in the year they intend to launch a new web 2.0 platform. This open source product is aimed at the enterprise, to ensure “improved communication, collaboration and knowledge retention while lowering the burden on IT resources.”

Features include an integrated approach to user-generated content, an “enterprise mash-up” functionality that focuses on matching content and applications with the needs of individual employees. Each user will get a personalized window to “content and applications inside and (cl)outside the organization, while IT keeps (or regains?) central control over security & access rights.”

Instead of aiming to reinvent popular applications such as Gmail, Zoho, Twitter and Evernote, this new product aims to let companies integrate such tools within their enterprise security umbrella.

via Alert: What’s Coming In Open Source CMS In 2010.