Alfresco Surf Code Camp
Walkthrough 2: Adding CMIS to Green Energy
07/11/08 2
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
Objectives
07/11/08 3
We will extend the Green Energy site you started in Lab #3
Sample location:• /opt/tomcat/webapps/alfwf
• http://labs3c:8580/alfwf
Green Energy
07/11/08 4
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
Directories
07/11/08 5
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
Drop in assets
07/11/08 6
Add a tools page
Points to a rendering template: tools
tools.xml
/WEB-INF/classes/alfresco/site-data/pages
The tools page must know how to render• Use template instance: tools
<?xml version='1.0' encoding='UTF-8'?><page> <title>Tools</title> <template-instance>tools</template-instance> <authentication>user</authentication></page>
Add a tools page
07/11/08 7
Add a tools template instance
Points to a FreeMarker file: /age/tools
tools.xml• /WEB-INF/classes/alfresco/site-data/template-instances
The template instance needs a renderer• The FreeMarker renderer: /age/tools.ftl
• You already unzipped this. It was in assets.zip
<?xml version='1.0' encoding='UTF-8'?><template-instance> <template-type>/age/tools</template-type></template-instance>
Add a tools template instance
07/11/08 8
leftpage scope
contentpage scope
navigation template scope
footer global scope
Tools Template
07/11/08 9
Add a component binding for the navigation
template.navigation.tools.xml• /WEB-INF/classes/alfresco/site-data/components
Note: The footer will naturally bind as it is globally scoped.
<?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>
Bind in the navigation component
07/11/08 10
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>
Add as a child of the home page
07/11/08 11
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
Try it out
07/11/08 12
Try it out
07/11/08 13
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
Add a FolderList Component
07/11/08 14
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>
FolderList Component
07/11/08 15
folderlist.get.properties
folderlist.name = Folder Listing
FolderList Component
07/11/08 16
folderlist.get.js
<import resource="classpath:alfresco/site-webscripts/age/feed.utils.js">
// TODO: Load the feedvar feed = null;
// TODO: convert feed to JavaScriptvar xml = null;
// set up the modelmodel.title = xml.*::title.toString();var items = new Array();for each (entry in xml.*::entry){
var item = { };
// TODO: retrieve title valueitem["title"] = null;
// TODO: retrieve icon valueitem["icon"] = null;
items.push(item);}model.items = items;
FolderList Component
07/11/08 17
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="classpath:alfresco/site-webscripts/age/feed.utils.js">
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/
NotesFolderList Component
07/11/08 18
folderlist.get.html.ftl
<div> <div class="title">TODO#1</div> <div class="body"> <h2>TODO#2</h2> <ul> <#list items as item> <li><img src=“TODO#3"/> TODO#4</li> </#list> </ul> </div></div>
FolderList Component
07/11/08 19
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}
NotesFolderList Component
07/11/08 20
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>
Bind in the FolderList component
07/11/08 21
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
Try it out
07/11/08 22
Try it out
07/11/08 23
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');
Try it out
07/11/08 Optaros and Client confidential. All rights reserved. 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