Alfresco Surf Code Camp

Walkthrough 2: Adding CMIS to Green Energy

07/11/08 2

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

Objectives

07/11/08 3

We will extend the Green Energy site you started in Lab #3

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

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

Drop in assets

07/11/08 6

Add a tools page

Points to a rendering template: tools

tools.xml

/WEB-INF/classes/alfresco/site-data/pages

The tools page must know how to render• Use template instance: tools

<?xml version='1.0' encoding='UTF-8'?><page> <title>Tools</title> <template-instance>tools</template-instance> <authentication>user</authentication></page>

Add a tools page

07/11/08 7

Add a tools template instance

Points to a FreeMarker file: /age/tools

tools.xml• /WEB-INF/classes/alfresco/site-data/template-instances

The template instance needs a renderer• The FreeMarker renderer: /age/tools.ftl

• You already unzipped this. It was in assets.zip

<?xml version='1.0' encoding='UTF-8'?><template-instance> <template-type>/age/tools</template-type></template-instance>

Add a tools template instance

07/11/08 8

leftpage scope

contentpage scope

navigation  template scope

footer  global scope

Tools Template

07/11/08 9

Add a component binding for the navigation

template.navigation.tools.xml• /WEB-INF/classes/alfresco/site-data/components

Note: The footer will naturally bind as it is globally scoped.

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

Bind in the navigation component

07/11/08 10

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>

Add as a child of the home page

07/11/08 11

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 12

Try it out

07/11/08 13

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

Add a FolderList Component

07/11/08 14

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>

FolderList Component

07/11/08 15

folderlist.get.properties

folderlist.name = Folder Listing

FolderList Component

07/11/08 16

folderlist.get.js

<import resource="classpath:alfresco/site-webscripts/age/feed.utils.js">

// TODO: Load the feedvar feed = null;

// TODO: convert feed to JavaScriptvar xml = null;

// set up the modelmodel.title = xml.*::title.toString();var items = new Array();for each (entry in xml.*::entry){

var item = { };

// TODO: retrieve title valueitem["title"] = null;

// TODO: retrieve icon valueitem["icon"] = null;

items.push(item);}model.items = items;

FolderList Component

07/11/08 17

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="classpath:alfresco/site-webscripts/age/feed.utils.js">

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/

NotesFolderList Component

07/11/08 18

folderlist.get.html.ftl

<div> <div class="title">TODO#1</div> <div class="body"> <h2>TODO#2</h2> <ul> <#list items as item> <li><img src=“TODO#3"/>&nbsp;TODO#4</li> </#list> </ul> </div></div>

FolderList Component

07/11/08 19

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}

NotesFolderList Component

07/11/08 20

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>

Bind in the FolderList component

07/11/08 21

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 22

Try it out

07/11/08 23

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');

Try it out

07/11/08 Optaros and Client confidential. All rights reserved. 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