It is possible to set a gadget's preferences, so any user can customize his/her own gadget and configure their own preferences. In this recipe, you will set the preferences of the Skype ID account of the Skype Talk gadget.
To set user preferences, you only need to modify the Gadget XML descriptor, in the example the SkypeTalk.xml, or by the Application Registry Administration console seen in the previous recipes of the chapter. Add the new parameter, and insert it in the view. The details are as follows.
Follow these steps to create the user preferences for the gadget:
- Open the
SkypeTalk.xmlfile or go in the Application Registry and add the following code:<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs author="Cookbook Developer" title="Skype Talk" directory_title="Skype Talk" title_url="http://www.vige.it" description="Speak with your friends on Skype." thumbnail="images/SkypeTalk.gif" height="24"> <Require feature="setprefs" /> <Locale lang="ar" language_direction="rtl" /> </ModulePrefs> <UserPref name="skypeid" display_name="Insert the Skype id" default_value="myaccount" /> <Content type="html"> <![CDATA[ <script type="text/javascript"> var prefs = new _IG_Prefs(__MODULE_ID__); var theURL = 'skype:'+prefs.getString('skypeid')+'?call'; </script> <script type="text/javascript" src= "http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <body> <a href="javascript:document.location=theURL"> <img src="http://download.skype.com/share/skypebuttons/buttons/call_green_white_153x63.png" style="border: none;" width="153" height="63" alt="Skype Me™!" /> </a></body> ]]> </Content> </Module> - Inspect your gadget. You will notice a new pencil button in the title bar. Click on the button and the new user preferences form will appear.
- Now you can change the Skype ID to your contact.
The Google OpenSocial specifications describe different features that can be used, but GateIn implements only some of them. Moreover, the
Require feature tag is optional, because the features are called directly with a simple mechanism of calling a function declared in the Content tag of the gadget XML descriptor. You have seen the setprefs feature in this recipe. This feature and the other gadget features are described in three JavaScript files inside the eXoResources/javascript/eXo/gadget folder.
You can connect to these three URLs to see the provided gadget features:
http://localhost:8080/eXoResources/javascript/eXo/gadget/ Gadgets.jshttp://localhost:8080/eXoResources/javascript/eXo/gadget/UIGadget.jshttp://localhost:8080/eXoResources/javascript/eXo/gadget/ ExoBasedUserPrefStore.js
When you click on the pencil button on the top right of the portlet, the handleOpenUserPrefsDialog function of the Gadgets.js is called. This file is in the directory eXoResources/javascript/eXo/gadget. Here is the code:
gadgets.IfrGadget.prototype.handleOpenUserPrefsDialog = function() {
if (this.userPrefsDialogContentLoaded) {
this.showUserPrefsDialog();
} else {
var gadget = this;
var igCallbackName = 'ig_callback_' + this.id;
gadget.userPrefsDialogContentLoaded = true;
this.generateForm(gadget, this.getUserPrefsParams());
gadget.showUserPrefsDialog();
}
};It generates an automatic form
taking the skypeid as parameter and passing it to the _IG_Prefs object.
When you click on the
Save button, the method handleSaveUserPrefs is called:
gadgets.IfrGadget.prototype.handleSaveUserPrefs = function() {
this.hideUserPrefsDialog();
var prefs = {};
var numFields = document.getElementById('m_' + this.id +
'_numfields').value;
for (var i = 0; i < numFields; i++) {
var input = document.getElementById('m_' + this.id + '_' + i);
if (input.type != 'hidden') {
var userPrefNamePrefix = 'm_' + this.id + '_up_';
var userPrefName = input.name.substring(userPrefNamePrefix.length);
var userPrefValue = input.value;
if(input.type == 'checkbox')
userPrefValue = input.checked ? "true" : "false";
prefs[userPrefName] = userPrefValue;
}
}
this.setUserPrefs(prefs);
this.refresh();
};