Surf Code Camp Lab 4 is the final lab in which a pages are added to the Green Energy site that facilitate browsing through the repository hierarchy using CMIS and Surf object associations. Full solution source code is at http://ecmarchitect.com/images/green-energy-code-camp.zip

1. Alfresco Surf Code Camp
Lab 4: Content associations and CMIS

2. Objectives
Build an Object Viewer page in Surf
Add a CMIS Browser Component
Add a CMIS Display Component
Work with XML streams and process them in
FreeMarker
Experiment with linking to object instances
07/11/08 2

3. Green Energy
We will further extend the Green Energy site
• We started this in Lab #3
• It was extended in the walkthrough with introductory CMIS
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. Update the FolderList Component
folderlist.get.js
<import resource=quot;classpath:alfresco/site-webscripts/age/feed.utils.jsquot;>
var path = quot;/Company%20Homequot;;
// load the feel
var connector = remote.connect(quot;alfrescoquot;);
var feed = connector.get(quot;/api/path/workspace/SpacesStorequot; + path + quot;/childrenquot;);
// parse the feed and set namespace
var xml = loadFeed(feed);
// set up the model
model.title = xml.*::title.toString();
var items = new Array();
for each (entry in xml.*::entry)
{
var item = { };
item[quot;titlequot;] = entry.*::title.toString();
item[quot;iconquot;] = entry.*::icon.toString();
item[“id”] = null; // TODO
item[“url”] = null; // TODO
items.push(item);
}
model.items = items;
07/11/08 5

6. Update the FolderList Component
Fill in the “id” property for each item in the array
• We can use the “content” property
• Syntax: node.*::childElement.toString();
Fill in the “url” property for each item in the array
• Use the LinkBuilder API
• Creates a link to an object
• context.linkBuilder.object(“workspace://SpacesStore/” +
item[“id”]);
07/11/08 6

7. Update the FolderList Component
folderlist.get.html.ftl
• /WEB-INF/classes/alfresco/site-webscripts/age
<div>
<div class=quot;titlequot;>${msg(quot;folderlist.namequot;)}</div>
<div class=quot;bodyquot;>
<h2>${title}</h2>
<ul>
<#list items as item>
<li>
<a href=quot;TODOquot;>
<img src=quot;${item.icon}quot;/>&nbsp;${item.title}
</a>
</li>
</#list>
</ul>
</div>
</div>
07/11/08 7

8. Update the FolderList Component
TODO
Insert value of url from model
●
Syntax: ${variableName} or ${object.variableName}
●
07/11/08 8

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

10. Try it out
07/11/08 10

