Alfresco Surf Code Camp
Lab 4: Content associations and CMIS

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

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

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

Update the FolderList Component
folderlist.get.js
<import resource=\"classpath:alfresco/site-webscripts/age/feed.utils.js\">
var path = \"/Company%20Home\";
// load the feel
var connector = remote.connect(\"alfresco\");
var feed = connector.get(\"/api/path/workspace/SpacesStore\" + path + \"/children\");
// 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[\"title\"] = entry.*::title.toString();
item[\"icon\"] = entry.*::icon.toString();
item[“id”] = null; // TODO
item[“url”] = null; // TODO
items.push(item);
}
model.items = items;
07/11/08 5

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

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

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

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

Try it out
07/11/08 10

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=\"1.0\" encoding=\"UTF-8\"?>
<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

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=\"1.0\" encoding=\"UTF-8\"?>
<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

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

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

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

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

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

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

Add a CMIS Browser Component
browser.get.js
<import resource=\"classpath:alfresco/site-webscripts/age/feed.utils.js\">
// determine the path
var path = content.properties[\"displayPath\"] + \"/\" + content.properties[\"name\"];
path = path.replace( new RegExp(\" \",\"g\"), \"%20\" );
// retrieve the feed
var connector = remote.connect(\"alfresco\");
var feed = connector.get(\"/api/path/workspace/SpacesStore\" + path + \"/children\");
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[\"title\"] = entry.*::title.toString();
item[\"icon\"] = entry.*::icon.toString();
item[\"id\"] = entry.*::id.toString().substring(9);
item[\"nodeRef\"] = \"workspace://SpacesStore/\" + item[\"id\"];
item[\"url\"] = context.linkBuilder.object(item[\"nodeRef\"]);
items.push(item);
}
model.items = items;
07/11/08 19

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

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

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

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

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 +
\"/proxy/alfresco/api/node/content/workspace/SpacesStore/\" +
model.id;
07/11/08 24

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

Add a CMIS Details Component
details.get.head.ftl
<style type=\"text/css\">
.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

Add a CMIS Details Component
details.get.html.ftl
<#if content?exists>
<h2 class=\"doc-header\">${title} <i>(${mimetype})</i></h2>
${description}
<br/><br/>
<#if downloadUrl?exists>
<a href=\"${downloadUrl}\">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

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

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

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

Try it out
07/11/08 31

Try it out
07/11/08 32

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