I built a simple yet very useful Alfresco navigator for iPhone. In nutshell, it is an iPhone-friendly web client. This navigator is backed by three webscripts ( one for DM space/doc navigation, one for WCM navigation and one for search) and leverages open source iUI package to provide looking-n-feel. The performance of the navigator is pretty good on iPhone (with its slow Edge network) since the script basically shows different branch of a single DOM tree based on where you are and when you navigate down to a new space or web project directory it will add the new nodes to the tree.

The navigator gives you following capabilities

• Navigate Spaces and Docs
• Display topics/posts attached to the docs.
• Preview Images, PDFs etc.
• Navigate Web Projects
• Preview Web Sites
• Search

To install the package on your Alfresco, simply follow following steps

• Unzip dist/iui.zip to {your tomcat directory}/webapps/alfresco/scripts
• Import dist/iphone-navigator.zip to your alfresco installation and put it under Data Dictionary/Web Scripts Extensions
• Refresh webscripts or restart Alfresco.
• Test the navigator

Or you can check out the flash.

Nowadays, if you are working in IT industry, it is really important to know something about web 2.0 or at least pretend to know something. The great thing about web 2.0 is that nobody can really give it a clean clear definition. Therefore, you can put the web 2.0 hat on anything and you won’t get into any trouble.

Anyway, Social Tagging has been a popular web 2.0 technology for a while and has been widely used by quite a few photo sharing web sites. In nutshell, a piece of content doesn’t really have a lot of information or value by itself. For example, you have a picture of a beautiful model dressing in bikini and posing on a sunny beach. Well, the picture looks great but for other users they have to see it to know what the picture is all about. It is apparent that we must provide ways to enrich the content with context information for things like content search, content categorization, content reuse etc. One traditional approach is to build taxonomy and associate it with content. That is more like top-down approach which means in most scenarios the content owner or administrator will provide the context information. For social tagging, it takes the bottom-up approach which means the context information will come from the content users. That is web 2.0 all about, collaboration. If we use the picture as example, we can have multiple people viewing it and all providing tags such as Beach, Beautiful Woman, Sunny and so on. The tag list can keep growing with more people viewing it and contributing the tags. And people can tag it with same tags which shows the voting and ranking of the picture. Now you can see the clear advantage of letting the users to provide context information.

So, this sounds like really cool stuff. Let us start a little project and build a simple social tagging system using Alfresco Web script.

Let us called it “Poor Man’s Social Tagging”.

The goal of the project is to build a system

1) Allow content users to contribute tags to pictures.

2) For each picture it provides statistical information such as total number of unique tags, total number of tags, most popular tag etc.

3) Show the tags in a fashion that user can easily see the differences of times it has been tagged.

4) Allow searching picture by tag.

5) Provide the list of most popular tags.

6) And we will do it in two hours.

Again, we will keep it simple. We will use following tools

1) Alfresco 2.1

2) Textpad

3) Firefox with firebug plug in.

And we will mount Alfresco repository as shared drive so that we can create web scripts within Alfresco directly.

First, we need to figure out the Data Models for our social tagging project. Alfresco provides very sophisticate and flexible modeling capabilities for modeling content meta-data. Here is the snippet of the model XML file.

<types>
<type name=”st:socialtag”>
<title>Social Tag</title>
<parent>cm:content</parent>
<properties>
<property name=”st:keyword”>
<type>d:text</type>
</property>
<property name=”st:count”>
<type>d:int</type>
</property>
</properties>
</type>
</types>

<aspects>
<!– Definition of Aspect –>
<aspect name=”st:socialtaggable”>
<title>Social Taggable</title>
<properties>
<property name=”st:mostpopularkeyword”>
<type>d:text</type>
</property>
<property name=”st:mostpopularkeywordcount”>
<type>d:int</type>
</property>
<property name=”st:totalnumberoftags”>
<type>d:int</type>
</property>
<property name=”st:totalnumberofcounts”>
<type>d:int</type>
</property>
</properties>
<associations>
<child-association name=”st:contains”>
<source>
<mandatory>false</mandatory>
<many>false</many>
</source>
<target>
<class>st:socialtag</class>
<mandatory>false</mandatory>
<many>true</many>
</target>
<duplicate>true</duplicate>
</child-association>
</associations>
</aspect>
</aspects>

