connect application development framework vikram singh 3/12/08 1 webex

8/14/2019 Connect Application Development Framework Vikram Singh 3/12/08 1 WebEx

1/18

WebEx Confidential1

Vikram Singh3/12/08

Connect Application DevelopmentFramework


2/18

WebEx Confidential2

Connect App Dev Framework Agenda

Architecture

Structure of App definition

Widget Framework Architecture Widget Anatomy

Overview of Connect Platform Service APIs

Widget APIs

Create, test and run one widget


3/18

WebEx Confidential3

Sandbox Setup

Download the Sandbox package

The sandbox package can be downloaded fromcommunities.webex.com/dev

Drop the package in the Web Server

Setup Web Server Proxy

Change Apache conf file and add a Rewrite rule

Use the PHP file

Test Sandbox

Go to the URL http:///cwf/sandbox

Bring up a widget


4/18

WebEx Confidential4

Connect Widget Framework

Sandbox Setup Demo


5/18

WebEx Confidential5

Connect Widget Framework Architecture

Based on AJAX Dojo JavaScript toolkit

Widgets are contained within Connect client

Widgets support inheritance

Lifecycle APIs

Supports events

Access to both Connect Platform Services (CPS) and

Partner APIs Manages Credentials, sensitive parameters


6/18

WebEx Confidential6

Connect Client

Widget Within Connect Architecture

Space 1Tab 1

Browser

XML

Widget 2Widget 1

XHTML

Space 2

Space 3

Tab 2 Tab 3

XML widgets are more flexible and supports inheritance

XHTML widgets take less ramp up time as HTML is standard- Uses Microformats (http://microformats.org)


7/18

WebEx Confidential7

Connect Client

Widget Lifecycle

Space 1Tab 1

Browser

Widget

Space 2

Space 3

Tab 2 Tab 3

Start

Stop

Terminate

Initialize

Called only once by

the tab container to

initialize the widget

Widget starts its

execution. Can be

called multiple

times.

Execution is put on

hold, until start is

called again.

Widget destroyed,

all resources

released.

Widget Developers can override these methods to

control the Lifecycle

Lifecycle is controlled by the Container


8/18

WebEx Confidential8

Connect Client

Supports Events

Space 1Tab 1

BrowserSpace 2

Space 3

Tab 2 Tab 3

Any JS Object can be passed in the event

Widget 1

Publish event on

Topic

Widget 2

Subscribes for

events on a Topic

Widget 3

Subscribes for

events on a Topic

Events can cross tab boundaries but not the space boundary Events from the Connect client like Chat , IM presence etc.

can also be subscribed within the Widget


9/18

WebEx Confidential9

Connect Client

Calls to CPS APIs

Space 1Tab 1

BrowserSpace 2

Space 3

Tab 2 Tab 3

Credentials are managed by Connect Client, Widgets

do not have direct access to any credentials

Widget 1

Call a backend

API

For CPS API call, every call is tagged with the credentials by

the Connect client

Connect Client handles

all authentication and all

API calls are routed

through it


10/18

WebEx Confidential10

Widget Anatomy

Widget

Identity

Parameters

Methods

Events

Resources

Identity section has the name,

version, namespace, description,

base widget and author of the

widget.

Parameterssection describes

the metadata need from outside

the widget.

Methods section has all the

internal methods of the widget.

These methods are written in

JavaScript

Events section lists all the

events that the widget will

publish as well as the one itsubscribe to.

Resources section lists all the

resources needed by the widget,

this includes css, image and

extra JS scripts.


11/18


Brief overview of Connect Platform Service APIs

SOAP based Web Services with support for REST

CPS APIs are generic

Basic Create, Get, Set and Delete APIs

All APIs access whole object(s) or part of object(s)

Objects are described and stored as XML

Widgets wrap CPS APIs

Uses JSON to pass and retrieve the objects

More to come later.


12/18


Widget APIs

To get and set the data nodes

this.api.get(datanode);

this.api.set(datanode, value);

where datanode can be..

/widget/identity/*

/widget/parameters/*

/space/chat/topics/*

/im/contacts/{buddies|quickContacts|tempGroupForQuickContacts|}*

Publish Subscribe Eventsthis.api.publish(eventnode, message);

this.api.subscribe(eventnode, obj, callback);

where eventnode can be..

/widget/* - widget custom event.

/widget/lifecycle/(init|start|stop|terminate)

/space/chat/message - widget custom event.

/space/chat/members/all/presence - all can be replaced by username.

Make HTTP callsthis.api.httpbind(bindArgs);

where bingArgs has url to call and the callback function.


13/18


Widget APIs to access CPS

Widgets wrap CPS APIs

Use JSON to pass objects JS API format

this.api.services(JSONOBject);Ex: var user = this.api.services({cmd: get,

type: user,

where: {userName: Json}

});

The output is JSON object as well{user: { userID: U129876GHUI, userName: Json,

workspaces: {workspaceName: myWorkspace,}

. . .

}

}


14/18


Creating a Widget (XHTML)

Widget Identity

Give it a name

Setup Size

Provide external parameters Could be different for every Connect user

Will be stored in the backend

Use iFrame to create a Google Map widgets(or Yahoo

Finance widget?) Add it to the library


15/18


Creating a Widget (HTML)

Widget creation Demo


16/18


Creating a Widget (XML)

Widget Identity

Give it a name

Setup Size

Provide external parameters Could be different for every Connect user

Will be stored in the backend

Use CPS API to create a widgets

Add it to the library


17/18


Creating a Widget (XML)

Widget creation Demo


18/18


Connect Widget Framework

Thanks

connect application development framework vikram singh 3/12/08 1 webex

Documents