11. Content Association: cm:content
Add a Content Association for cm:content
Points to a page: content-details
cm_content.details.xml
• /WEB-INF/classes/alfresco/site-data/content-associations
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<content-association>
<source-id>{http://www.alfresco.org/model/content/1.0}content</source-id>
<dest-id>content-details</dest-id>
<assoc-type>page</assoc-type>
</content-association>
This tells the framework to use the page ‘content-
details’ whenever it is told to display content of type
• {http://www.alfresco.org/model/content/1.0}content
07/11/08 11

12. Content Association: cm:folder
Add a Content Association for cm:folder
Points to a page: content-details
cm_folder.details.xml
• /WEB-INF/classes/alfresco/site-data/content-associations
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<content-association>
<source-id>{http://www.alfresco.org/model/content/1.0}folder</source-id>
<dest-id>content-details</dest-id>
<assoc-type>page</assoc-type>
</content-association>
This tells the framework to use the page ‘content-
details’ whenever it is told to display content of type
• {http://www.alfresco.org/model/content/1.0}folder
07/11/08 12

13. Add Content Details Page
Add the ‘content-details’ page
Re-uses the ‘tools’ template
content-details.xml
• /WEB-INF/classes/alfresco/site-data/pages
<?xml version='1.0' encoding='UTF-8'?>
<page>
<title>Content Details</title>
<template-instance>tools</template-instance>
<authentication>user</authentication>
</page>
07/11/08 13

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

15. Two Components Side by Side
We would like to add two components to this page
• Content Browser
• Content Details
Using the content browser on the left, users select
documents and folders
By selecting folders, they drill down in the browser
Clicking on a document tells the content details
component to show the content details
07/11/08 15

16. Add a CMIS Browser Component
Navigate to the site-webscripts directory
• /WEB-INF/classes/alfresco/site-webscripts
Create a path called age/content
Navigate into the age/content path
• /WEB-INF/classes/alfresco/site-webscripts/age/content
Create a Web Script:
• browser
07/11/08 16

17. Add a CMIS Browser Component
browser.get.desc.xml
<webscript>
<shortname>Content Browser</shortname>
<description>Content Browser</description>
<url>/age/content/browser</url>
</webscript>
07/11/08 17

18. Add a CMIS Browser Component
browser.get.properties
contentbrowser.name = Content Browser
07/11/08 18

19. Add a CMIS Browser Component
browser.get.js
<import resource=quot;classpath:alfresco/site-webscripts/age/feed.utils.jsquot;>
// determine the path
var path = content.properties[quot;displayPathquot;] + quot;/quot; + content.properties[quot;namequot;];
path = path.replace( new RegExp(quot; quot;,quot;gquot;), quot;%20quot; );
// retrieve the feed
var connector = remote.connect(quot;alfrescoquot;);
var feed = connector.get(quot;/api/path/workspace/SpacesStorequot; + path + quot;/childrenquot;);
var xml = loadFeed(feed);
// set up model
model.title = xml.*::title.toString();
var items = new Array();
for each (entry in xml.*::entry)
{
var item = { };
item[quot;titlequot;] = entry.*::title.toString();
item[quot;iconquot;] = entry.*::icon.toString();
item[quot;idquot;] = entry.*::id.toString().substring(9);
item[quot;nodeRefquot;] = quot;workspace://SpacesStore/quot; + item[quot;idquot;];
item[quot;urlquot;] = context.linkBuilder.object(item[quot;nodeRefquot;]);
items.push(item);
}
model.items = items;
07/11/08 19

20. Add a CMIS Browser Component
browser.get.html.ftl
<div>
<div class=quot;titlequot;>${msg(quot;contentbrowser.namequot;)}</div>
<div class=quot;bodyquot;>
<h2>${title}</h2>
<ul>
<#list items as item>
<li>
<a href=quot;${item.url}quot;>
<img src=quot;${item.icon}quot;/>&nbsp;${item.title}
</a>
</li>
</#list>
</ul>
</div>
</div>
07/11/08 20

21. Add a CMIS Details Component
Navigate to the site-webscripts directory
• /WEB-INF/classes/alfresco/site-webscripts
Create a path called age/content
Navigate into the age/content path
• /WEB-INF/classes/alfresco/site-webscripts/age/content
Create a Web Script:
• details
07/11/08 21

22. Add a CMIS Details Component
details.get.desc.xml
<webscript>
<shortname>Content Details</shortname>
<description>Content Details</description>
<url>/age/content/details</url>
</webscript>
07/11/08 22

23. Add a CMIS Details Component
details.get.js
if(context.content != null)
{
model.properties = context.content.properties;
// TODO
model.title = null;
model.description = null;
model.mimetype = null;
model.id = null;
model.downloadUrl = null;
}
07/11/08 23

24. Add a CMIS Details Component
Set up model variables
Name
• {http://www.alfresco.org/model/content/1.0}name
Description
• {http://www.alfresco.org/model/content/1.0}description
Id
• {http://www.alfresco.org/model/system/1.0}node-uuid
Download URL
• url.context +
quot;/proxy/alfresco/api/node/content/workspace/SpacesStore/quot; +
model.id;
07/11/08 24

25. Add a CMIS Details Component
Use the object data that was automatically loaded by
the framework
Variable: context.content
Useful JSON Tool - http://www.jsonlint.com/
• Copy-and-paste JSON into a form and JSON lint makes it pretty
JSON Example – Company Home
• http://labs3c:8080/alfresco/service/webframework/content/meta
data
JSON Example – Guest Space
• http://labs3c:8080/alfresco/service/webframework/content/meta
data?id=workspace://SpacesStore/ba5a95a3-3931-4ba3-8db7-
c5eb95a156a3
JSON Example – Guest Tutorial PDF
• http://labs3c:8080/alfresco/service/webframework/content/meta
data?id=workspace://SpacesStore/a7824f47-e929-4c64-
b789-19b7f22e5b07
07/11/08 25

26. Add a CMIS Details Component
details.get.head.ftl
<style type=quot;text/cssquot;>
.doc-header
{
font-size: 14px;
font-family: Verdana;
font-weight: bold;
color: gray;
padding: 4px;
}
A.doc
{
text-decoration: none;
}
</style>
07/11/08 26

27. Add a CMIS Details Component
details.get.html.ftl
<#if content?exists>
<h2 class=quot;doc-headerquot;>${title} <i>(${mimetype})</i></h2>
${description}
<br/><br/>
<#if downloadUrl?exists>
<a href=quot;${downloadUrl}quot;>Download</a>
</#if>
<br/><br/>
<h2>Properties</h2>
<br/>
<table>
<#list properties?keys as propertyKey>
<#assign propertyValue = properties[propertyKey]>
<tr>
<td>
${propertyKey}<br/>
${propertyValue?string}
</td>
</tr>
</#list>
</table>
<#else>
No Content Selected
</#if>
07/11/08 27

28. Bind in Content Browser component
Add a left-side content browser component
page.left.content-details.xml
• /WEB-INF/classes/alfresco/site-data/components
<?xml version='1.0' encoding='UTF-8'?>
<component>
<scope>page</scope>
<region-id>left</region-id>
<source-id>content-details</source-id>
<url>/age/content/browser</url>
</component>
07/11/08 28

29. Bind in Content Details Component
Add a centered content details component
page.content.content-details.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>content-details</source-id>
<url>/age/content/details</url>
</component>
07/11/08 29

30. 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 30

31. Try it out
07/11/08 31

32. Try it out
07/11/08 32

33. Wrap-up
In this lab, you...
• Associated cm:folder with a specific page
• Associated cm:content with a specific page
• Created a “browse” and a “details” component and bound them to
regions on the Tools page
07/11/08 Optaros and Client confidential. All rights reserved. 33