1. WRITING GADGETS WITH WSO2 GADGET
SERVER
Presented By:
Achala Aponso– Software Engineer, Member Development Technology Group, WSO2
Lalaji Sureshika- Software Engineer, Member Development Technology Group, WSO2

2. WSO2
• Founded in 2005 by acknowledged leaders in XML, Web Services
Technologies & Standards and Open Source
• Producing entire middleware platform 100% open source under
Apache license
• Business model is to sell comprehensive support & maintenance for
our products
• Venture funded by Intel Capital and Quest Software.
• Global corporation with offices in USA, UK & Sri Lanka
• 150+ employees and growing.

3. CONTENT
What is a Gadget
●
Role of Gadgets in Enterprise World
●
Role of the WSO2 Gadget Server
●
Anatomy of a Gadget
●
Writing Gadgets for a useful use-case.
●
Tips & Tricks
●

4. WHAT IS A GADGET?
● A web-based software component written with HTML,
CSS, and JavaScript
● An open standard to present chunks of data in
personalized or enterprise portals
● Defined using a declarative XML syntax
● Adhere to Google Gadget Specification

5. ROLE OF GADGETS IN ENTERPRISE WORLD
● Presentation layer is a critical aspect of a service-
oriented architecture (SOA)
● There are limitations with the traditional way of
presenting data e.g.: web applications
– Deciding the content for users
● Gadgets allow users to decide the UI for themselves.
● Provide Data Visualization, Data Analysis and Decision
Making support

6. ROLE OF THE WSO2 GADGET SERVER
● The WSO2 Gadget Server brings Gadget technology into
the enterprise
● A comprehensive portal solution targeted to be deployed
in SOAs as a presentation layer
● The gadget server is a pure Java application which is
based on our carbon framework
● Users can write, deploy and use enterprise gadgets with
ease
● Implementation is based on Apache Shindig
● Built on top of the Google Gadget Specification

7. WSO2 GADGET SERVER OFFERS
● Enterprise-class portal interface
● Enterprise gadget repository
● Administrative console
● Inter-gadget communication support
● Support for i18n
● Secure sign-in options

8. WRITING GADGETS
● Anatomy of a Gadget
● Basic Gadget Example - Hello Gadget
● Pulling Information from the Web into a Gadget
● Processing Fetched HTML with JavaScript
● Using External JavaScript Libraries
● Setting User Preferences
● Dealing with Views
● Important Gadget Features

9. ANATOMY OF A GADGET
http://wso2.org/library/articles/2011/11/writing-google-gadgets-tutorial-part-01

10. BASIC SAMPLE: HELLO WORLD GADGET

11. Hello Gadget in Action

12. GADGET:MODULE-PREFS
● Specifies characteristics of the gadget
– Gadget Title
– Author
– Preferred sizing

13. GADGET:CONTENT
● Represents 'Brain' of a gadget
● Provides the actual HTML, CSS, and JavaScript logic to be
rendered by the gadget
● Two data delivery mechanisms from Web to Gadget
– Content Type -URL:
Specify a base URL
– Content Type -HTML:
Code is provided directly in the gadget XML content section
for rendering and control flow

14. GADGET:CONTENT EXAMPLE
● Content Type URL Gadgets
● Content Type HTML Gadgets

15. GADGET:MAKE REQUEST
● A function provide by gadgets API
● Useful to retrieve and operate on remote web
content
● Can use with only type="html" gadgets
● makeRequest(url, callback, opt_params)
– String url - The URL where the content is located
– Function callback - The function to call with the data from
the URL once it is fetched
– opt_params - Additional parameters to pass to the
request.[eg: Request -Content type/Method
type/Authorization type]

16. GADGET:MAKE REQUEST EXAMPLE
● Content Type set by request : Text
● Method Type of Request:GET
http://markmail.org/browse/org.wso2
.carbon-commits
After render
gadget
Pull information
MakeRequest(
feedUrl,callback,
Web page
opt_params) Gadget xml code segment

17. GADGET:MAKEREQUEST HTTPMETHOD
● GET [gadgets.io.MethodType.GET]
Use to retrieve information from a website
Default mode of MakeRequest()
● POST [gadgets.io.MethodType.POST]
Use to pass data to a server with the intent to modify or
delete records
Have to specify a parameter under the key
gadgets.io.RequestParameters.POST_DATA

18. GADGET:MAKEREQUEST CONTENTTYPE
● Text [gadgets.io.ContentType.TEXT]
● DOM [gadgets.io.ContentType.DOM]
For data fetched from XML files as SOAP or REST service
endpoints
● Feeds[gadgets.io.ContentType.FEED]
Parse an ATOM or RSS XML feed and return the response as a
JSON-encoded object
● JSON [gadgets.io.ContentType.JSON]
To fetch JSON-encoded content as a JavaScript object

19. PROCESS FETCHED DATA WITH JAVASCRIPT

