What is iWidget ?

IBM has introduced widget technology similar to Google's gadget technology. The basic idea behind widget is that you develop them using client side technologies such as HTML, JavaScript,.. and then you can place that dynamic content on any web page. Widgets can be as simple as displaying static HTML on a page and they can be complex in which they can take input from user, make REST call to get data, communicate with other widgets on a page

In other words, an iWidget is an XML file. It can contain markup that is rendered and can be supported by JavaScript files for dynamic client-side scripting and CSS files for styling the markup. JSP, HTML, or HTML fragments can also contain markups, which can also be written in Ajax. Once the iWidget is in the framework, it can generate and receive client-side events, as specified in the widget wrapper. This is a sample HelloWorld iwidget


<?xml version="1.0" encoding="UTF-8" ?>
<iw:iwidget id="HelloIWidget" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" 
supportedModes="view edit" mode="view" lang="en" name="Hello iWidget" >
<iw:content mode="view">
      <![CDATA[
      <div>Hello From WebSpherenotes.com</div>
      ]]>
</iw:content>

<iw:content mode="edit">
  <![CDATA[
      <div>Hello From WebSpherenotes.com - Edit Mode</div>
  ]]>
</iw:content>
</iw:iwidget>


This XML file defines Hello iWidget, you can develop it using either RAD 8 or you can use notepad.

Widget xml file will have at least one iw:content element, this element defines what content should be displayed to the user. In my case i have two iw:content elements one with mode="view", and other with mode="edit". The markup inside the CDATA section of iw:content mode="view" will be displayed to the user during normal operation of the widget and the markup inside the iw:content mode="edit" would be displayed to the user when he switches mode to edit for configuring widget settings.

Once your widget definition is ready you can execute it any iwidget runtime. There are multiple IBM products that provide iWidget runtime environment such as Project Zero, IBM WebSphere Mashup Center, WebSphere Portal,... WebSphere Portal 7.0 allows you to wrap a widget in a Portlet and add it on portal page along with other portelts or you can add it on dedicated mash up page.

This is how the view mode of the widget looks like when wrapped inside a portlet



If you click on Edit Shared Settings link it will take you to the edit mode of the widget and display content under iw:content mode="edit", this is how it looks like

1 comment: