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

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.

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

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

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

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

WSO2 GADGET SERVER OFFERS

● Enterprise-class portal interface

● Enterprise gadget repository

● Administrative console

● Inter-gadget communication support

● Support for i18n

● Secure sign-in options

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

ANATOMY OF A GADGET

http://wso2.org/library/articles/2011/11/writing-google-gadgets-tutorial-part-01

BASIC SAMPLE: HELLO WORLD GADGET

Hello Gadget in Action

GADGET:MODULE-PREFS

● Specifies characteristics of the gadget

– Gadget Title

– Author

– Preferred sizing

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

GADGET:CONTENT EXAMPLE● Content Type URL Gadgets

● Content Type HTML Gadgets

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]

GADGET:MAKE REQUEST EXAMPLE

MakeRequest(feedUrl,callback,opt_params)

Web pageGadget xml code segment

Pull information

● Content Type set by request : Text

● Method Type of Request:GET

After render gadget

http://markmail.org/browse/org.wso2.carbon-commits

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

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

PROCESS FETCHED DATA WITH JAVASCRIPT

GADGET:EXTERNAL LIBRARIES USAGE

● Javascript libraries

● Jquery libraries

● Java Servlet Pages

● CSS

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

GADGET:USER-PREFERENCES DEMO

● String Type

● Enum Type

● Boolean Type

● Int Type

GADGET:USER-PREFERENCES SAMPLE

WSO2 GADGET SERVER:SET USER-

PREFERENCES

Default View Set user-prefs

View with user-prefs

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

GADGET:VIEWS EXAMPLE

'Default' Mode

'Canvas' Mode

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">

GADGET:JAVASCRIPT REFERENCES

● Required when a gadget uses a feature

● Have to include <Require> tag in gadget xml

GADGET:JAVASCRIPT REFERENCES

Feature Library Description Syntax

setPrefs Sets the value of a user preference programmatically

<Require feature=“setprefs”>

dynamic-height Gives a gadget the ability to resize itself

<Require feature=“dynamic-height”>

settitle Sets a gadget’s title programatically

<Require feature=“settitle”>

tabs Adds a tab interface to a gadget <Require feature=“tabs”>

GADGET:DYNAMIC HEIGHT

● Required when gadget content populate

dynamically

● Include <Required feature=”dynamic-height”/>

under <ModulePrefs>

● Call gadgets.* api method

gadgets.window.adjustHeight()

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);

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()

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

TABS EXAMPLE

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

TIPS & TRICKS

● Error Handling

● F12: Browser specific debugging tools

● Incremental Development

● Test with IE

● Use an IDE

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]

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

https://ail.google.com/mail/u/0/?ui=2&ik=ad9ae58f41&view=att&th=1331a70983344a32&attid=0.1&disp=thd&realattid=f_gtxto6mk0&zw

Selected Customers

●WSO2 engagement model

• QuickStart

• DevelopmentSupport

• Development Services

• Production Support

• Turnkey Solutions

• WSO2 Mobile Services Solution

• WSO2 FIX Gateway Solution

• WSO2 SAP Gateway Solution