From the above model XML file, you can see we will model Tag as Alfresco document with two additional properties, keyword for tag name and count for keeping the total number of the times the tag has been used. We also setup a new aspect, socialtaggable, which we will add it to all pictures. The new aspect not only includes the properties for statistical information but also has the child association which allows us to associate tags to the pictures. Keep in mind, that every time we add a new tag to a picture, we create a new copy of the tag. So we can maintain counters of tagging for individual pictures and all pictures separately.

Once the model is ready. We can copy the model XML file and its bootstrap XML file to Alfresco extension folder. In order to use Alfresco Web Client to test the new content type and new aspect, we also need to change the web client configuration file, web-client-config-custom.xml which is also under the Alfresco extension folder. Once they are in place, we restart Alfresco to pick up the changes.

For this project, we will create a “Social Tags” space under Company Home. We then create a subspace, “Tags”, which will be used to hold all tags, and another subspace, “Pictures”, which will be used to hold all pictures. Since it will be Social Tagging, all users will be allowed to create tags and modify pictures properties. We need to add “Guest” user as “Content Collaborator” for the space “Social Tags”.

With all the setup done, we now need to write our web scripts. For this project we will have three web scripts.

Picture List script In the front end, it provides a sortable list of pictures and dialogs for showing and adding tags. It will also provide link to the top tag list. In the back end, it will execute query to get the list of picture and for new picture, it will also add the socialtaggable aspect to it and filter the list with a particular tag if the search-by-tag parameter is provided. Here is the snippet of the back-end JavaScript

