optaros surf code camp lab 4
DESCRIPTION
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.zipTRANSCRIPT
Alfresco Surf Code Camp
Lab 4: Content associations and CMIS
07/11/08 2
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
Objectives
07/11/08 3
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
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
folderlist.get.js
<import resource="classpath:alfresco/site-webscripts/age/feed.utils.js">
var path = "/Company%20Home";
// load the feelvar connector = remote.connect("alfresco");var feed = connector.get("/api/path/workspace/SpacesStore" + path + "/children");
// parse the feed and set namespacevar xml = loadFeed(feed);
// set up the modelmodel.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;
Update the FolderList Component
07/11/08 6
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”]);
Update the FolderList Component
07/11/08 7
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}"/> ${item.title} </a> </li> </#list> </ul> </div></div>
Update the FolderList Component
07/11/08 8
TODO● Insert value of url from model
● Syntax: ${variableName} or ${object.variableName}
Update the FolderList Component
07/11/08 9
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
Try it out
07/11/08 10
Try it out
07/11/08 11
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
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
<?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>
Content Association: cm:content
07/11/08 12
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
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
<?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>
Content Association: cm:folder
07/11/08 13
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>
Add Content Details Page
07/11/08 14
leftpage scope
contentpage scope
navigation template scope
footer global scope
Tools Template
07/11/08 15
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
Two Components Side by Side
07/11/08 16
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
Add a CMIS Browser Component
07/11/08 17
browser.get.desc.xml
<webscript> <shortname>Content Browser</shortname> <description>Content Browser</description> <url>/age/content/browser</url></webscript>
Add a CMIS Browser Component
07/11/08 18
browser.get.properties
contentbrowser.name = Content Browser
Add a CMIS Browser Component
07/11/08 19
browser.get.js
<import resource="classpath:alfresco/site-webscripts/age/feed.utils.js">
// determine the pathvar path = content.properties["displayPath"] + "/" + content.properties["name"];path = path.replace( new RegExp(" ","g"), "%20" );
// retrieve the feedvar connector = remote.connect("alfresco");var feed = connector.get("/api/path/workspace/SpacesStore" + path + "/children");var xml = loadFeed(feed);
// set up modelmodel.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;
Add a CMIS Browser Component
07/11/08 20
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}"/> ${item.title} </a> </li> </#list>
</ul> </div></div>
Add a CMIS Browser Component
07/11/08 21
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
Add a CMIS Details Component
07/11/08 22
details.get.desc.xml
<webscript> <shortname>Content Details</shortname> <description>Content Details</description> <url>/age/content/details</url></webscript>
Add a CMIS Details Component
07/11/08 23
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;}
Add a CMIS Details Component
07/11/08 24
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;
Add a CMIS Details Component
07/11/08 25
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
Add a CMIS Details Component
07/11/08 26
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>
Add a CMIS Details Component
07/11/08 27
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>
Add a CMIS Details Component
07/11/08 28
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>
Bind in Content Browser component
07/11/08 29
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>
Bind in Content Details Component
07/11/08 30
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 31
Try it out
07/11/08 32
Try it out
07/11/08 Optaros and Client confidential. All rights reserved. 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