Writing Gadgets with the WSO2 Gadget Server


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Writing Gadgets with the WSO2 Gadget Server

  1. 1. WRITING GADGETS WITH WSO2 GADGET SERVERPresented By:Achala Aponso– Software Engineer, Member Development Technology Group, WSO2Lalaji Sureshika- Software Engineer, Member Development Technology Group, WSO2
  2. 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. 3. 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●
  4. 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. 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. 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. 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. 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. 9. ANATOMY OF A GADGEThttp://wso2.org/library/articles/2011/11/writing-google-gadgets-tutorial-part-01
  11. 11. Hello Gadget in Action
  12. 12. GADGET:MODULE-PREFS ● Specifies characteristics of the gadget – Gadget Title – Author – Preferred sizing
  13. 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. 14. GADGET:CONTENT EXAMPLE ● Content Type URL Gadgets ● Content Type HTML Gadgets
  15. 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. 16. 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
  17. 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. 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
  20. 20. GADGET:EXTERNAL LIBRARIES USAGE ● Javascript libraries ● Jquery libraries ● Java Servlet Pages ● CSS
  21. 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. 22. GADGET:USER-PREFERENCES DEMO ● String Type ● Enum Type ● Boolean Type ● Int Type
  24. 24. WSO2 GADGET SERVER:SET USER-PREFERENCES Default View Set user-prefs View with user-prefs
  25. 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. 26. GADGET:VIEWS EXAMPLE Default Mode Canvas Mode
  27. 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. 28. GADGET:JAVASCRIPT REFERENCES ● Required when a gadget uses a feature ● Have to include <Require> tag in gadget xml
  29. 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. 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. 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. 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. 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. 34. TABS EXAMPLE
  35. 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 gadgets HTML ● Do not refresh cache often with the parameter refreshInterval when using makeRequest() function
  36. 36. TIPS & TRICKS ● Error Handling ● F12: Browser specific debugging tools ● Incremental Development ● Test with IE ● Use an IDE
  37. 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. 38. 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
  39. 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. 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