WEBCENTER SITES GOOGLE GADGET
DEVELOPMENT TECHNIQUES
JOHN BRUNSWICK
702
•  Common Gadget Use Cases
•  Gadget Capabilities
•  Reference Architecture for Gadgets
•  Sites Server, Gadget Server and...
•  Understand the WebCenter Sites Gadget capabilities and
structure
•  Explain reference architecture to surface informati...
OMG! These
Gadgets are
amazing!
USE
CASES
•  Reusable Dynamic Application Component
•  Similar to “Portlets” – Client Side, Platform Agnostic
•  SDLC not tied to Co...
CAPABILITIES
GADGETIN
ACTION
GADGETIN
PREFERENCES
GADGETIN
ACTION
OPEN SOCIAL?
•  API Capabilities for
Social Networking
•  Some advanced APIs
like persistence
•  Google Gadgets are a
component within ...
ARCHITECTURE
•  Industry Standards
•  HTML
•  Javascript
GADGET
ARCHITECTURE
GADGET
AUTHENTICATION
GADGET
XMLDOCUMENT
STRUCTURE
GADGET
DESCRIPTOR
GADGET
BASIC
GADGET
INTERMEDIATE
•  Content area will always leverage a CDATA block for type
HTML
GADGET
FORMAT
GADGET
ASSETS
CORE GADGET
FUNCTIONALITY
1. Standard HTML header, opening tag and tag. information is
optional. Gadgets run in browser quirks mode.
2. Core gadgets...
1. A single call to gadgets.util.runOnLoadHandlers().
2. Standard HTML closing tags.
3. Containers must also be able to pr...
User Preferences
•  Set by user
•  Save information specific to a given user
Gadget Preferences
•  Set by Developer
•  Inf...
Once you have a preference object
prefs.set(‘mypref’, ‘some value’);
or…
prefs.setArray(‘myPrefArray’, [‘Sites’, ’Content’...
GETTING
PREFERENCES
•  Must include <Require feature=”pubsub”/> in your
<ModulePrefs>
PUB
SUB
SITES SERVER
GADGET SERVER
DATA SOURCES
GADGET
DATA
WC Sites
Runtime
GADGET
JS Library (JQuery,
etc)
J
S
O
N
REST
Services JDBC
G
E
T
/
P
O
S
T
•  Client side JS calls into RESTful services on
server
•  Authentication via OAuth2, etc
•  Manually iterate over respons...
TOOLS AND TIPS
CROSSSITE
SCRIPTING
DEVELOPMENT
TOOLS
•  Eclipse Plugin Includes
Gadget / Social API
Harness
•  Run HTTP Server Locally
•  Debug via Chrome
Developer Tools
DEVE...
LIVE CODE
REVIEW &
DEMONSTRATION
•  WebCenter Sites Developer’s Guide for Creating Gadgets
http://docs.oracle.com/cd/E29495_01/doc.1111/
developer_guide_fo...
Session 702 - Webcenter Sites Google
Gadget Development Techniques
http://www.johnbrunswick.com/2012/10/
webcenter-sites-g...
Q&A
LET’S
CONNECT
@johnbrunswick	
  
	
  
www.johnbrunswick.com	
  
	
  
www.linkedin.com/in/johnbrunswick	
  
	
  
youtube.co...
Upcoming SlideShare
Loading in …5
×

Webcenter Sites Google Gadget Development Techniques

883 views

Published on

Presentation from Collaborate 13 outlining basics of development techniques for Gadget development within WebCenter Sites. View additional background around these presentation materials at http://www.johnbrunswick.com/2012/10/webcenter-sites-gadget-development-concepts-quickstart/

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
883
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webcenter Sites Google Gadget Development Techniques

  1. 1. WEBCENTER SITES GOOGLE GADGET DEVELOPMENT TECHNIQUES JOHN BRUNSWICK 702
  2. 2. •  Common Gadget Use Cases •  Gadget Capabilities •  Reference Architecture for Gadgets •  Sites Server, Gadget Server and Data Sources •  Live Development of Gadget that Surfaces Backend Data •  General Developer Tips and Tricks •  Q&A OURJOURNEY
  3. 3. •  Understand the WebCenter Sites Gadget capabilities and structure •  Explain reference architecture to surface information via the WebCenter Sites Gadget from another source system •  Develop WebCenter Sites Gadgets that connect to backend systems and surface data within WebCenter Sites interface LEARNING OBJECTIVES
  4. 4. OMG! These Gadgets are amazing!
  5. 5. USE CASES
  6. 6. •  Reusable Dynamic Application Component •  Similar to “Portlets” – Client Side, Platform Agnostic •  SDLC not tied to Content Server lifecycle •  Resource isolation •  “Instance configurability” GADGET USECASES
  7. 7. CAPABILITIES
  8. 8. GADGETIN ACTION
  9. 9. GADGETIN PREFERENCES
  10. 10. GADGETIN ACTION
  11. 11. OPEN SOCIAL?
  12. 12. •  API Capabilities for Social Networking •  Some advanced APIs like persistence •  Google Gadgets are a component within the OpenSocial capabilities WHATABOUT OPENSOCIAL?
  13. 13. ARCHITECTURE
  14. 14. •  Industry Standards •  HTML •  Javascript GADGET ARCHITECTURE
  15. 15. GADGET AUTHENTICATION
  16. 16. GADGET XMLDOCUMENT STRUCTURE
  17. 17. GADGET DESCRIPTOR
  18. 18. GADGET BASIC
  19. 19. GADGET INTERMEDIATE
  20. 20. •  Content area will always leverage a CDATA block for type HTML GADGET FORMAT
  21. 21. GADGET ASSETS
  22. 22. CORE GADGET FUNCTIONALITY
  23. 23. 1. Standard HTML header, opening tag and tag. information is optional. Gadgets run in browser quirks mode. 2. Core gadgets JavaScript libraries and any additional libraries specified in the gadget. The server SHOULD consolidate all librariess into a single request to minimize the number of HTTP requests made by the client browser. This MAY be followed by JavaScripte required to initialize the included libraries. 3. Results from parsing the Gadget XML file and processing the sections that match the specified View name. GADGET PROCESS1
  24. 24. 1. A single call to gadgets.util.runOnLoadHandlers(). 2. Standard HTML closing tags. 3. Containers must also be able to process Data Pipelining (Section 13) and Templating [OpenSocial­ Templating] elements in the gadget XML spec. GADGET PROCESS2
  25. 25. User Preferences •  Set by user •  Save information specific to a given user Gadget Preferences •  Set by Developer •  Information like sizing, start node of a dynamic query of content, etc •  OpenSocial offers a more extensive persistence API - http://wiki.opensocial.org/index.php? title=The_Persistence_API PREFERENCE BASICS
  26. 26. Once you have a preference object prefs.set(‘mypref’, ‘some value’); or… prefs.setArray(‘myPrefArray’, [‘Sites’, ’Content’, ‘Portal’]); SETTING PREFERENCES
  27. 27. GETTING PREFERENCES
  28. 28. •  Must include <Require feature=”pubsub”/> in your <ModulePrefs> PUB SUB
  29. 29. SITES SERVER GADGET SERVER DATA SOURCES
  30. 30. GADGET DATA WC Sites Runtime GADGET JS Library (JQuery, etc) J S O N REST Services JDBC G E T / P O S T
  31. 31. •  Client side JS calls into RESTful services on server •  Authentication via OAuth2, etc •  Manually iterate over response object from server •  JQuery and other JS frameworks provide elegant handling of the call and iteration GADGET DATA
  32. 32. TOOLS AND TIPS
  33. 33. CROSSSITE SCRIPTING
  34. 34. DEVELOPMENT TOOLS
  35. 35. •  Eclipse Plugin Includes Gadget / Social API Harness •  Run HTTP Server Locally •  Debug via Chrome Developer Tools DEVELOPMENT RUNTIMETIPS
  36. 36. LIVE CODE REVIEW & DEMONSTRATION
  37. 37. •  WebCenter Sites Developer’s Guide for Creating Gadgets http://docs.oracle.com/cd/E29495_01/doc.1111/ developer_guide_for_creating_gadgets_11gr1.pdf •  Google Gadgets – Development Fundamentals https://developers.google.com/gadgets/docs/fundamentals •  Google Gadgets – Creating a User Interface https://developers.google.com/gadgets/docs/ui •  Google Gadgets – Gadgets XML Reference https://developers.google.com/gadgets/docs/xml_reference •  OAuth – Getting Started http://oauth.net/ FURTHERREADING
  38. 38. Session 702 - Webcenter Sites Google Gadget Development Techniques http://www.johnbrunswick.com/2012/10/ webcenter-sites-gadget-development-concepts- quickstart/ SOURCE DOWNLOAD
  39. 39. Q&A
  40. 40. LET’S CONNECT @johnbrunswick     www.johnbrunswick.com     www.linkedin.com/in/johnbrunswick     youtube.com/johnbrunswick     profiles.google.com/johnbrunswick   WWW  

×