// Get the list of nodes from DM
var luceneSearchStr = “( PATH:\”/app:company_home/cm:Social_x0020_Tags/cm:Pictures/*\” ) AND ( TEXT:”+ q+”)”

var nodes = search.luceneSearch(luceneSearchStr);

for (var i=0; i<nodes.length; i++)
{
var node = nodes[i];

logger.log(”Node path is “+ node.path);

if (node.hasAspect(”st:socialtaggable”) == false)
{
node.addAspect(”st:socialtaggable”);
node.properties[”st:totalnumberofcounts”] = 0;
node.properties[”st:mostpopularkeywordcount”] = 0;
node.properties[”st:mostpopularkeyword”] = “”;
node.properties[”st:totalnumberoftags”] = 0;
node.save();
}
Tag Adding Script This script takes the tags from the Picture List scripts. If the tag doesn’t not exist, it will create a new one. Otherwise, it will update the counter of the existing tag. It will then associate the tag with the picture. If the association is already there, it will simply update the tag counter for the picture. Otherwise, it will create a new association. Here is the snippet of the back-end JavaScript

var tagsFolder = companyhome.childByNamePath(”Social Tags/Tags”);
// Get the list of tags
var tags = newtags.split(”;”);

for (var i=0; i< tags.length; i++)
{
var tag = tags[i];
var searchResults = companyhome.childByNamePath(”Social Tags/Tags/”+tag);
if ( searchResults != null) {
// If the tag exists, Get the tag
var existingtag = searchResults;
existingtag.properties[”st:count”]= existingtag.properties[”st:count”] + 1;
existingtag.save();
} else {
// Otherwise, create a new tag
if ( tagsFolder != null ) {
var newtag = tagsFolder.createNode(tag, “st:socialtag”);
newtag.properties.description=tag;
newtag.content=tag;
newtag.properties[”st:keyword”]=tag;
newtag.properties[”st:count”]=1;
newtag.save();
}
}
// If the tag has already been associated, simply increase the count.
// Otherwise, create a new child association
var childNodes = node.childAssocs[”st:contains”];
var foundtag = false;
if ( childNodes != null ) {
for (var j=0; j < childNodes.length && !foundtag; j++) {
var loopNode = childNodes[j];
if (loopNode.properties[”st:keyword”] == tag ) {
loopNode.properties[”st:count”]= loopNode.properties[”st:count”] + 1;
loopNode.save();
foundtag = true;
}
}
}
if ( !foundtag ) {
//If the association is not there, create a new one.

var child = node.createNode(tag, “st:socialtag”, “st:contains”);
child.properties.description=tag;
child.content=tag;
child.properties[”st:keyword”]=tag;
child.properties[”st:count”]=1;
child.save();
}
// Populates the stats
childNodes = node.childAssocs[”st:contains”];
node.properties[”st:totalnumberoftags”] = childNodes.length;
var count = 0 ;
var maxcount = node.properties[”st:mostpopularkeywordcount”];
var mostpopulartag = node.properties[”st:mostpopularkeyword”];
//Update the most populate tag

for (var k=0; k < childNodes.length ; k++) {
var currentNode = childNodes[k];
if (currentNode.properties[”st:count”] == 0) {
currentNode.properties[”st:count”] = 1;
currentNode.save();
}
if ( currentNode.properties[”st:count”] > maxcount) {
maxcount = currentNode.properties[”st:count”];
mostpopulartag = currentNode.properties[”st:keyword”];
}
count = count + currentNode.properties[”st:count”];
}
node.properties[”st:totalnumberofcounts”] = count;
node.properties[”st:mostpopularkeywordcount”] = maxcount;
node.properties[”st:mostpopularkeyword”] = mostpopulartag;
}

//Save the node

node.save();

Tag List Script. This script provides a sortable list of all existing tags.

For the overall UI, we will continue using the DoJo package shipped with Alfresco. We will mainly use the FilteringTable widget and Dialog widget.

Now let us register the three web scripts with Alfresco and hit the front page.

http://localhost:8080/alfresco/service/socialtag/document/list.html

One more thing, the authentication setting for all scripts are set as Guest. So you can just login as guest/guest to try out our Poor Man’s Social Tagging.

I think you gotta love Web Script since it makes so many things look so easy. For a relatively “superficial” developer like Dr. Q., it only takes him about two hours to build a not-so-shabby Social Tagging system.

So for better developers like you, you can definitely build much cooler stuff using Alfresco.

If you want to check out this little project, here is the zip file(Social Tagging).

Again, you need to

1) Setup the custom model (core\config\alfresco\extension).
2) Register three web scripts (webscripts\source\org\alfresco\demo\wslib\socialtag) and add the three dojo images(core\webapp\images\dojo) to tomcat\webapps\alfresco\images\dojo.

3) Setup three folders as described above and upload some pictures.

Here are some screen shots. Enjoy!

Alfresco does provide a very decent, clean user interface. We could add more buzz words for it, web2.0ish, Rich Ajax components, Google-style search, Yahoo-style browsing blah blah blah You name it we have it.

But the best thing I like it is that it allows multiple ways for customization and extension. You can easily replace existing icons, register your own icons, setting up new dialogs, menus, wizards etc. You can also create your own “dashlets” which can be used to configure user’s dashboard page.

However, I still got feedbacks like

“Writing a customization is too much”

“We really like Alfresco repository but your UI is too much for end users”

“We don’t have good Java developers and we don’t plan to hire one”

“We just need a simple one-page UI so the users won’t do any crazy stuff”

“CIFS is great for end-user but we still want some simple web interface”

Those feedbacks have been bugging me for very long until Alfresco 2.1 is out. I know now I can leverage the new futures to make those claims go away.

So when I woke up this morning, I decided to do a little project. I am going to use the latest web scripting feature of 2.1 to build a dead simple one-page UI for Alfresco. For the sake of acronym fetish, let us call it DSUFA.

The tools I am going to use

1) Alfresco 2.1

2) Textpad

3) Firefox (with Firebug plugin)

Since there is no bonus for doing this project, let me simplify the user case like this

We have a group of users who have very limited role and they are only allowed to list, create, delete, update and preview documents under a given folder, say Demo folder under Company Home. They will not use full-blown Alfresco UI, instead, we will use web scripts to write a simple one-page UI for them.

Web scripting is a very intriguing new feature in 2.1. It is not something mysterious or coming out from nowhere although we do invent a new buzzword. That is just the nature of the whole IT industry. Open source is no exception.

Alfresco has long history supporting Freemarker templates (Read/Transformation) and Javascript templates (Read/Write). Web scripting is just combination of the two types of scripts. Each web script consists of zero or one Javascript template for handling back-end operation, one or many Freemarker templates for front-end presentation, and one description XML for documentation and other relevant settings. It also comes with utility services such as listing , debugging etc. But the most important thing is that invoking a web script is done through REST interface a.k.a simple URL invocation. I think that would be something people will like most.

Ok. back to our DSUFA project, we first need to setup our development environment. We could setup an ant script and build an exchangeable AMP package. But let us make it simple. So just mount Alfresco repository as a share driver,say Z drive, and point Textpad to it.

By doing that, we will edit the templates and XML files directly, no uploading, no downloading. Another cool feature of web scripting is that it doesn’t require tomcat rebounce when we register new web scripts. We can just go to the service list page

http://localhost:8080/alfresco/service/index

and click the the refresh button. So no tomcat rebounce for the whole project.

Now let us open windows explorer and go to the folder Z:\Data Dictionary\Web Scripts Extensions and let us make up some package hierarchy, for example, org\alfresco\demo\wslib\simpleui and that will be the place we put our web scripts.

So how many web scripts do we need here? It is a simple question, since we need to provide list, create, edit and delete capabilities, we are going to create a web script for each capability.

To make the project look like a real one, let us draw a sequence diagram. The idea is that the List web script will be the entry point for the end user and it also provides links to the Save web script, New web script and Remove web script. For those three scripts, once the back-end operation is done, they will forward user back to the List script. Since web scripts supports REST interfaces, connecting web scripts is a very easy task.

So, let us work on our first web script, the List one. Following the naming convention, we create three files, DocumentList.get.desc.xml (XML Description File), DocumentList.get.html.ftl (Freemarker Template) and DocumentList.get.js (Javascript Template) .

First the description xml file

<webscript>
<shortname>Alfresco Simple UI - Item Listing</shortname>
<description>Execute search for getting a list of items</description>
<url format=”html” template=”/simpleui/document/list.html?q={searchTerms}”/>
<format default=”html”>extension</format>
<authentication>guest</authentication>
<transaction>required</transaction>
</webscript>

and the back-end Javascript template

//Get the search parameter. If null, set it as wildcard

var q = (args.q == null) ? “***” : args.q;

// Build lucene search query string and run the search
var nodes = search.luceneSearch(”( PATH:\”/app:company_home/cm:Demo//*\” ) AND ( TEXT:”+ q+”)”);

//Set the search return and it will be available for the Freemarker template
model.resultset = nodes;

Look simple? You can see we define the REST interface within the XML file and use Alfresco search API to get the list of documents. So three lines of code is all we need here.

Once we retrieve the search results, we are ready to display the results through our Freemarker template.

<table>
<thead>
<tr> <th>Name</th><th>Created</th><th>Modified</th><th>Description</th><th>Body</th>
</tr>
</thead>
<tbody>
<#list resultset as node>
<tr>
<td>${node.name}</td>
<td>${node.properties.created?datetime}</td>
<td>${node.properties.modified?datetime}</td>
<td>${node.properties.description}</td>
<td>${node.content}</td>
</tr>
</#list>
</tbody>
</table>

This is nothing but using some freemaker tags to loop through the search results and display them as a table. Now we are ready to test our first web script. Go to the service list page and do a refresh. You will see the new script is registered. And we can testing our script by hit the following link

http://localhost:8080/alfresco/service/simpleui/document/list.html

If we have created the Demo folder and put some documents over there, we will get a list of documents. Now let us move on to create three other scripts. Remember, according to our design, the freemark templates for those three do nothing but forwarding back to the List page. So they can be as simple as

<META
HTTP-EQUIV=”Refresh”
CONTENT=”1; URL=${url.serviceContext}/simpleui/document/list.html”>

Once we get three other web scripts ready, let us go back to the Freemaker template for the List web script. We still need to build the links from List page to other scripts. Remember Freemarker template does nothing but printing out text. So we are free to put any Javascript or HTML in it.

A link from List page to the Remove web script can be as simple as

<form name=”remove_form” action=”${url.serviceContext}/simpleui/document/remove” method=”post”>
<table>
<tbody>
<tr>
<th><b>Remove File </b><INPUT type=”text” id=”remove_name” name=”name” value=”" disabled/></th>
</tr>
<tr>
<td>Do you really really really want to delete this file?</td>
</tr>
<tr>
<td align=”center”>
<INPUT type=”hidden” id=”remove_noderef” name=”noderef” value=”"/>
<INPUT type=”hidden” id=”remove_name” name=”name” value=”"/>
<input type=”submit” value=”Ok”/>
<input type=”button” id=”hide3″ value=”Cancel” onClick=”removedlg.hide()”></td></td>
</tr>
</tbody>
</table>
</form>
This is just a plain old HTML form which points to the url for the Remove web script. Now, you see, REST interface makes everything really really easy.

We are almost done. Let us have some fun here. To make the UI sexy, we can use the DoJo package shipped with Alfresco 2.1. For this little project, I will use the “FilteringTable” widget for document listing and the “Dialog” widget for the Edit/New/Remove dialogs.

After some Javascript/css/dhtml programming, (googling, copy-n-pasting), we finally got the UI done. It is a dead simple Web2.0ish one-page UI for Alfresco. It allows a user to create/edit/list/preview and remove documents under the given folder.

No java programming is needed here. It took me about 2 hours to finish the project. And I bet for better developers like you, it might take even less time.
If you want to try this example, you can download the zip file (Script Package dsufa.zip). Unzip the org folder to your Data Dictionary\Web Scripts Extensions space. Unzip the dojo folder to the folder tomcat\webapps\alfresco\images under your alfresco installation. Then go to the service list page to register all new scripts and create a “Demo” space under Company Home.

You are now ready to try this dead simple UI.

Don’t you have enough of reality shows. We have seen shows about singing, dancing, cooking, surviving, losing weights, showing bizarre talents and so on and so on. We have see shows about one man and a bunch of women, one woman and a bunch of men, one men and a bunch of young women and a bunch of old women.

I bet the entertainment world is gradually running out ideas.

Here is a brand new idea.

It is a good time to do a show about developers, yes, the IT developers.

We sure need to find bunch of people with different background.

Diversity is important here.

So we will have man, woman, white, yellow, black, asian, latino, young, old blah blah blah…

They are all required to wear a T-shirt with his or her slogan on it.

We should have a google developer

“I am having free dinner every day and I am going to buy your company anyway.”

a Microsoft developer

“Most stable, reliable secure stuff but please reboot for updates.”

a Unix developer

“Nothing can’t be done from command lines.”

a Yahoo developer

“We used to have free dinner.”

a Mac developer

“I am cool. Can I put an i in front of you?”

a Java developer

“We used to be cool.”

a Script developer

“One click and you get everything.”

a poor guy from China or India

“I am smart and I am cheap before I get my green card.”

And finally a little fearless open source warrior

“Everything open and free!!!!”

Technorati Tags: Personal, thoughts

Powered by ScribeFire.

I have been traveling to NYC over the last two weeks to help a consulting firm to build a web site for little kids. Yeah…They use Alfresco. It has been fun so far to be able to see how people actually use Alfresco in the real project.

Having been working at home for the last eight months, I feel quite excited to be back to the cubical world. Or..maybe just for a few days. Plus, instead of messing up with sales people, now I have chances to work with developers and project managers. Well…they are quite different. They take me to all wonderful sandwich shops around their office for lunch. Last Thursday night, they even took me to a nice restaurant for dinner. It is actually a chocolate bar. The food is nice and the hot chocolate is real…hot melted chocolate.

Now back to “Alfresco on Train”. I have been taking trains back and force between Boston and New York City. Taking train is much better experience than going through Logan and JFC which might be among the worst airports in the world.

It is about 3 and half hours ride. The train is clean and spacious. Generally, I would take a nap, listen to music and sometimes talk to strangers. But now I have put “Start to write blog” as my quarterly MBO. I figure I really need to find something to write so that I could meet my MBO and Matt would pay me all bonus and I could buy more toys for my daughter.

So it is important now. After searching through my soul, I do have all a lot to say about Alfresco, Open Source, IT and life in general. But I guess to keep it interesting, I need to write about something I am familiar with…Yeah…the Alfresco product.

One of my favorite TV show is “Top Chef” even I only watched one episode so far. The competition they had was to cook a dish in two hours using selected meats. Maybe I can do the similar thing, I can start my own little “Alfresco on Train” project on the train.

I will use the three and a half hour on the train and use the latest version of Alfresco plus some other open source software to build a “dish”.

Then what I am going to build? It must be something interesting, unique, useless and can keep my blog going for a while.

I then had an idea of the game of Sudoku. I have been playing that puzzle game for a while and I really like it.

Ok…Let’s get started.

A good joke about Hello world!

http://www.gnu.org/fun/jokes/helloworld.html