• Share
  • Email
  • Embed
  • Like
  • Private Content
Writing Gadgets with the WSO2 Gadget Server

Writing Gadgets with the WSO2 Gadget Server






Total Views
Views on SlideShare
Embed Views



18 Embeds 719

http://achala11.blogspot.com 431
http://wso2.org 154
http://wso2.com 52
http://amorxita9.blogspot.com 44
http://achala11.blogspot.in 8
http://achala11.blogspot.com.es 6
http://achala11.blogspot.co.uk 5
http://achala11.blogspot.de 3
http://achala11.blogspot.it 3
http://achala11.blogspot.com.au 3
http://translate.googleusercontent.com 2
http://achala11.blogspot.ch 2
http://node1.wso2.org 1
http://achala11.blogspot.be 1
http://achala11.blogspot.nl 1
http://achala11.blogspot.se 1
http://achala11.blogspot.pt 1
http://achala11.blogspot.com.br 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Writing Gadgets with the WSO2 Gadget Server Writing Gadgets with the WSO2 Gadget Server Presentation Transcript

    • WRITING GADGETS WITH WSO2 GADGET SERVERPresented By:Achala Aponso– Software Engineer, Member Development Technology Group, WSO2Lalaji 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.
    • CONTENTWhat 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 GADGEThttp://wso2.org/library/articles/2011/11/writing-google-gadgets-tutorial-part-01
    • 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 ● Content Type set by request : Text ● Method Type of Request:GEThttp://markmail.org/browse/org.wso2.carbon-commits After render gadget Pull information MakeRequest( feedUrl,callback, Web page opt_params) Gadget xml code segment
    • 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
    • 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
    • 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 <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”>
    • 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
    • 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 gadgets 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 INFORMATIONGoogle Gadget Specification●http://code.google.com/apis/gadgets/docs/spec.html●Writing Google Gadgets – A Tutorialhttp://wso2.org/library/articles/2011/11/writing-google-gadgets-tutorial-part-01Browse 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
    • 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
    • ● WSO2 engagement model• QuickStart• Development Support• Development Services• Production Support• Turnkey Solutions • WSO2 Mobile Services Solution • WSO2 FIX Gateway Solution • WSO2 SAP Gateway Solution