How to develop a Web2.0 widget

  1. Define a widget XML configuration file, named 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

    Put the XML files and JavaScript files to the corresponding directory, invoke this widget in the Service.xml file and then the user can load this widget from the service list. Refer to How to add a new service