Developing a Web 2.0 widget

To develop a Web 2.0 widget, do the following:
  1. Define a widget XML configuration file, for example Wgt.xml:
    <iw:iwidget name="Wgt" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" iScope="Wgt"  supportedModes="view edit help" mode="view">
        <iw:resource uri="Wgt3.js" />
        <iw:resource uri="Wgt2.js" />
        <iw:itemSet id="attributes" private="true">
             <iw:item id="url"  value="http://www.google.com/"/>
             <iw:item id="version" value="1.0.0.0" />
        </iw:itemSet>
           
        <iw:itemSet id="life" private="true">
            <iw:item id="user"  value='{"name":"Jesse", "phone" : "110"}'/> 
            <iw:item id="fruit"  value='["apple", "orange", "pear"]' />
            <iw:item id="movies" value='["Batman", "Leon", "The Godfather"]' />
        </iw:itemSet>
        
        <iw:content mode="view">
    	<![CDATA[
            <iframe class="rootFrame" id='rootFrame' style="width:100%;height:100%"></iframe>
        ]]&gt;
        </iw:content>
    </iw:iwidget>
  2. Define the relevant JavaScriptâ„¢ files:
    • Wgt2.js
      function Wgt2() {
      	  this.onLoad = function() {
        	  alert('The js Wgt2 is on load');
      	    Wgt3();
      		  this.rootFrame = this.iContext.getElementById('rootFrame');
      		  this.rootFrame.src = this.iContext.getiWidgetAttributes().items.url.value;
      		  alert("url:"+this.iContext.getiWidgetAttributes().items.url.value);
      		  alert("version:"+this.iContext.getiWidgetAttributes().items.version.value);
      		
      		//Asynchronous loading
      		
      		  var testWRT = new WidgetRT();
      		  var testWgtDef = testWRT.wgtDefService.readWgtDefFileAsync(
                             'Wgt2.xml', function(testWgtDef){
      		                     alert("life- user:"+testWgtDef.itemSets.life.items.user.value);
      		                     
      		                   //Synchronous  loading
      		                     var testWgtDef1 = testWRT.wgtDefService.readWgtDefFileSync('Wgt2.xml');
      		                     alert("life- user:"+testWgtDef1.itemSets.life.items.fruit.value);
      		                     
      	                       });
      	  }
      }
    • Wgt3.js
      function Wgt3() {	
      		alert('The js Wgt3 is on load');		
      }
  3. Add the widget entry in WidgetCatalog.xml file:
    <entries>
      ...
      <entry id='Wgt' >
    		 <definition>Wgt.xml</definition>
    	 </entry>
    	 ...
    </entries>
  4. Deploy the widget to Service Repository:

    Place the XML files and JavaScript files to the corresponding directory, and invoke this widget in the Service.xml file, and then the user can load this widget from the service list. Refer to Adding a new service for more information.