Working with preferences in iWidget

The iWidget's have concept of preferences similar to portlet preferences that you can use to set and get values. I wanted to try this feature so i decided to create a simple iWidget, that will display the zipCode in the view mode and in the edit mode, it will let user change the zipCode so that the value gets saved as preference and in the view mode i will read and display the value of zipCode from preference.

This is how my SamplePreferences.xml the widget.xml file looks like

<?xml version="1.0" encoding="UTF-8" ?>
<iw:iwidget id="SamplePreferences" 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" iScope="SamplePreferencesScope">
  <iw:itemSet id="pref">
    <iw:item id="zipcode" description="The zipcode " 
 value="94536"/>
  </iw:itemSet>
  <iw:resource src="SamplePreferences.js" id="SamplePreferences" />
  <iw:content mode="view">
      <![CDATA[
        <div >Current cityCode - <span id="zipCode">notset</span></div>
        
      ]]>
  </iw:content>

  <iw:content mode="edit">
    <![CDATA[<div>
      <div> New Zip Code: <span id="name"></span></div> 
             <div>
               <span id="zipCodeField" class="nameField">
                    <input type="text" dojoType="dijit.form.TextBox" 
maxlength="32" name="zipCode" id="zipCode" />
               </span>
             </div> 
             <div><input type="button" name="changeZipCode" value="Change ZipCode" 
    onclick="iContext.iScope().changeZipCode()"/> </div> 
    </div>]]>
  </iw:content>
</iw:iwidget>


The SamplePreferences widget supports 2 modes view and edit, the view mode markup is pretty simple it just displays the zipCode, with default value of notset. In the edit mode it is displaying a form that will take zipCode as input and once user clicks on submit button it will pass control to changeZipCode() javascript method.

The SamplePreferences has SamplePreferences.js resource associated with it, which looks like this

dojo.declare("SamplePreferencesScope", null,{ 
 changeZipCode:function(){
  console.log("Entering SamplePreferencesScope.changeZipCode()");
  var zipCodeStr = this.iContext.getElementById("zipCode").value;
  this.iContext.getItemSet("pref", true).setItemValue("zipcode",zipCodeStr)
  console.log(this.iContext.getItemSet("pref", true));
  console.log("Exiting SamplePreferencesScope.changeZipCode() " + zipCodeStr);
 },

    /*
    This event signals that the mode for the iWidget has changed to VIEW
   */
   onView:function() {
    console.log("Entering SamplePreferencesScope.onView()");
      this.iContext.getElementById("zipCode").innerHTML =
       this.iContext.getItemSet("pref", true).getItemValue("zipcode");
   console.log("Exiting SamplePreferencesScope.onView()");
    
   }

});


The JavaScript has 2 methods one is changeZipCode() which gets called when user enters a value of zipCode in edit mode and clicks submit. In this method i am reading value submitted by user and setting it in itemSet, which is equivalent of preferences in iWidget.

The onView() is the callback method that gets called when widget is getting rendered in the VIEW mode, i am using this method to read the zipCode set by user in the edit mode and displaying it to user.

This is how the widget looks like in the EDIT mode


This is how the widget looks like in the VIEW mode

1 comment: