Back to parent topic
2.3
Developing widgets for the Lotus Connections home page
Performing data requests is probably the ultimate goal of an iWidget for
most developers. We waited to address this topic after the other topics
so that we already have the Dojo framework included to make data requests
simple. Dojo provides handy functions for both requesting data and transforming
it to what we need. While these functions can be replaced with standard
JaveScript methods, it is easier to document the practice here in this
manner than to spend time explaining the particulars of xmlHTTPRequest
objects for different browsers.
The following code shows the XML descriptor from our previous
example.
<iw:iwidget name="helloWorld"
xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
iScope="helloWorld">
<iw:resource uri="servername/helloworld/helloworldfunctions.js"
/
</iw:itemSet
<iw:content mode="view"
<![CDATA[
<div id="helloWorld"/
]]
</iw:content
</iw:iwidget
This code has a minor change to it in the iw:itemSet section,
which provides the ability to pass name-value pairs to the iContext object
when it is created. Wherever we have access to the iContext object, we
can use it to get the values from the iWidget XML descriptor file. Inside
each iw:itemSet, there is an iw:item with an ID (name) and a value. An
iWidget descriptor file can have multiple iw:itemSets, and each iw:itemSet
can have multiple iw:items. To refer to a particular iw:itemSet through
the iContext object, we use iContext.getItemSet(id). This method
returns a reference to the particular item set with the ID that is passed
in. To get the value of an iw:item in the iw:itemSet, use the getItemValue(id)
method on the object containing the reference returned from the iContext.getItemSet(id).
In the previous example, we used the iw:itemSet to hold various URLs from
which we want to fetch data. Each iw:item is a URL that provides a feed
of information.
Due to the security model imposed by browsers, it is not possible to request
data from an outside source. This method is called cross site scripting
(XSS) and is considered a huge security vulnerability. If a JavaScript
function tries to request data from a domain that it was not loaded from,
then that request is stopped. To get around this, the iWidget framework
provides a function that rewrites a URI to go through an intermediate proxy
if needed. If the framework is part of an application that provides or
allows data request to be proxied, then this function rewrites the URI
to something that allows the request to happen. In the case of Lotus Connections,
there is a configurable secure proxy that allows for data r equests. The
administrator has control over the domains from which the data can be requested
in order to increase security. To rewrite the URI from which you want to
request data, pass it to the iContext.io.rewriteURI(uri) method.
The following code example shows an iw:itemSet that is
accessed to get a list of URLs from which to request data.
dojo.provide('DojoHello.helloWorld');
the declaration of our dojo widget
dojo.declare("DojoHello.helloWorld",
[dijit._Widget,dijit._Templated], {
a holder for the passed in iContext object
iContext: null,
string for our HTML template
templateString: "
",
constructor for the dojo widget
postCreate: function() {
get a uri from our itemsets
var items = this.iContext.getItemSet('urls');
var location = items.getItemValue('url1');
transform the location
var nLocation = iContext.io.rewriteURI(location);
create dojo xhr request object
var bindArgs = { handleAs:text,
url:nLocation,
timeout:5000
};
create a GET request for the data
var req = dojo.xhrGet(bindArgs);
add a callback function to handle
the returned data
req.addCallback(this,"result");
},
this method handles the data
returned by our GET request
result: function(data,evt) {
append data to the dom
this.resultContainer.innerHTML=data;
}
});
In this example, one URL is transformed from what was originally
stored in the iw:item to an accessible URI using the iContext.io.rewriteURI(uri)
method. The text that is returned by the request is appended to the DOM,
in the template of the Dojo widget itself. We use the Dojo.xhrGet method
to request the data in this example because of the simplicity of making
xmlHTTPRequests compared to using pure javascript. The iWidget
1.0 specification documents a method to make
data requests like this, called iContext.io.request(verb,uri,callback,message,header),
but it has not been implemented in the 2.0 version of the Lotus Connections
iWidget framework.
Usually the data returned by a request would be transformed or interpreted
into something more meaningful, such as a visual representation in the
case of graph data. Indeed, the data itself can be used to create HTML
that is inserted into the widget template itself. With the ability to request
data from a Web-based data source, the scope for what an iWidget can represent
is massive.
Back to parent topic 2.3
Developing widgets for the Lotus Connections Homepage
Previous topic 2.3.4
Using Dojo widgets inside an iWidget
(Edited by DW)