20. GADGET:EXTERNAL LIBRARIES USAGE
● Javascript libraries
● Jquery libraries
● Java Servlet Pages
● CSS

21. GADGET:USER-PREFERENCES
● Defines controls that allow users to specify settings for
the gadget
● key/value pairs
● Persisted on behalf of a user
● (Often)Manipulate by users
● Able to set programatically too
● Supporting data types :String, bool, enum, hidden

22. GADGET:USER-PREFERENCES DEMO
● String Type
● Enum Type
● Boolean Type
● Int Type

23. GADGET:USER-PREFERENCES SAMPLE

24. WSO2 GADGET SERVER:SET USER-
PREFERENCES
Default View Set user-prefs
View with user-prefs

25. GADGET:VIEWS
● The location where a gadget is displayed
● Views are different on each characteristics
– 'Default' View -Appears in a column layout
among other gadgets
– 'Canvas' View-Expands the gadget horizontally
in the entire gadget area

26. GADGET:VIEWS EXAMPLE
'Default' Mode
'Canvas' Mode

27. GADGET:VIEWS Contd.
● Define multiple views for a gadget
– Duplicate <Content> sections based on views
– Concatenate the views for a single <Content>
– <Content type="html" view=“default,canvas">

28. GADGET:JAVASCRIPT REFERENCES
● Required when a gadget uses a feature
● Have to include <Require> tag in gadget xml

29. GADGET:JAVASCRIPT REFERENCES
Feature Library Description Syntax
setPrefs Sets the value of a user <Require
preference programmatically feature=“setprefs”>
dynamic-height Gives a gadget the ability to <Require
resize itself feature=“dynamic-height”>
settitle Sets a gadget’s title <Require
programatically feature=“settitle”>
tabs Adds a tab interface to a gadget <Require feature=“tabs”>

30. GADGET:DYNAMIC HEIGHT
● Required when gadget content populate
dynamically
● Include <Required feature=”dynamic-height”/>
under <ModulePrefs>
● Call gadgets.* api method
gadgets.window.adjustHeight()

31. GADGET:SETPREFS
● Required when setting user preferences
programatically
● Include <Required feature=”setprefs”/>
under <ModulePrefs>
● Call gadgets.* api method
var prefs = new gadgets.Prefs();
prefs.set("key", value); //To set user-prefs
//To get user-prefs
prefs.getString(key); prefs.getInt(key);

32. GADGET:VIEWS
● Provides operations for dealing with views
● Include <Required feature=”views”/>
under <ModulePrefs>
● Call gadgets.* api method
//To get current view
gadgets.views.getCurrentView()
//To get all supported view by Gadget Server
gadgets.views.getSupportedViews()

33. GADGET:TABS
● Useful when need tabs inside a gadget
● Include <Required feature=”tabs”/> under
<modulePrefs>
● “tabs” library provides functions & css to operate
● “tabs” library contains main three objects
– 'tabs' object:Parent container around all tabs
– 'tab' object: A single tab within an array of
indexed tabs
– Content Container:Holds the content of an
individual 'tab' object

34. TABS EXAMPLE

35. IMPROVE GADGET PERFORMANCE
● Avoid using external JavaScript or CSS files
● Use “type=html” gadgets over “type=url” gadgets
● Specify height and width for all <img> tags in your
gadget's HTML
● Do not refresh cache often with the parameter
'refreshInterval' when using makeRequest() function

36. TIPS & TRICKS
● Error Handling
● F12: Browser specific debugging tools
● Incremental Development
● Test with IE
● Use an IDE

37. MORE ON WSO2 GADGET SERVER
● SOAP Request Gadget
Allows a gadget author to invoke a SOAP Web Service
[refer]
● OAuth Support
Allow accessing private data from a hosting service to a
consumer gadget [refer]
● Inter Gadget Communication
Facilitated with the help of publisher and subscriber gadgets
[refer]

38. REFERENCES & SOME USEFUL INFORMATION
Google Gadget Specification
●
http://code.google.com/apis/gadgets/docs/spec.html
●Writing Google Gadgets – A Tutorial
http://wso2.org/library/articles/2011/11/writing-google-
gadgets-tutorial-part-01
Browse through WSO2 developer archive http://wso2.org
●
Download WSO2 Gadget Server
●
http://wso2.org/downloads/gadget-server
●Installation Guide http://wso2.org/project/gadget-
server/1.4.2/docs/installation_guide.html

39. Selected Customers
https://ail.google.com/mail/u/0/?ui=2&ik=ad9ae58
f41&view=att&th=1331a70983344a32&attid=0.1&d
isp=thd&realattid=f_gtxto6mk0&zw

40. ● WSO2 engagement model
• QuickStart
• Development
Support
• Development
Services
• Production
Support
• Turnkey Solutions
• WSO2 Mobile Services Solution
• WSO2 FIX Gateway Solution
• WSO2 SAP Gateway Solution