Collaborative SVG as A Web Service

Collaborative DOM as A Web Service

May, 2003

by Xiaohong Qiu

Ph.D. student, CIS, Syracuse University

Community Grids Lab, Indiana University 501 Morton N. St, Suite 222, Bloomington IN 47404

xiqiu@

syr.edu, xqiu@

i

ndiana.edu

Introduction

Ø

This foil set contains material on my research

between June 2000 and May 2003.

Ø

Background

combines real world problems with

effort involved in seeking for an answer.

Ø

Related Technologies

summarize some key

features of the emerging technologies such as

W3C DOM, W3C SVG and Web Services.

Ø

Design of collaborative system

describes

Background

Ø

ARPANET

(1969) – Forerunner of the Internet. A project funded by the

Advanced Research Project Agency (ARPA) to research how to build a

network that would withstand bomb damage. Critical applications – email

and ftp.

Ø

Indexing and search services -

Gopher

,

Archie

,

Veronica

, and

WAIS

were

created by Internet users as the amount of information on internet grew.

Ø

HTTP

and

HTML

– CERN (Geneva). Enabled the World Wide Web.

Ø

Mosaic

(1994) – first browser. developed at NCSA. forerunner of Netscape.

Ø

Internet2

- operational by 1999.

Ø

Distributed Operating System (1990-2003) –

NFS

,

DCE

(rpc),

Corba

,

COM

,

Java

,

Web Services

,

Grids

Ø

Peer-to-Peer Networks (2000)-

Gnutella

Ø

Multimedia revolution is in process (1995-now) –

Napster

,

Video on

Interesting Research Areas

Ø

Technology Support for

Synchronous and Asynchronous

Resource Sharing

─

l

e-learning

e-science

l

video/audio conferencing etc.

Ø

Grids

manage and share (typically asynchronously)

resources in a centralized fashion.

Ø

Web Services

─ loosely coupled software components

across internet interacting with messages.

Ø

Peer-to-peer Grids

─ link services, resources and clients

in dynamic decentralized fashion

l

The system consists of a sea of message-based Services (e.g. shared

SVG as a Web Service)

l

Services linked by publish-subscribe messaging infrastructure such as

Our Goals

Ø

Research approaches to

build applications

(specifically W3C DOM based)

as Web

Services

.

Ø

Research ways of

building

collaborative

Web

Services

.

Ø

Build a collaborative SVG browser

as an

example of a collaborative DOM model and as a

test bed for the general principles above.

Related Technologies

Ø DOM(W3C specifications for Document Object Model)

l Programmatic interfaces for access and manipulate structured document object l All modern browsers support the W3C DOM

Ø SVG(W3C specifications for Scalable Vector Graphics)

l A language for describing 2D vector and mixed vector/raster graphics in XML. l Static SVG part defines vector graphic component format and rendering policy. l Dynamic SVG part defines interactivity, linking, Scripting and Animation interfaces. l JavaScript binding with SVG provides rich functionalities.

Ø XML(W3C specifications for Extensible Markup Language)

l A markup language for structured information l A mechanism to identify structures in a document

Ø Web Services(W3C working group)

l Programmatic interfaces for application to application communication. JavaScript (A scripting language) l JavaScript can access and manipulate structured document such as HTML.

l Dynamic HTML ─ When used with HTML and CSS style sheet, it can make dynamic web pages. l Client side JavaScript

• Web browser (Netscape Navigator, Internet Explorer) can interpret Client side JavaScript statements

that embedded in an HTML page.

l Server side JavaScript

• When binding with SVG, JavaScript can manipulate server side computation (e.g. modify the attributes

of a DOM object)

Ø MVC(A design architecture that separate an application into Model-View-Control triads) Ø NaradaBrokering(Message passing infrastructure)

Ø XGSP(Collaborative Session Controller) Ø OO Event Model

l Event types

Why W3C DOM is important?

Ø

Document Object Model or DOM defines the object-structure of a general

document

l

Allows documents to be accessed as distributed objects

– especially as a

Web service

l

In the most general sense, everything is an object

•

Data ─ A text file, a graph, an email, a MP3 …

•

Hardware ─ A computer, a printer, a fax machine, a sensor, …

Software ─ SVG Viewer and proprietary software like

l Microsoft Word(?), PowerPoint(?) l Adobe Illustrator/Photoshop(?) l Macromedia Flash(?)…

Ø

W3C has a particular tree-like specification of Document Object Model

(W3C-DOM)

Ø

It defines

l

an application

programming interface

(API) for documents (e.g. HTML, XML

documents)

l

the

logical structure of documents

An Example of A DOM Document

A HTML file is an example of a DOM Document

body

head

h1

Hello World

html

<html>

<head>

</head>

<body>

<h1> Hello World </h1>

</body>

DOM Event Model

Ø

A generic event system

which allows

registration of event handlers and provides

basic contextual info for each event

Ø

The standard modules of events

for UI

●●●

DOM Event Flow – Tree Topology

Canvas

Menu Bar

Text box

Hello World

Window

New

Status Bar

HyperLink

Edit

File

Image

Exit

Save

Help

●●●

Registration of an event listener on anevent target

Types of events

Ø

UI events

(generated by user interaction through

an external device like mouse, keyboard etc.)

Ø

UI Logical events

(device independent UI events

such as focus change messages)

Ø

Mutation events

(which are caused by any action

that modifies the structure of the document)

Ø

Capturing

Ø

Bubbling

Web Service Model for Application

