Alfresco Labs Sample Dashlets

Tuesday, October 14, 2008

Alfresco 3 And Surf

Like many others in the Enterprise Content Management community, I am looking forward to the upcoming release of Alfresco 3.  One of the key components of this release is the Alfresco Surf platform.  If you are unfamiliar with Surf, Shane Johnson wrote an excellent post which provides an overview and analysis of the platform.

In September, Alfresco made the Labs 3b release available for download. This allows us to examine Surf and the Share collaboration application built on Surf.  I recently spent some time building surf components that can be plugged into standalone applications as well as share.  Small dashboard widgets called dashlets can be created for share via Alfresco webscripts.

I thought it might be helpful to others to write a post about how I went about creating these dashlets.  Additionally, others may find a use for these components inside their own share instance, or surf powered application.

A Flashy Dashlet

In almost every web content management project I have been involved in, there has been a requirement to build a web component which renders a flash asset from various repositories,  so I thought this may be a useful component to try with surf and the Alfresco repository.  So here is what I did.

First, I setup the labs3b release of Alfresco locally.  This is pretty much all the software required to build this dashlet.  So let’s talk about the files needed to create the component.  If you are already familiar with webscipts, this will be very straightforward.  All of these files reside in /path/to/alfresco/tomcat/webapps/share/WEB-INF/classes/alfresco/site-webscripts From there I just put them in an examples subdirectory.

First, there is the component description, flash.get.desc.xml.  We make the usual webscript definition here.  One thing to note, is the element needed to define this component as a dashlet,


Next, we have flash.get.head.ftl  This is free marker code that allows us to push component specific meta-data to a page’s head element.  For this example, I just add the following to this file.

<script type=”text/javascript” src=””</script>

I’m a big fan of the swfobject library for the obvious flexibility, cross browser support and graceful degradation reasons.

Finally, we have the free marker template that will generate the html snippet.  flash.get.html.ftl.  Here, I just create a div to hold the swf content, and then a call to swfobject.  That looks something like this.

<script type=”text/javascript”>
swfobject.embedSWF(”http://localhost:8080/alfresco/d/d/workspace/SpacesStore/35fdea34-9e44-4614-b918-a2490830e5da/sample.swf”, “swfcontent”, “415″, “300″, “9.0.0″);

That url points to an asset in the Alfresco repository, which I added via the alfresco web client.  In a real wcm setting, there would be in context editing that would allow a business user or designer to specify the location of the asset, rather than hardcoding it.  If that were the case, I would use flash.get.js to retrieve that value from the content store.

After a refresh of share’s webscripts, we are ready to add the flashlet to our dashboard.

A More Useful and Interesting Example

The example above was simple and conceptually useful.  However, it is probably more useful in an actual site, rather than as a dashlet in share.  Of course, I easily adapted the webscript out of the share dashlet context and into a generic component used in a surf enabled app.  However, I still wanted to create an example that would accomplish two things:

  1. Demonstrate the platform’s ability to render data from a call to an existing RESTful service
  2. Provide functionality that would be useful to a real organization’s share instance.

Suppose your organization has a you tube channel which delivers product update videos, or perhap’s training videos.  For example, GMShowroom or alfresco101.  Wouldn’t it be useful to have a dashlet that embeds the channel’s latest video right onto your share dashboard?  Here’s how.

For the most part, everything works the same as the example above.  I created the dashlet webscript definition and added the swfobject code to my webscript’s head.ftl file.  I created youtube-channel.get.js, which uses google’s you tube api to retrieve the appropriate data.

That code looks like this.

var connector = remote.connect(”http”);
var feed =””);

// parse the feed and set namespace
feed = new String(feed);
var i = feed.indexOf(”<feed”);
if(i > -1)
feed = feed.substring(i);

var xml = new XML(feed); var entry = xml.*::entry;

var videoUrl = entry.*::id.toString();
model.videoid = videoUrl.substring(videoUrl.lastIndexOf(’/'),videoUrl.length)
model.title = entry.*::title.toString();

Surf will make the model object available to us in the free marker template, youtube-channel.get.html.ftl. So all that is left to do is make the swfobject call with the appropriate url.  Check out the results.


In an upcoming post, I plan to talk about how I created my own Surf application, and used these components within that app.

comments powered by Disqus

John Kraus

John has designed and developed software for more than eight years.  He is experienced leading and managing software projects and has a diverse technology background specializing in...

Recent Posts

Blog Archive