This will be my first post about something technical. All technical blogs will be written in english.
For my first technical blog I shall give an example on how to use CMIS to build an image gallery. For a customer we have implemented Xopus. Using Xopus the editor can use a button to add an image to the XML-document. The image can be selected from a folder filled with images which is why we need CMIS to gather these images and show them in an understandable way to the editor.
All the images are uploaded in a space called “Images”. This space was added in the Company Home space.
The image gallery will be called like a html page. Therefor we shall build a webscript. First we create a descriptor file. Name the file image-gallery.desc.xml and add the following content:
<webscript>
<shortname>Image gallery</shortname>
<description>Creates an image gallery based on the files in a specified folder</description>
<url>/imagegallery/image</url>
</webscript>
Now we must gather the data needed for the image gallery. We will do this using CMIS. The first thing we need is the noderef of the folder Images. First click on the details button for the “Images” folder in Company Home.
After that, rightclick the Alfresco Node Reference link and save the link location.
Save this link in your editor of choice. We will use this noderef to get the images. Our next step is to get the images from the folder. We will do this using a CMIS query. Create a file called image-gallery.get.js and add the following code:
var selectString = "SELECT d.*, rn.* FROM cmis:document AS d " +
"JOIN rn:renditioned AS rn on d.cmis:objectId = rn.cmis:objectId " +
"WHERE in_tree(d, 'workspace://SpacesStore/cfdb89df-622b-46c5-b95a-e183f9b885bd')" +
"ORDER BY d.cmis:name"
var cmisQuery = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\" ?><cmis:query xmlns:cmis=\"http://docs.oasis-open.org/ns/cmis/core/200908/\"><cmis:statement>" + selectString + "</cmis:statement><cmis:renditionFilter>cmis:thumbnail</cmis:renditionFilter></cmis:query>";
// get the documents for the currently active site
var conn = remote.connect("alfresco");
var result = conn.post(stringUtils.urlEncodeComponent("/cmis/queries?renditionFilter=cmis:thumbnail"), cmisQuery, "application/cmisquery+xml");
model.doc = stringUtils.parseXMLNodeModel(result.getText());
You can see the node reference within the selectString, change this to the reference you have just saved.
Both remote and model variables are supplied by Alfresco. The remote object is used to obtain connections to endpoints that are defined for Alfresco, more information is found in the link. The model object are used to use data in your presentation. By adding objects to the model they can then be read in the presentation where you can use them to show the data to the viewer. In our example we fill the variable doc in the model.
The CMIS query also has some specifics. Alfresco has an built-in method to create thumbnails of images. Ofcourse we want to use that to increase our performance. Therefor we add something to the CMIS query:
<cmis:renditionFilter>cmis:thumbnail</cmis:renditionFilter>
You can see in the query that we joined the cmis:document table with the rn:renditioned table. The renditioned table has a lot more renditions of the content that we need, however we only need the thumbnails. By addind the filter we will only retrieve the thumbnails. There are more filters like this one, more info can be found here.
Our final step in creating the files needed for the webscript involves creating a presentation template for our data. Create a file named image-gallery.get.html.ftl. The following is a snippet of the code, the rest is the standard content for a html page (html, head, body tags).
<table cellpadding="10" cellspacing="0" width="100%"> <#list doc.feed.entry as node>
<#if node_index % 3 == 0 && (node_index > 0)>
</tr><tr></#if> <td valign="middle" align="center"> <img src="${node["descendant-or-self::*[@rel='alternate']/@href"]}" alt="${node.title}"/> <#if !node_has_next></tr></#if> </#list>
As you can see we are looping through the different entries that are provided in the doc variable we created earlier in the .js file. In freemarker there are some variables you can access when using a loop. You can get the index number of the current item in te list using variablename_index. This is done on line 4. There is also a variable which shows if there is next item. This is variablename_has_next. We use this to finish our table.
In order to view the gallery copy the three files to {alfresco-install-dir}\tomcat\shared\classes\alfresco\web-extension\site-webscripts
After that you have to refresh the webscripts. Go to {localurl}:{portnumber}/share/service/index.html and hit the refresh button.
Now go to {localurl}:{portnumber}/share/page/imagegallery/image and observe your gallery like mine:
If the gallery won’t show it is probably because you are not logged in into /share or /alfresco. Try logging in and then refreshing the page.
