Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optaros Surf Code Camp Lab 1

5,288 views

Published on

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

Published in: Technology
  • I tried your example and got it to work up to '3 - Test it manually', but when I get to '4 - View it in Share' the dashlet doesn't appear in the 'Add Dashlets' window.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Optaros Surf Code Camp Lab 1

  1. 1. Alfresco Surf Code Camp Lab 1: Hello World Dashlet for Share
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×