This section describes common techniques that an iWidget can use to interact in an optimal way with Lotus Connections.
Performance Improvement
Number of HTTP requests
An iWidget should attempt to make as few HTTP requests as possible. Reducing the number of HTTP requests will improve overall page rendering performance and reduce the load time for users that are in a different geographical location from the Lotus Connections server. You should combine multiple JavaScript files into one file. You should also combine multiple CSS files into one file.
Byte size of content
An iWidget should attempt to transmit as small an amount of data as possible. This will improve network performance and the rendering time of the widget. Consider adding URL parameters to your feeds so that the feeds will only output data that is consumed by the widget.
Using browser cache for static files
All the static files should include cache control headers to enable browser caching. You can enable cache control headers via an HTTP server or servlet filters in a JEE Web application. You can use the version widget configuration parameter to invalidate the cache control when the widget is upgraded to a newer version. The following example illustrates how to generate the cache control headers when generating the server content. JavaScript, CSS, image, XML, and XSL files should be browser cachable.
For example:
int howLong = 504 * 3600;
three weeks
long timeInMillis = c.getTimeInMillis();
response.setDateHeader("Expires",timeInMillis);
response.setHeader("Cache-Control", "public, max-age="+howLong+", s-maxage="+howLong);
Using browser cache for dynamically-generated files
All the files that are dynamically generated should include cache control headers to enable browser caching as well. You can enable cache control headers via an HTTP server or servlet filters in a JEE Web application.
If the data exposed in the iWidget is only manipulated via the widget UI, you should consider storing a lastMod widget attribu te and update the value of the attribute every time the widget content is updated. Append the lastMod value to the URL to invalidate the browser cache when the content is updated.
Example:
when the data is changed
this.iContext.getAttributes().setItem("lastMod", new Date().getTime());
this.iContext.getAttributes().save();
Example:
to obtain the latest date
var attributesItemSet = this.iContext.getiWidgetAttributes();
var lastMod = attributesItemSet.getItemValue("lastMod");
myURL = myURL + "&lastMod=" + lastMod;
If the data exposed in the iWidget is manipulated by other APIs aside from the iWidget user interface, you should consider using conditional get logic in your feeds. The If-Modified-Since and Last-Modified HTTP headers will tell the browser when the content has changed and when the browser cache should be invalidated. You should maintain and store the Last-Modified date in a server-side cache.
Using custom resource bundle strings via the custom string framework
Communities and Profiles contain a custom string framework that allows integrators to include custom strings in the services without making additional HTTP requests. This framework is used to specify the widget title and other labels in the services. Dojo provides a resources bundles framework, but this framework requires additional HTTP requests of JavaScript files with the resource strings. The custom string framework uses standard Dojo.i18n API to obtain the string values. For more information, See the “Adding custom strings to Communities and Profiles” topic in the Lotus Connections Information Center.
For example:
dojo.i18n.getLocalization(myBundleID);
myBundleBID is the bundle id specified in LotusConnections-config.xml
Link:
Lotus Connections InfoCenter - Adding custom strings
Look and Feel (Themes)
Lotus Connections allows administrators to modify the default theme of the Lotus Connections product. The Communities service also allows community owners to change the theme of a community. It is recommended that you follow these suggestions:
- Reuse the existing CSS styles defined in Lotus Connections where possible. This will enable your widget to inherit the different themes when the default theme is changed.
- Minimize the usage of colors and images in your custom CSS files as much as possible to avoid inconsistency with the different themes.
- In Communities, you can verify the above by changing the community theme and observing the impact on the widget.
- Prefix your custom CSS classes to avoid name classes with other Lotus Connections CSS class names.
Encapsulation of variables to support multiple instances of a widget
Lotus Connections allows users to add a widget multiple times to a page if allowed by the administrator. It is important that all JavaScript variables are scoped down to a widget instance by using the “this” JavaScript keyword. Do not make use of global variables by defining a variable outside of the scope of your widget code.
For example:
lconn.core.helloWorld = function()
{
this.onLoad = function()
{
var attributesItemSet = this.iContext.getiWidgetAttributes();
this.resourceId = attributesItemSet.getItemValue("resourceId");
XLST Example
iWi dget developers can access Lotus Connections data via the public ATOM API. You can use this API directly from an iWidget. XSLT makes it easy to transform the ATOM/XML data into HTML. Below is an example that illustrates how to transform ATOM/XML data into HTML.
For example:
var atomAPIURL = '...';
var that = {};
dojo.xhrGet( {
url: this.iContext.io.rewriteURI(xslFilenameURL),
load: function(response) {
that.xslt = response;
},
handleAs :'xml'
});
dojo.xhrGet( {
url: atomAPIURL,
load: function(response) {
that.xml = dojox.data.dom.createDocument(response);
if (that.xslt) {
that.result = transform(that.xml, that.xslt);
}
},
handleAs :'text'
Bug in IE, if we do handleAs xml it won't work
});
var transform = function(xml, xsl) {
var html;
code for IE
if (window.ActiveXObject) {
html = xml.transformNode(xsl);
}
code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
html = xsltProcessor.transformToFragment(xml, document);
}
return html;
};
Parent topic
Lotus Connections iWidget Development Guide
Related topics
iWidget Overview
Common iWidget Support in Lotus Connections
iWidget Support in the Home Page
iWidget Support in Profiles and Communities
Authors: Vincent Burckhardt and Ronny A Pena