Development

W3C DOM User Interface

W3C DOM Raw (UI) Events

Application as a Web

service

W3C DOM Semantic Events

Data

User Facin

Ports

Resource Facing Ports

SVG is An Application of DOM

Ø

Scalable Vector Graphics (SVG)

l

a new XML-based language for describing two-dimensional vector and

mixed vector/raster graphics from W3C.

l

SVG 1.0 specification becomes a W3C recommendation at September

4

_{, 2001}

Ø

SVG includes a complete (DOM) and conforms to the DOM level 1

Recommendation [DOM

1].

l

D

OM is just an interface

that defines Document Object Model and

Events Model.

l

SVG is a complete implementation of DOM

.

Ø

SVG DOM

l

has a high level of compatibility and consistency with the HTML DOM

that is defined in the DOM Level 1 specification.

l

supports and incorporates many of the facilities described DOM level 2"

SVG is An Application of XML

Ø

SVG is compatible with the "Extensible Markup

Language (XML) 1.0" Recommendation [

XML10]

Ø

SVG is compatible with the "Namespaces in

XML" Recommendation [X

ML-NS]

Ø

SVG's syntax for referencing element IDs is a

compatible subset of the ID referencing syntax in

"XML Pointer Language (XPointer)" [XP

TR].

Ø

SVG content can be styled by either CSS (see

"Cascading Style Sheets (CSS) level 2"

specification [CSS

2]) o

r XSL (see "XSL

SVG – The Future

Ø

Open source framework for applications like

Macromedia Shockwave, Adobe Illustrator,

Microsoft PowerPoint.

l

Exploit general XML tools

Ø

An example for 3D generalizations.

l

X3D is a new version of VRML

Ø

New approaches to Visualization, GUI, Maps

and Geographical information systems, Games

Ø

The growing availability of broadband

Ø

An

Java open source

project of Apache.

Ø

Aimed to provide developers a set of core modules which can be

used together or individually to support specific SVG solution.

l

One of the deliverables is a full fledged

SVG browser

Ø

Batik SVG browser

fully support W3C DOM and SVG

specifications.

Ø

Batik’s Implementation Status

l

complete support of all the

static SVG features

display SVG document

•

Zoom in , zoom out, translation (scale, rotate)

hyper linking

l

Working on supporting

dynamic SVG features

•

Scripting

•

animation

SVG Rendering Process

Building a DOM tree

Ø Two major systems for representing graphics

l Raster

• In raster graphics, an image is represented as a rectangular array of picture elements or pixels. Each

pixel is represented either by its RGB color values or as an index into a list of colors.

• A bitmap is consisting of such series of pixels and usually stored in a compressed format.

• Most morden display devices are raster devices - uncompress the bitmap and transfer it to the screen. • Examples: JPEG, GIF, PNG and BMP.

l Vector

• In vector graphics, an image is discribed as a series of gemotric shapes rather than receiving a

finished set of pixels.

• Vector objects can change their shape and color by redrawing • Scalability - being scaled without loss of resolution.

• Examples: Adobe Postscript, Macromedia Flash file ".fla" and SVG

Ø They are synchronized at different point of process pipeline

l Shared SVG browser shares import port l Share Display browser shares output port

Ø Different content format

l SVG is XML format and can be processed as ordinary text l Raster files are program generated data

Ø

The following aspects of SVG are affected by

events:

Ø

Using S

VG Document Object Model (DOM),

a

script can register D

OM2 event listeners s

o that

script can be invoked when a given event

occurs.

Ø

SVG includes ev

ent attributes on

selected

elements which define script that can be

executed when a given event occurs in

association with the given element.

Ø

SVG's ani

mation elements can

be defined to

Types of SVG Events

Ø

User Interface event

l

DOMFocusIn

DOMFocusOut

DOMActivate

Ø

Mouse event

l

Click

Mousedown

Mouseup

Mouseover

Mousemove

mouseout

Ø

Key event

l

DOM_KEY_LOCATION_LEFT

DOM_KEY_LOCATION_NUMPAD

DOM_KEY_LOCATION_RIGHT

DOM_KEY_LOCATION_STANDARD

DOM_KEY_LOCATION_UNKNOWN

Ø

Mutation event

l

It is designed to allow notification of any changes to the structure of a document, including

Structure of Collaborative SVG Events

Ø

a collaborative event as an object that wraps original

SVG events with additional context information for

collaboration and Web service model.

Ø

The context information helps to guide the events

through the NaradaBrokering system to reach other

clients (subscribers in the same session).

Ø

The receivers un-wrap the collaborative event and get an

Types of Collaborative Events

Ø

UIEvents vs. semantic events

Ø

Master events vs. non-master events

Ø

Major events vs. minor events

Ø

Global events vs. local events

Ø

Collaboration as a Web Service (XGSP)

Structure of Events

Ø

An event contains information such as follows:

Ø

An original UIEvent or selected semantic events as

generated by the DOM

Ø

Event types (e.g. master/non-master, major/minor type)

Ø

Context information of the collaboration (e.g. client ID,

session/topic, windows name in a multi-SVG viewer

application, event sequence number)

Ø

Context information of the Web services specifying

application and collaboration session.

Ø

Will integrate with GXOS

Future Work

Ø

Packaging Collaborative SVG Browser

Ø

Full support of collaborative animation and

JavaScript interactivity.

Ø

Building Internet Games

Ø

Integrate fully with XGSP and

NaradaBrokering.

l

Support replay