SlideShare a Scribd company logo

Optaros Surf Code Camp Lab 4

•
•
Jeff Potts
Jeff Potts

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 of 33
Download to read offline
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=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
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=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
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=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
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
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=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
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
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 + quot;/proxy/alfresco/api/node/content/workspace/SpacesStore/quot; + 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=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
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
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

More Related Content

Optaros Surf Code Camp Lab 4

  • 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
  • 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
  • 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