CSS in iWidgets

There are times when I like to have a separation of content and presentation in my iWidgets, with the presentation defined through style sheets.

JavaScript Code

Here’s a quick summary on one method of achieving this with iWidgets:

In the “onLoad” method, which is the default method with iWidget that is called upon creation of iWidget, use something like the following:

try {
	dojo.registerModulePath("com.ibm.issw.iwidgetdemo", this.iContext.io.rewriteURI("."));
	var url = dojo.moduleUrl("com.ibm.issw.iwidgetdemo", "HelloWorld.css");
this.loadStyleSheet(url);
} catch (exp) {
	console.debug("onLoad's thrown exception. Exception: " + exp);
}

with the loadStyleSheet function like the following:

loadStyleSheet: function(url) {
	var file = document.createElement('link');
	file.setAttribute("rel", "stylesheet");
	file.setAttribute("type", "text/css");
	file.setAttribute("href", url);
	document.getElementsByTagName("head")[0].appendChild(file);
}

Note

If multiple instances of this iWidget are deployed on the same page, then there may be implications of the style sheet being loaded more than once.  This can be addressed by adding code to loadStyleSheet to check whether the stylesheet has already been loaded.

Style Sheet Editor

WebSphere Integration Developer has a nice CSS editor:

Advertisement