Disclaimer
The opinions expressed herein are my own personal opinions and do not represent anyone else's view in any way, including those of my employer.
© Copyright 2008
The opinions expressed herein are my own personal opinions and do not represent anyone else's view in any way, including those of my employer.
© Copyright 2008
Alfresco share now has a new remote API which allows remote connections to both external services and REST services backed by Alfresco webscripts. With the out of the box support for ECMAScript for XML (E4X) and JavaScript Object Notation (JSON), the remote API makes it very easy to build custom Alfresco share extensions that connect to external services, parse the return and render desire view.
In this blog, we will build a simple My Weather dashlet which will use Yahoo Weather service to get the local weather forecast for the current Alfresco share user. To achieve that, we need to take following steps:
1.Retrieve location information of the current user from his profile e.g. Zip Code.
2.Connect to Yahoo Weather Service with the zip code.
3.Process the service return and render a view for the local weather.
Let us first take a look at how to get user profile information. Alfresco share provides a user root object from which you can retrieve all user profile information. For example, to get user zip code, we can simply use following code
var zip = user.properties["companypostcode"];
In the above example, the property “companypostcode†maps to the Postcode field in the Company Details section of the user profile. Below is the list of all other out of the box user profile fields that we can use
Once we get hold of the user zip code, we can prepare the connection url to the Yahoo Weather service
var weatheServiceUrl = “http://weather.yahooapis.com/forecastrss?p=”+zip;
and then setup a Alfresco remote connector and invoke the weather service
// Initiate a remote connector
// Set the type as http
var connector = remote.connect(”http”);
// Make sure it is a fully qualified Url string
var re = /^http:\/\//;
if (!re.test(weatheServiceUrl))
{
weatheServiceUrl = “http://” + weatheServiceUrl;
}
// Make the connection
var result = connector.call(weatheServiceUrl);
Alfresco share supports two types of connectors, one for external services ( remote.connect(“httpâ€) )and the other is for the serviced backed by Alfresco Webscripts ( remote.connect(“alfrescoâ€) ). For this example, we will use the external service one and make the service call by doing
var result = connector.call(weatheServiceUrl);
The return of the Yahoo Weather Service is an RSS feed and Alfresco Share’s support for E4X scripts makes the XML parsing very simple and straightforward. For more details regards to the E4X script APIs, please refer to this link.
The parsing results then need to be sent to the presentation Freemarker template by populating the model object.
// Parse the xml document
var rss = new XML(rssXml);
model.title = rss.channel.title.toString();
model.items = [];
var item, obj;
for each (item in rss.channel..item)
{
obj = {
“title”: item.title.toString(),
“description”: item.description.toString(),
“link”: item.link.toString()
};
model.items.push(obj);
}
Below is the full source of the javascript template
// Get user’s zip code
var zip = user.properties["companypostcode"];
// Prepare Url for connection with Yahoo Weather Service
var weatheServiceUrl = “http://weather.yahooapis.com/forecastrss?p=”+zip;
// Initiate a remote connector
var connector = remote.connect(”http”);
// Make sure it is a fully qualified Url string
var re = /^http:\/\//;
if (!re.test(weatheServiceUrl))
{
weatheServiceUrl = “http://” + weatheServiceUrl;
}
// Make the connection
var result = connector.call(weatheServiceUrl);
// Process the service return
if (result !== null)
{
var rssXml = new String(result);
var re = /<[r|R][s|S]{2}/; // Is this really an RSS document?
if (re.test(rssXml))
{
// Strip out any preceding xml processing instructions or E4X will choke
var idx = rssXml.search(re);
rssXml = rssXml.substring(idx);
// It looks we need to get rid of the trailing junk as well.
if ( rssXml.indexOf('‘) != -1 ) {
rssXml = rssXml.substring(0,rssXml.indexOf(’‘)+6);
}
// Parse the xml document
var rss = new XML(rssXml);
model.title = rss.channel.title.toString();
model.items = [];
var item, obj;
for each (item in rss.channel..item)
{
obj = {
“title”: item.title.toString(),
“description”: item.description.toString(),
“link”: item.link.toString()
};
model.items.push(obj);
}
}
}
For the presentation template, the work is fairly simple. It needs to get the data from the default model object and render the HTML view.
<div class=”dashlet”>
<div class=”title”>${title!”"}</div>
<div class=”body scrollableList”>
<#if items?exists && items?size > 0>
<#list items as item>
${item.description}
</#list>
<#else>
<em>No Weather Info.</em>
</#if>
</div><#– end of body –>
</div><#– end of dashlet –>
To complete this example, we also need to provide the script configuration XML file
<webscript>
<shortname>My Weather</shortname>
<description>My Weather Dashlet</description>
<family>user-dashlet</family>
<url>/components/dashlets/my-weather</url>
</webscript>
After deploying and loading this new My Weather dashlet into Alfresco Share, we can then add it to our dashboard and here is My Weather Dashlet Souce Codes.
Previous 
Next 
Comment Meta: