Webcenter Sites Google Gadget Development Techniques

40
WEBCENTER SITES GOOGLE GADGET DEVELOPMENT TECHNIQUES JOHN BRUNSWICK 702

description

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/

Transcript of Webcenter Sites Google Gadget Development Techniques

Page 1: Webcenter Sites Google Gadget Development Techniques

WEBCENTER SITES GOOGLE GADGET DEVELOPMENT TECHNIQUES JOHN BRUNSWICK

702

Page 2: Webcenter Sites Google Gadget Development Techniques

•  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 OUR

JOUR

NEY

Page 3: Webcenter Sites Google Gadget Development Techniques

•  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 LE

ARN

ING

OB

JECT

IVES

Page 4: Webcenter Sites Google Gadget Development Techniques

OMG! These Gadgets are

amazing!

Page 5: Webcenter Sites Google Gadget Development Techniques

USE CASES

Page 6: Webcenter Sites Google Gadget Development Techniques

•  Reusable Dynamic Application Component

•  Similar to “Portlets” – Client Side, Platform Agnostic

•  SDLC not tied to Content Server lifecycle

•  Resource isolation

•  “Instance configurability”

GADG

ET

USE

CASE

S

Page 7: Webcenter Sites Google Gadget Development Techniques

CAPABILITIES

Page 8: Webcenter Sites Google Gadget Development Techniques

GADG

ET IN

A

CTIO

N

Page 9: Webcenter Sites Google Gadget Development Techniques

GADG

ET IN

PR

EFER

ENCE

S

Page 10: Webcenter Sites Google Gadget Development Techniques

GADG

ET IN

A

CTIO

N

Page 11: Webcenter Sites Google Gadget Development Techniques

OPEN SOCIAL?

Page 12: Webcenter Sites Google Gadget Development Techniques

•  API Capabilities for Social Networking

•  Some advanced APIs like persistence

•  Google Gadgets are a component within the OpenSocial capabilities W

HA

T A

BOUT

OP

EN S

OCIA

L?

Page 13: Webcenter Sites Google Gadget Development Techniques

ARCHITECTURE

Page 14: Webcenter Sites Google Gadget Development Techniques

•  Industry Standards

•  HTML

•  Javascript GADG

ET

ARC

HIT

ECTU

RE

Page 15: Webcenter Sites Google Gadget Development Techniques

GADG

ET

AUT

HEN

TICA

TION

Page 16: Webcenter Sites Google Gadget Development Techniques

GADG

ET

XM

L DO

CUM

ENT

STRU

CTUR

E

Page 17: Webcenter Sites Google Gadget Development Techniques

GADG

ET

DESC

RIPT

OR

Page 18: Webcenter Sites Google Gadget Development Techniques

GADG

ET

BASI

C

Page 19: Webcenter Sites Google Gadget Development Techniques

GADG

ET

INTE

RMED

IATE

Page 20: Webcenter Sites Google Gadget Development Techniques

•  Content area will always leverage a CDATA block for type HTML

GADG

ET

FORM

AT

Page 21: Webcenter Sites Google Gadget Development Techniques

GADG

ET

ASS

ETS

Page 22: Webcenter Sites Google Gadget Development Techniques

CORE GADGET FUNCTIONALITY

Page 23: Webcenter Sites Google Gadget Development Techniques

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.

GADG

ET

PROC

ESS

1

Page 24: Webcenter Sites Google Gadget Development Techniques

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

DGET

PR

OCES

S 2

Page 25: Webcenter Sites Google Gadget Development Techniques

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

PREF

EREN

CE

BASI

CS

Page 26: Webcenter Sites Google Gadget Development Techniques

Once you have a preference object

prefs.set(‘mypref’, ‘some value’);

or…

prefs.setArray(‘myPrefArray’, [‘Sites’, ’Content’, ‘Portal’]); SETT

ING

PREF

EREN

CES

Page 27: Webcenter Sites Google Gadget Development Techniques

GETT

ING

PREF

EREN

CES

Page 28: Webcenter Sites Google Gadget Development Techniques

•  Must include <Require feature=”pubsub”/> in your <ModulePrefs>

PUB

SUB

Page 29: Webcenter Sites Google Gadget Development Techniques

SITES SERVER GADGET SERVER DATA SOURCES

Page 30: Webcenter Sites Google Gadget Development Techniques

GADG

ET

DATA

WC Sites Runtime

GADGET JS Library (JQuery,

etc)

J SON

REST Services JDBC

GET / POST

Page 31: Webcenter Sites Google Gadget Development Techniques

•  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

GADG

ET

DATA

Page 32: Webcenter Sites Google Gadget Development Techniques

TOOLS AND TIPS

Page 33: Webcenter Sites Google Gadget Development Techniques

CROS

S SI

TE

SCRI

PTIN

G

Page 34: Webcenter Sites Google Gadget Development Techniques

DEVE

LOPM

ENT

TOOL

S

Page 35: Webcenter Sites Google Gadget Development Techniques

•  Eclipse Plugin Includes Gadget / Social API Harness

•  Run HTTP Server Locally

•  Debug via Chrome Developer Tools

DEVE

LOPM

ENT

RUN

TIM

E TI

PS

Page 36: Webcenter Sites Google Gadget Development Techniques

LIVE CODE REVIEW & DEMONSTRATION

Page 37: Webcenter Sites Google Gadget Development Techniques

•  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/

FURT

HER

REA

DIN

G

Page 38: Webcenter Sites Google Gadget Development Techniques

Session 702 - Webcenter Sites Google Gadget Development Techniques http://www.johnbrunswick.com/2012/10/webcenter-sites-gadget-development-concepts-quickstart/ SO

URCE

DO

WN

LOA

D

Page 39: Webcenter Sites Google Gadget Development Techniques

Q&A

Page 40: Webcenter Sites Google Gadget Development Techniques

LET’S CONNECT

@johnbrunswick  

 

www.johnbrunswick.com  

 

www.linkedin.com/in/johnbrunswick  

 

youtube.com/johnbrunswick  

 

profiles.google.com/johnbrunswick  

WWW