2.3.1 A Basic iWidget 

Back to parent topic 2.3 Developing widgets for the Lotus Connections Homepage

The simplest place to start for a basic iWidget is to develop a "Hello world" widget. This widget does nothing more than show a piece of text in the iWidget container that says "Hello World!" To create the widget, you need only one file, and that file can be hosted in a basic http server such as IBM IHS or Apache server. The file itself is an XML file. This XML file is the iWidget descriptor and provides information about the iWidget to the framework.

The following example shows the XML descriptor file for a basic "Hello World!" iWidget.

<iw:iwidget name="helloWorld" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"

<iw:content mode="view"

 

<![CDATA[
<div

 

<div id="helloWorld"

 

Hello World!</div

 

</div

 

]]>
</iw:content

 

</iw:iwidget

 

Begin the XML descriptor with the iWidget declaration that contains a name for the iWidget. Within this declaration, place the iWidget attributes. The only attribute that we use in our example is the iw:content attribute, which contains an HTML template for the iWidget itself. This template is copied by the framework and inserted into the DOM of the page where the iWidget is deployed. For applications that provide an iWidget container, this template is placed inside this container.

This is very basic widget. The XML descriptor file can be used to import JavaScript libraries and to pass options to the framework. This example does nothing more than provide a small piece of HTML that is used to render the "Hello World!" message. You can use the content section of this iWidget descriptor to build a more complex template and to include inline JavaScript and CSS for styling the HTML. It is important to note that any HTML in this content section ultimately is subject to the existing CSS styles in the page on which the iWidget is rendered. This is useful in that an iWidget deployed on a page in one application can inherit its look and feel. The same iWidget will look different when deployed in a different application.

Back to parent topic 2.3 Developing widgets for the Lotus Connections home page
Next topic 2.3.2 Importing a JavaScript resource file for a basic iWidget

(Edited by DW)