Optaros Surf Code Camp Lab 2
Upcoming SlideShare
Loading in...5
×
 

Optaros Surf Code Camp Lab 2

on

  • 6,267 views

In the second Surf Code Camp lab, you'll write a little user profile dashlet. This one is slightly more complex than the hello world dashlet because it makes remote calls to the Repository tier.

In the second Surf Code Camp lab, you'll write a little user profile dashlet. This one is slightly more complex than the hello world dashlet because it makes remote calls to the Repository tier.

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

Statistics

Views

Total Views
6,267
Views on SlideShare
6,253
Embed Views
14

Actions

Likes
1
Downloads
207
Comments
1

2 Embeds 14

http://www.slideshare.net 13
http://webcache.googleusercontent.com 1

Accessibility

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • tried the first dashlet in Optaros Surf Code Camp Lab 2 but user was undefined

    using Alfresco EE 3.2 any ideas?

    received error message:
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Optaros Surf Code Camp Lab 2 Optaros Surf Code Camp Lab 2 Presentation Transcript

  • Alfresco Surf Code Camp Lab 2: User profile dashlet for Share
  • Hands-on Lab Objectives • To learn about remote connections from within Surf Components • To practice the retrieval and manipulation of JSON data via FTL Notes • Alfresco Share is an Alfresco Surf-powered application • Dashlets are web components 07/11/08 2
  • Directories Alfresco Share web application • /opt/alfresco/tomcat/webapps/share site-data • /WEB-INF/classes/alfresco/site-data site-webscripts • /WEB-INF/classes/alfresco/site-webscripts templates • /WEB-INF/classes/alfresco/templates 07/11/08 3
  • 1 - Preparation Go to the Share directory: • /opt/alfresco/tomcat/webapps/share Navigate to the site-webscripts directory • /WEB-INF/classes/alfresco/site-webscripts Create a folder called demo Navigate into the demo directory • /WEB-INF/classes/alfresco/site-webscripts/demo Create a Web Script: • profile-viewer 07/11/08 4
  • 2 – Profile Viewer Dashlet profile-viewer.get.desc.xml <webscript> <shortname>Profile Viewer</shortname> <description>Profile Viewer</description> <family>user-dashlet</family> <url>/demo/profileviewer</url> </webscript> 07/11/08 5
  • 2 – Profile Viewer Dashlet profile-viewer.get.js var username = quot;adminquot;; // call over to Alfresco and fetch some content var connector = remote.connect(quot;alfrescoquot;); var data = connector.get(quot;/api/people?filter=quot; + username); // create json object from data var json = eval('(' + data + ')'); // set our user onto the model for(var i = 0; i < json[quot;peoplequot;].length; i++) { var user = json[quot;peoplequot;][i]; if(user.userName == username) { model.avatar = user.avatar; model.link = user.url; // does this come back /person? model.userName = user.userName; model.firstName = user.firstName; model.lastName = user.lastName; } } 07/11/08 6
  • 2 – Profile Viewer Dashlet profile-viewer.get.html.ftl <div class=quot;dashletquot;> <div class=quot;titlequot;>Profile Viewer</div> <div class=quot;bodyquot;> <p valign=quot;topquot;> <img src=quot;${url.context}/proxy/alfresco/${avatar}quot; class=quot;profilequot; /> <span class=quot;profile-labelquot;>User Name</span> <a class=quot;profile-namequot; href=quot;${link}quot;> ${firstName} ${lastName} </a> </p> </div> </div> 07/11/08 7
  • 2 – Profile Viewer Dashlet profile-viewer.get.head.ftl <style type=quot;text/cssquot;> .profile-label { font-size: 12px; font-family: Verdana; font-weight: bold; color: black; padding: 4px; } .profile-name { font-size: 12px; font-family: Verdana; color: black; padding: 4px; } A.profile-name { text-decoration: none; } IMG.profile { float:left; } </style> 07/11/08 8
  • 3 – Test it manually Browse to • http://labs3c:8080/share/service/index Click on ‘Refresh’ to reset the Web Scripts cache Add it as a dashlet onto your Share Dashboard Test your dashlet in Share • http://labs3c:8080/share Repository tier web script • http://labs3c:8080/alfresco/service/api/people?filter= 07/11/08 9
  • 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 07/11/08 10
  • 5 – Current User Sneak peak of Alfresco Surf API Web Components have special variables available to them context • the request context context.user • the current user context.user.id • the current user id 07/11/08 11
  • 5 – Current User profile-viewer.get.js var username = context.user.id; // call over to Alfresco and fetch some content var connector = remote.connect(quot;alfrescoquot;); var data = connector.get(quot;/api/people?filter=quot; + username); // create json object from data var json = eval('(' + data + ')'); // set our user onto the model for(var i = 0; i < json[quot;peoplequot;].length; i++) { var user = json[quot;peoplequot;][i]; if(user.userName == username) { model.avatar = user.avatar; model.link = user.url; model.userName = user.userName; model.firstName = user.firstName; model.lastName = user.lastName; } } 07/11/08 12
  • 6 – 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 • Create a test user and try out your dashboard 07/11/08 13
  • Wrap-up In this lab, you... • Created another Share dashlet • Added content to HEAD by naming one of the web script files with “.head.ftl” • Made a remote call to the repository using the out-of-the-box “alfresco” endpoint • Retrieved JSON by invoking a web script on the repository tier • Used a built-in root object to determine the current user's username 07/11/08 Optaros and Client confidential. All rights reserved. 14