Your SlideShare is downloading. ×
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Optaros Surf Code Camp Walkthrough 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Optaros Surf Code Camp Walkthrough 2

2,243

Published on

Surf Code Camp walkthrough 2 gives the student their first exposure to CMIS. It shows how to use E4X in JavaScript to parse a CMIS response. …

Surf Code Camp walkthrough 2 gives the student their first exposure to CMIS. It shows how to use E4X in JavaScript to parse a CMIS response.

Full solution source code is at http://ecmarchitect.com/images/green-energy-code-camp.zip

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,243
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
164
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Alfresco Surf Code Camp Walkthrough 2: Adding CMIS to Green Energy
  • 2. Objectives Place additional functionality into Green Energy Site Get exposed to CMIS by adding a component that lists the contents of a folder Use E4X to parse XML in JavaScript 07/11/08 2
  • 3. Green Energy We will extend the Green Energy site you started in Lab #3 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. Drop in assets Unzip the assets.zip file into the web application Manifest: • /images/age/folder.png • /images/age/page.png • /WEB-INF/classes/alfresco/templates/age/tools.ftl • /WEB-INF/classes/alfresco/site-webscripts/age/feed-util.js 07/11/08 5
  • 6. Add a tools page Add a tools page Points to a rendering template: tools tools.xml /WEB-INF/classes/alfresco/site-data/pages <?xml version='1.0' encoding='UTF-8'?> <page> <title>Tools</title> <template-instance>tools</template-instance> <authentication>user</authentication> </page> The tools page must know how to render • Use template instance: tools 07/11/08 6
  • 7. Add a tools template instance Add a tools template instance Points to a FreeMarker file: /age/tools tools.xml • /WEB-INF/classes/alfresco/site-data/template-instances <?xml version='1.0' encoding='UTF-8'?> <template-instance> <template-type>/age/tools</template-type> </template-instance> The template instance needs a renderer • The FreeMarker renderer: /age/tools.ftl • You already unzipped this. It was in assets.zip 07/11/08 7
  • 8. Tools Template navigation  template scope left content page scope page scope footer  global scope 07/11/08 8
  • 9. Bind in the navigation component Add a component binding for the navigation template.navigation.tools.xml • /WEB-INF/classes/alfresco/site-data/components <?xml version='1.0' encoding='UTF-8'?> <component> <scope>template</scope> <region-id>navigation</region-id> <source-id>tools</source-id> <url>/blocks/navigation</url> </component> Note: The footer will naturally bind as it is globally scoped. 07/11/08 9
  • 10. Add as a child of the home page Adds the ‘tools’ page as a child of the ‘home’ page • Page association home-tools.xml • /WEB-INF/classes/alfresco/site-data/page-associations <?xml version='1.0' encoding='UTF-8'?> <page-association> <source-id>home</source-id> <dest-id>tools</dest-id> <assoc-type>child</assoc-type> </page-association> 07/11/08 10
  • 11. 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 11
  • 12. Try it out 07/11/08 12
  • 13. Add a FolderList Component Navigate to the site-webscripts directory • /WEB-INF/classes/alfresco/site-webscripts Create a folder called age Navigate into the age directory • /WEB-INF/classes/alfresco/site-webscripts/age Create a Web Script: • folderlist 07/11/08 13
  • 14. FolderList Component Create a web script with the following url • /age/folderlist folderlist.get.desc.xml <webscript> <shortname>Folder Listing</shortname> <description>Provides a list of contents under Company Home</description> <url>/age/folderlist</url> </webscript> 07/11/08 14
  • 15. FolderList Component folderlist.get.properties folderlist.name = Folder Listing 07/11/08 15
  • 16. FolderList Component folderlist.get.js <import resource=quot;classpath:alfresco/site-webscripts/age/feed.utils.jsquot;> // TODO: Load the feed var feed = null; // TODO: convert feed to JavaScript var xml = null; // set up the model model.title = xml.*::title.toString(); var items = new Array(); for each (entry in xml.*::entry) { var item = { }; // TODO: retrieve title value item[quot;titlequot;] = null; // TODO: retrieve icon value item[quot;iconquot;] = null; items.push(item); } model.items = items; 07/11/08 16
  • 17. Notes FolderList Component Loading the feed • Recommended API (CMIS) • /api/path/workspace/SpacesStore/<path>/children • Example: /api/path/workspace/SpacesStore/Company%20Home/children Convert the feed to JavaScript • Helper function defined in import • var xmlObject = loadFeed(feed); • <import resource=quot;classpath:alfresco/site-webscripts/age/feed.utils.jsquot;> Set up the model • Namespace aware • Use namespace independent way of pulling properties • var value = node.*::propertyName.toString(); More info on E4X • http://www.ibm.com/developerworks/library/ws-ajax1/ 07/11/08 17
  • 18. FolderList Component folderlist.get.html.ftl <div> <div class=quot;titlequot;>TODO#1</div> <div class=quot;bodyquot;> <h2>TODO#2</h2> <ul> <#list items as item> <li><img src=“TODO#3quot;/>&nbsp;TODO#4</li> </#list> </ul> </div> </div> 07/11/08 18
  • 19. Notes FolderList Component TODO #1 • Insert value of folderlist.name from properties file • Syntax: ${msg(string)} TODO #2 • Insert value of title from model • Syntax: ${variableName} or ${object.variableName} TODO #3 • Insert value of icon from items array • Syntax: ${variableName} or ${object.variableName} TODO #4 • Insert value of title from items array • Syntax: ${variableName} or ${object.variableName} 07/11/08 19
  • 20. Bind in the FolderList component Add a component binding for the FolderList component page.content.tools.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>tools</source-id> <url>/age/folderlist</url> </component> 07/11/08 20
  • 21. 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 21
  • 22. Try it out 07/11/08 22
  • 23. Try it out Potential problem: Images not showing up • http://localhost:8080/alfresco/images/xyz.gif • http://labs3c:8580/alfresco/images/xyz.gif • Hack: entry.*::icon.toString().replace('localhost', 'labs3c'); 07/11/08 23
  • 24. Wrap-up In this walkthrough, you... • Added a new page called Tools • Bound a new “folderlist” component to a region on the Tools page • Implemented the folderlist component to use a CMIS call to retrieve the folder contents of a specified path • Used E4X to parse the XML that CMIS returned 07/11/08 Optaros and Client confidential. All rights reserved. 24

×