Surf Code Camp walkthrough 2 gives the student their first exposure to CMIS. It shows how to use E4X in JavaScript to parse a CMIS response. Full solution source code is at http://ecmarchitect.com/images/green-energy-code-camp.zip

1. Alfresco Surf Code Camp
Walkthrough 2: Adding CMIS to Green Energy

2. Objectives
Place additional functionality into Green Energy Site
Get exposed to CMIS by adding a component that lists
the contents of a folder
Use E4X to parse XML in JavaScript
07/11/08 2

3. Green Energy
We will extend the Green Energy site you started in
Lab #3
Sample location:
• /opt/tomcat/webapps/alfwf
• http://labs3c:8580/alfwf
07/11/08 3

4. Directories
Green Energy Web Application
• /opt/tomcat/webapps/alfwf
site-data
• /WEB-INF/classes/alfresco/site-data
site-webscripts
• /WEB-INF/classes/alfresco/site-webscripts
FreeMarker templates
• /WEB-INF/classes/alfresco/templates
07/11/08 4

5. Drop in assets
Unzip the assets.zip file into the web application
Manifest:
• /images/age/folder.png
• /images/age/page.png
• /WEB-INF/classes/alfresco/templates/age/tools.ftl
• /WEB-INF/classes/alfresco/site-webscripts/age/feed-util.js
07/11/08 5

6. Add a tools page
Add a tools page
Points to a rendering template: tools
tools.xml
/WEB-INF/classes/alfresco/site-data/pages
<?xml version='1.0' encoding='UTF-8'?>
<page>
<title>Tools</title>
<template-instance>tools</template-instance>
<authentication>user</authentication>
</page>
The tools page must know how to render
• Use template instance: tools
07/11/08 6

7. Add a tools template instance
Add a tools template instance
Points to a FreeMarker file: /age/tools
tools.xml
• /WEB-INF/classes/alfresco/site-data/template-instances
<?xml version='1.0' encoding='UTF-8'?>
<template-instance>
<template-type>/age/tools</template-type>
</template-instance>
The template instance needs a renderer
• The FreeMarker renderer: /age/tools.ftl
• You already unzipped this. It was in assets.zip
07/11/08 7

8. Tools Template
navigation template scope
left content
page scope page scope
footer global scope
07/11/08 8

9. Bind in the navigation component
Add a component binding for the navigation
template.navigation.tools.xml
• /WEB-INF/classes/alfresco/site-data/components
<?xml version='1.0' encoding='UTF-8'?>
<component>
<scope>template</scope>
<region-id>navigation</region-id>
<source-id>tools</source-id>
<url>/blocks/navigation</url>
</component>
Note: The footer will naturally bind as it is globally
scoped.
07/11/08 9

10. Add as a child of the home page
Adds the ‘tools’ page as a child of the ‘home’ page
• Page association
home-tools.xml
• /WEB-INF/classes/alfresco/site-data/page-associations
<?xml version='1.0' encoding='UTF-8'?>
<page-association>
<source-id>home</source-id>
<dest-id>tools</dest-id>
<assoc-type>child</assoc-type>
</page-association>
07/11/08 10

11. Try it out
Start Alfresco
• http://labs3c:8080/alfresco
Start Surf Tomcat
• http://labs3c:8580/alfwf
Browse to
• http://labs3c:8580/alfwf/service/index
Click on ‘Refresh’ to reset the Web Scripts cache
Test your site
• http://labs3c:8580/alfwf
07/11/08 11

12. Try it out
07/11/08 12

13. Add a FolderList Component
Navigate to the site-webscripts directory
• /WEB-INF/classes/alfresco/site-webscripts
Create a folder called age
Navigate into the age directory
• /WEB-INF/classes/alfresco/site-webscripts/age
Create a Web Script:
• folderlist
07/11/08 13

14. FolderList Component
Create a web script with the following url
• /age/folderlist
folderlist.get.desc.xml
<webscript>
<shortname>Folder Listing</shortname>
<description>Provides a list of contents under Company Home</description>
<url>/age/folderlist</url>
</webscript>
07/11/08 14

15. FolderList Component
folderlist.get.properties
folderlist.name = Folder Listing
07/11/08 15

16. FolderList Component
folderlist.get.js
<import resource=quot;classpath:alfresco/site-webscripts/age/feed.utils.jsquot;>
// TODO: Load the feed
var feed = null;
// TODO: convert feed to JavaScript
var xml = null;
// set up the model
model.title = xml.*::title.toString();
var items = new Array();
for each (entry in xml.*::entry)
{
var item = { };
// TODO: retrieve title value
item[quot;titlequot;] = null;
// TODO: retrieve icon value
item[quot;iconquot;] = null;
items.push(item);
}
model.items = items;
07/11/08 16

17. Notes
FolderList Component
Loading the feed
• Recommended API (CMIS)
• /api/path/workspace/SpacesStore/<path>/children
• Example: /api/path/workspace/SpacesStore/Company%20Home/children
Convert the feed to JavaScript
• Helper function defined in import
• var xmlObject = loadFeed(feed);
• <import resource=quot;classpath:alfresco/site-webscripts/age/feed.utils.jsquot;>
Set up the model
• Namespace aware
• Use namespace independent way of pulling properties
• var value = node.*::propertyName.toString();
More info on E4X
• http://www.ibm.com/developerworks/library/ws-ajax1/
07/11/08 17

18. FolderList Component
folderlist.get.html.ftl
<div>
<div class=quot;titlequot;>TODO#1</div>
<div class=quot;bodyquot;>
<h2>TODO#2</h2>
<ul>
<#list items as item>
<li><img src=“TODO#3quot;/>&nbsp;TODO#4</li>
</#list>
</ul>
</div>
</div>
07/11/08 18

19. Notes
FolderList Component
TODO #1
• Insert value of folderlist.name from properties file
• Syntax: ${msg(string)}
TODO #2
• Insert value of title from model
• Syntax: ${variableName} or ${object.variableName}
TODO #3
• Insert value of icon from items array
• Syntax: ${variableName} or ${object.variableName}
TODO #4
• Insert value of title from items array
• Syntax: ${variableName} or ${object.variableName}
07/11/08 19

20. Bind in the FolderList component
Add a component binding for the FolderList
component
page.content.tools.xml
• /WEB-INF/classes/alfresco/site-data/components
<?xml version='1.0' encoding='UTF-8'?>
<component>
<scope>page</scope>
<region-id>content</region-id>
<source-id>tools</source-id>
<url>/age/folderlist</url>
</component>
07/11/08 20

21. Try it out
Start Alfresco
• http://labs3c:8080/alfresco
Start Surf Tomcat
• http://labs3c:8580/alfwf
Browse to
• http://labs3c:8580/alfwf/service/index
Click on ‘Refresh’ to reset the Web Scripts cache
Test your site
• http://labs3c:8580/alfwf
07/11/08 21

22. Try it out
07/11/08 22

23. Try it out
Potential problem: Images not showing up
• http://localhost:8080/alfresco/images/xyz.gif
• http://labs3c:8580/alfresco/images/xyz.gif
• Hack: entry.*::icon.toString().replace('localhost', 'labs3c');
07/11/08 23

24. Wrap-up
In this walkthrough, you...
• Added a new page called Tools
• Bound a new “folderlist” component to a region on the Tools page
• Implemented the folderlist component to use a CMIS call to
retrieve the folder contents of a specified path
• Used E4X to parse the XML that CMIS returned
07/11/08 Optaros and Client confidential. All rights reserved. 24