• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Optaros Surf Code Camp Lab 4
 

Optaros Surf Code Camp Lab 4

on

  • 5,040 views

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

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

Statistics

Views

Total Views
5,040
Views on SlideShare
5,029
Embed Views
11

Actions

Likes
1
Downloads
206
Comments
1

1 Embed 11

http://www.slideshare.net 11

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi Jeff
    In Share
    In DocumentLibrary ,there is a toolbar with selected items dropdownlist with menu copy,move,assign workflow,permission etc .When i select a document and click the assign workflow menu a pop is shown to select the assign and due date etc .I just want to know where the mapping is made in toolbar.get.html.ftl .The workflow.js is called when the ’assign workflow ...’ is clicked.where is the workflow.js and menu dropdown assign workflow is mapped . span class=’onActionAssignWorkflow’>${msg(’menu.selected-items.assign-workflow’)}
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Optaros Surf Code Camp Lab 4 Optaros Surf Code Camp Lab 4 Presentation Transcript

    • 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