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/

1. WEBCENTER SITES GOOGLE GADGET
DEVELOPMENT TECHNIQUES
JOHN BRUNSWICK
702

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. • 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. OMG! These
Gadgets are
amazing!

5. USE
CASES

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. CAPABILITIES

8. GADGETIN
ACTION

9. GADGETIN
PREFERENCES

10. GADGETIN
ACTION

11. OPEN SOCIAL?

12. • API Capabilities for
Social Networking
• Some advanced APIs
like persistence
• Google Gadgets are a
component within the
OpenSocial
capabilities
WHATABOUT
OPENSOCIAL?

13. ARCHITECTURE

14. • Industry Standards
• HTML
• Javascript
GADGET
ARCHITECTURE

15. GADGET
AUTHENTICATION

16. GADGET
XMLDOCUMENT
STRUCTURE

17. GADGET
DESCRIPTOR

18. GADGET
BASIC

19. GADGET
INTERMEDIATE

20. • Content area will always leverage a CDATA block for type
HTML
GADGET
FORMAT

21. GADGET
ASSETS

22. CORE GADGET
FUNCTIONALITY

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. 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. 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. Once you have a preference object
prefs.set(‘mypref’, ‘some value’);
or…
prefs.setArray(‘myPrefArray’, [‘Sites’, ’Content’, ‘Portal’]);
SETTING
PREFERENCES

27. GETTING
PREFERENCES

28. • Must include <Require feature=”pubsub”/> in your
<ModulePrefs>
PUB
SUB

29. SITES SERVER
GADGET SERVER
DATA SOURCES

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. • 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. TOOLS AND TIPS

33. CROSSSITE
SCRIPTING

34. DEVELOPMENT
TOOLS

35. • Eclipse Plugin Includes
Gadget / Social API
Harness
• Run HTTP Server Locally
• Debug via Chrome
Developer Tools
DEVELOPMENT
RUNTIMETIPS

36. LIVE CODE
REVIEW &
DEMONSTRATION

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. Session 702 - Webcenter Sites Google
Gadget Development Techniques
http://www.johnbrunswick.com/2012/10/
webcenter-sites-gadget-development-concepts-
quickstart/
SOURCE
DOWNLOAD

39. Q&A

40. LET’S
CONNECT
@johnbrunswick
www.johnbrunswick.com
www.linkedin.com/in/johnbrunswick
youtube.com/johnbrunswick
profiles.google.com/johnbrunswick
WWW