Dr. Q's Workshop

Alfresco Share is the new social computing application of Alfresco 3.0. It is built upon Surf Framework, a light-weight, component-based, REST-oriented web application framework which allows extension through scripting and templating.

In this KB, we will go through the basic steps to create a new Hello World dashlet and then deploy and test it on Alfresco Share.

Just like developing any other webscript, let us first create a new XML file, name it as helloworld.get.desc.xml and add following lines

<webscript>
   <shortname>Hello World</shortname>
   <description>Hello World Dashlet</description>
   <family>user-dashlet</family>
   <url>/components/dashlets/hello-world</url>
</webscript>

It provides basic configuration information about the dashlet such as name, description and url for the service endpoint. The key element of this configuration file is the family setting which has to be user-dashlet in order for Alfresco share to recognize it as a dashlet and make it available for end user to select when they customize their share dashboards.

Since this is a simple Hello World dashlet, we really don’t need the javascript component or we can just create an empty javascript file with the name helloworld.get.js.

Now let us work on the presentation part of this dashlet, a freemarker template with the name helloworld.get.html.ftl.

<div class="dashlet">
<div class="title">Hello World</div>
<div class="body">
<span>Hello World</span>
</div>
</div>

As we can see, it prints out the “Hello Word” text as the dashlet body as well as a “Hello World” title.

To make a step further, we can also create a message properties file and reference the messages inside the freemarker template. So let us create a properties file helloworld.get.properties and put the following entry in it

hello.world = Hello World

Once the properties file is ready, we can reference the hello world message using API ${msg(”hello.world”)} in the freemarker template file.

<div class="dashlet">
<div class="title">${msg("hello.world")}</div>
<div class="body scrollableList">
<span>${msg("hello.world")}</span>
</div>
</div>

Now with all the files ready, we can deploy them to Alfresco Share. Since Alfresco Share will look for its webapp classpath for the scripts, we can create a new folder demo under the share\WEB-INF\classes\alfresco folder and place all our files over there.

To make Alfresco Share to load the new dashlet, we need to go to Share webscript management page, e.g. http://localhost:8080/share/service/.

Click the “Refresh Web Scripts” button at the bottom of the page and if you see the number of total webscript incremented by one, the dashlet has been deployed successfully.

Log on to Alfresco Share and click “Customize Dashboard” button and you will see the “Hello World” dashlet is there and is available to be added to your dashboard.

You can also download the source codes from here.

Post a Comment