In the first Surf Code Camp lab your goal is to create a simple hello world Surf dashlet. Full solution source code is at http://ecmarchitect.com/images/green-energy-code-camp.zip

1. Alfresco Surf Code Camp
Lab 1: Hello World Dashlet for Share

2. Hands-on Lab
Objectives
• Build a custom dashlet for Alfresco Share
• Select dashlet from configure dashboard page
• Add it to your dashboard to view it
Notes
• Alfresco Share is an Alfresco Surf-powered application
• Dashlets are web components
12/01/09 2

3. Directories
Alfresco Share web application ($SHARE_HOME)
• /opt/alfresco/tomcat/webapps/share
site-data
• $SHARE_HOME/WEB-INF/classes/alfresco/site-data
site-webscripts
• $SHARE_HOME/WEB-INF/classes/alfresco/site-webscripts
templates
• $SHARE_HOME/WEB-INF/classes/alfresco/templates
12/01/09 3

4. 1 - Preparation
Navigate to the site-webscripts directory
• $SHARE_HOME/WEB-INF/classes/alfresco/site-webscripts
Create a folder called demo
Navigate into the demo directory
• $SHARE_HOME/WEB-INF/classes/alfresco/site-webscripts/demo
Create a Web Script:
• helloworld
12/01/09 4

5. 2 – Hello World Dashlet
helloworld.get.desc.xml
<webscript>
<shortname>Hello World Dashlet</shortname>
<description>Hello World Dashlet</description>
<family>user-dashlet</family>
<url>/demo/helloworld</url>
</webscript>
helloworld.get.js
model.body = quot;All your base are belong to us!quot;;
helloworld.get.html.ftl
<div class=quot;dashletquot;>
<div class=quot;titlequot;>Hello World</div>
<div class=quot;bodyquot;>${body}</div>
</div>
12/01/09 5

6. 3 – Test it manually
Browse to
• http://labs3c:8080/share/service/index
Click on ‘Refresh’ to reset the Web Scripts cache
Test your dashlet
• http://labs3c:8080/share/service/demo/helloworld
12/01/09 6

7. 4 – View it in Share
Browse to
• http://labs3c:8080/share
Log in
• admin/admin
Click on ‘Customize Dashboard’
Click ‘Add Dashlets’
You should see your new dashlet
• Try adding it to your dashboard page
12/01/09 7

8. 5 – Web Script Configuration
Configuration files for Web Scripts
Allows Web Scripts to store configuration files in
associated XML
Let's give it a shot with our Hello World Dashlet
12/01/09 8

9. 5 – Web Script Configuration
helloworld.get.config.xml
<properties>
<title>Hello World</title>
</properties>
helloworld.get.html.ftl
<div class=quot;dashletquot;>
<div class=quot;titlequot;>${config.script[quot;propertiesquot;][quot;titlequot;]}</div>
<div class=quot;bodyquot;>${body}</div>
</div>
12/01/09 9

10. 6 – Test it manually
Browse to
http://labs3c:8080/share/service/index
●
Click on ‘Refresh’ to reset the Web Scripts cache
Test your dashlet
http://labs3c:8080/share/service/demo/helloworld
●
12/01/09 10

11. Wrap-up
In this lab, you...
• Created a simple Share Dashlet
• The Dashlet was a good old fashioned web script
• The web script read a parameter from a config file
12/01/09 Optaros and Client confidential. All rights reserved. 11