11

Collaborative DOM as A Web ServiceCollaborative DOM as A Web Service

CommunityCommunity Grids LabGrids Lab at Indiana University at Indiana University

May, 2003 May, 2003 by Xiaohong Qiuby Xiaohong Qiu

Ph.D. student, CIS, Syracuse UniversityPh.D. student, CIS, Syracuse University

Community Grids Lab, Indiana UniversityCommunity Grids Lab, Indiana University

501 Morton N. St, Suite 222, Bloomington IN 47404501 Morton N. St, Suite 222, Bloomington IN 47404

xiqiu@syr.edu, xqiu@indiana.eduxiqiu@syr.edu, xqiu@indiana.edu

Presented by Xiaohong QiuPresented by Xiaohong Qiu

22

IntroductionIntroduction This foil set contains material on my research This foil set contains material on my research

between June 2000 and May 2003.between June 2000 and May 2003.

BackgroundBackground combines real world problems with combines real world problems with effort involved in seeking for an answer.effort involved in seeking for an answer.

Related TechnologiesRelated Technologies summarize some key summarize some key features of the emerging technologies such as features of the emerging technologies such as W3C DOM, W3C SVG and Web Services.W3C DOM, W3C SVG and Web Services.

Design of collaborative systemDesign of collaborative system describes describes architecture of the Collaborative DOM as A Web architecture of the Collaborative DOM as A Web Service Model.Service Model.

33

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

Advanced Research Project Agency (ARPA) to research how to build a Advanced Research Project Agency (ARPA) to research how to build a network that would withstand bomb damage. Critical applications – email network that would withstand bomb damage. Critical applications – email and ftp.and ftp.

Indexing and search services - Indexing and search services - GopherGopher, , ArchieArchie, , VeronicaVeronica, and , and WAISWAIS were were created by Internet users as the amount of information on internet grew. created by Internet users as the amount of information on internet grew.

HTTP HTTP and and HTMLHTML – CERN (Geneva). Enabled the World Wide Web. – CERN (Geneva). Enabled the World Wide Web. MosaicMosaic (1994) – first browser. developed at NCSA. forerunner of Netscape. (1994) – first browser. developed at NCSA. forerunner of Netscape.

Internet2Internet2 - operational by 1999. - operational by 1999. Distributed Operating System (1990-2003) – Distributed Operating System (1990-2003) – NFSNFS, , DCEDCE (rpc), (rpc), CorbaCorba, , COMCOM, ,

JavaJava, , Web ServicesWeb Services, , GridsGrids Peer-to-Peer Networks (2000)- Peer-to-Peer Networks (2000)- GnutellaGnutella Multimedia revolution is in process (1995-now) – Multimedia revolution is in process (1995-now) – NapsterNapster, , Video on Video on

demanddemand, , SMILSMIL, , MPEG4MPEG4, , SVGSVG, etc. , etc.

44

Interesting Research AreasInteresting Research Areas Technology Support for Technology Support for Synchronous and Asynchronous Synchronous and Asynchronous

Resource SharingResource Sharing ── e-learninge-learning e-science e-science video/audio conferencing etc.video/audio conferencing etc.

GridsGrids manage and share (typically asynchronously) manage and share (typically asynchronously) resources in a centralized fashion. resources in a centralized fashion.

Web ServicesWeb Services ── loosely coupled software components loosely coupled software components across internet interacting with messages. across internet interacting with messages.

Peer-to-peer GridsPeer-to-peer Grids ── link services, resources and clients link services, resources and clients in dynamic decentralized fashionin dynamic decentralized fashion

The system consists of a sea of message-based Services (e.g. shared The system consists of a sea of message-based Services (e.g. shared SVG as a Web Service)SVG as a Web Service)

Services linked by publish-subscribe messaging infrastructure such as Services linked by publish-subscribe messaging infrastructure such as NaradaBrokeringNaradaBrokering

55

Our GoalsOur Goals

Research approaches to Research approaches to build applicationsbuild applications (specifically W3C DOM based) (specifically W3C DOM based) as Web as Web ServicesServices..

Research ways of Research ways of building building collaborativecollaborative Web Web ServicesServices..

Build a collaborative SVG browserBuild a collaborative SVG browser as an as an example of a collaborative DOM model and as a example of a collaborative DOM model and as a test bed for the general principles above.test bed for the general principles above.

Get rich by building a Get rich by building a collaborative SVG Gamecollaborative SVG Game. .

66

Related TechnologiesRelated Technologies DOMDOM (W3C specifications for Document Object Model) (W3C specifications for Document Object Model)

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

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

XMLXML (W3C specifications for Extensible Markup Language) (W3C specifications for Extensible Markup Language) A markup language for structured informationA markup language for structured information A mechanism to identify structures in a documentA mechanism to identify structures in a document

Web ServicesWeb Services (W3C working group) (W3C working group) Programmatic interfaces for application to application communication. JavaScript (A scripting language)Programmatic interfaces for application to application communication. JavaScript (A scripting language) JavaScript can access and manipulate structured document such as HTML. JavaScript can access and manipulate structured document such as HTML. Dynamic HTML Dynamic HTML ─ ─ When used with HTML and CSS style sheet, it can make dynamic web pages. When used with HTML and CSS style sheet, it can make dynamic web pages. Client side JavaScriptClient side JavaScript

• Web browser (Netscape Navigator, Internet Explorer) can interpret Client side JavaScript statements Web browser (Netscape Navigator, Internet Explorer) can interpret Client side JavaScript statements that embedded in an HTML page.that embedded in an HTML page.

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

attributes of a DOM object)attributes of a DOM object) MVCMVC (A design architecture that separate an application into Model-View-Control triads) (A design architecture that separate an application into Model-View-Control triads) NaradaBrokeringNaradaBrokering (Message passing infrastructure) (Message passing infrastructure) XGSP XGSP (Collaborative Session Controller)(Collaborative Session Controller) OO Event Model OO Event Model

Event typesEvent types Event registration and event listener (The Observer Design Pattern)Event registration and event listener (The Observer Design Pattern) JDK awt and JFC JDK awt and JFC

77

Why W3C DOM is important?Why W3C DOM is important? Document Object Model or DOM defines the object-structure of a general Document Object Model or DOM defines the object-structure of a general

document document Allows documents to be accessed as distributed objectsAllows documents to be accessed as distributed objects – especially as a – especially as a

Web serviceWeb service In the most general sense, everything is an objectIn the most general sense, everything is an object

• Data Data ─ ─ A text file, a graph, an email, a MP3 …A text file, a graph, an email, a MP3 …• Hardware Hardware ─ A computer, a─ A computer, a printer, a fax machine, a sensor, … printer, a fax machine, a sensor, …• Software Software ─ ─ SVG Viewer and proprietary software like SVG Viewer and proprietary software like

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

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

It definesIt defines an application an application programming interfaceprogramming interface (API) for documents (e.g. HTML, XML (API) for documents (e.g. HTML, XML

documents)documents) the the logical structure of documentslogical structure of documents the way a document is accessed and manipulatedthe way a document is accessed and manipulated

88

An Example of A DOM DocumentAn Example of A DOM Document

A HTML file is an example of a DOM Document

bodyhead

h1

Hello World

html<html> <head> </head> <body> <h1> Hello World </h1> </body></html>

99

DOM Event ModelDOM Event Model

A generic event systemA generic event system which allows which allows registration of event handlers and provides registration of event handlers and provides basic contextual info for each eventbasic contextual info for each event

The standard modules of eventsThe standard modules of events for UI for UI control and document mutation control and document mutation notifications.notifications.

1010

●●●

DOM Event Flow – Tree TopologyDOM Event Flow – Tree Topology

CanvasMenu Bar

Text box

Hello World

Window

New

Status Bar

HyperLinkEditFile Image

ExitSave

Help●●●

Registration of an event listeneron an event target

Registration of an event listeneron an event target

Events bubble up Events prorogate down

1111

Types of eventsTypes of events

UI eventsUI events (generated by user interaction through (generated by user interaction through an external device like mouse, keyboard etc.)an external device like mouse, keyboard etc.)

UI Logical eventsUI Logical events (device independent UI events (device independent UI events such as focus change messages)such as focus change messages)

Mutation eventsMutation events (which are caused by any action (which are caused by any action that modifies the structure of the document)that modifies the structure of the document)

CapturingCapturing BubblingBubbling CancelableCancelable

1212

MVC ParadigmMVC ParadigmModel View Controller

Model

Controller

ViewMouse eventKeyboard events

Figure 0 MVC Model

Display

1313

Collaborative Web ServiceCollaborative Web Service

WSDisplay

WSViewer

WS Display

WS ViewerEvent

(Message)Service

Master

WSDisplay

WS Viewer

WebService

F

I

U

O

F

I

R

O

Shared Input Port (Replicated WS) Collaboration

OtherParticipants

WebService

F

I

U

O

F

I

R

O

WebService

F

I

U

O

F

I

R

O

Collaboration as a WSSet up Session with XGSP

ResourceFacing Port

1414

Web Service DOMWeb Service DOM

User Facing Ports

Web Service Application (Model)DOM Application as a Web service

W eb Service Application (Model)DOM Application as a W eb service

Remaining W 3C DOM semantic events

Control

Data

Web Service DOM

Resource Facing Ports

W eb Service Application (V iew)

W 3C DOM User Interface

Selected W 3C DOM semantic eventsW 3C DOM UIEvents

Figure 2 DOM Application as a Web Service

Rendering asMessages

Events asMessages

1515

Web Service Model for Application Development

W3C DOM User Interface

W3C DOM Raw (UI) Events

Application as a Web serviceW3C DOM Semantic Events

Data

User FacingPorts

Resource Facing Ports

Events as Messages

Rendering as Messages

View

Control

ModelNarada

Brokering

Interrupts in traditional monolithic applications become“real messages” not directly method callsNatural for collaboration and universal access

Natural inMVC Model

1616

Collaborative SVG As A Web ServiceCollaborative SVG As A Web Service

Application as a Web serviceApplication as a Web service

Participating Client

RenderingRendering

User Interface

W3C DOM Events

From Master

FromCollaborationAs a WS

Events

Application as a Web serviceApplication as a Web service

Master Client

RenderingRendering

User Interface

W3C DOM Events

To Collaborative Clients

FromCollaborationAs a WS

Events

Control flow for collaborative SVG clients

Figure 3 Control flow for collaborative SVG clients

1717

SVG is An Application of DOMSVG is An Application of DOM Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG)

a new XML-based language for describing two-dimensional vector and a new XML-based language for describing two-dimensional vector and mixed vector/raster graphics from W3C.mixed vector/raster graphics from W3C.

SVG 1.0 specification becomes a W3C recommendation at September SVG 1.0 specification becomes a W3C recommendation at September 44thth, 2001, 2001

SVG includes a complete (DOM) and conforms to the DOM level 1 SVG includes a complete (DOM) and conforms to the DOM level 1 Recommendation [DOM1]. Recommendation [DOM1].

DOM is just an interfaceDOM is just an interface that defines Document Object Model and that defines Document Object Model and Events Model. Events Model.

SVG is a complete implementation of DOMSVG is a complete implementation of DOM.. SVG DOMSVG DOM

has a high level of compatibility and consistency with the HTML DOM has a high level of compatibility and consistency with the HTML DOM that is defined in the DOM Level 1 specification. that is defined in the DOM Level 1 specification.

supports and incorporates many of the facilities described DOM level 2" supports and incorporates many of the facilities described DOM level 2" [DOM2], including the CSS object model and event handling. [DOM2], including the CSS object model and event handling.

1818

SVG is An Application of XMLSVG is An Application of XML SVG is compatible with the "Extensible Markup SVG is compatible with the "Extensible Markup

Language (XML) 1.0" Recommendation [XML10] Language (XML) 1.0" Recommendation [XML10] SVG is compatible with the "Namespaces in SVG is compatible with the "Namespaces in

XML" Recommendation [XML-NS] XML" Recommendation [XML-NS] SVG's syntax for referencing element IDs is a SVG's syntax for referencing element IDs is a

compatible subset of the ID referencing syntax in compatible subset of the ID referencing syntax in "XML Pointer Language (XPointer)" [XPTR]. "XML Pointer Language (XPointer)" [XPTR].

SVG content can be styled by either CSS (see SVG content can be styled by either CSS (see "Cascading Style Sheets (CSS) level 2" "Cascading Style Sheets (CSS) level 2" specification [CSS2]) or XSL (see "XSL specification [CSS2]) or XSL (see "XSL Transformations (XSLT) Version 1.0" [XSLT]). Transformations (XSLT) Version 1.0" [XSLT]).

1919

SVG – The FutureSVG – The Future

Open source framework for applications like Open source framework for applications like Macromedia Shockwave, Adobe Illustrator, Macromedia Shockwave, Adobe Illustrator, Microsoft PowerPoint.Microsoft PowerPoint. Exploit general XML toolsExploit general XML tools

An example for 3D generalizations.An example for 3D generalizations. X3D is a new version of VRMLX3D is a new version of VRML

New approaches to Visualization, GUI, Maps New approaches to Visualization, GUI, Maps and Geographical information systems, Gamesand Geographical information systems, Games

The growing availability of broadband The growing availability of broadband connections will encourage this future.connections will encourage this future.

2020

An An Java open sourceJava open source project of Apache. project of Apache. Aimed to provide developers a set of core modules which can be Aimed to provide developers a set of core modules which can be

used together or individually to support specific SVG solution.used together or individually to support specific SVG solution. One of the deliverables is a full fledged One of the deliverables is a full fledged SVG browserSVG browser

Batik SVG browser Batik SVG browser fully support W3C DOM and SVGfully support W3C DOM and SVG specifications.specifications.

Batik’s Implementation StatusBatik’s Implementation Status complete support of all the complete support of all the static SVG featuresstatic SVG features

• display SVG documentdisplay SVG document• Zoom in , zoom out, translation (scale, rotate)Zoom in , zoom out, translation (scale, rotate)• hyper linkinghyper linking

Working on supporting Working on supporting dynamic SVG featuresdynamic SVG features• ScriptingScripting• animationanimation

Apache Batik SVG BrowserApache Batik SVG Browser

2121

Architecture of Apache Batik SVG BrowserArchitecture of Apache Batik SVG Browser

2222

Apache Batik SVG Browser version Apache Batik SVG Browser version 1.5 Beta 51.5 Beta 5

2323

SVG Rendering ProcessSVG Rendering Process

Building a DOM tree

Rendering the GVT tree

Building a GVT tree

2424

Two major systems for representing graphicsTwo major systems for representing graphics RasterRaster

• In raster graphics, an image is represented as a rectangular array of picture elements or pixels. Each 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. 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. 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. Most morden display devices are raster devices - uncompress the bitmap and transfer it to the screen. • Examples: JPEG, GIF, PNG and BMP.Examples: JPEG, GIF, PNG and BMP.

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

finished set of pixels. finished set of pixels. • Vector objects can change their shape and color by redrawing.Vector objects can change their shape and color by redrawing.

• Scalability - being scaled without loss of resolution. Scalability - being scaled without loss of resolution. • Examples: Adobe Postscript, Macromedia Flash file ".fla" and SVG.Examples: Adobe Postscript, Macromedia Flash file ".fla" and SVG.

They are synchronized at different point of process pipelineThey are synchronized at different point of process pipeline Shared SVG browser shares import portShared SVG browser shares import port Share Display browser shares output portShare Display browser shares output port

Different content formatDifferent content format SVG is XML format and can be processed as ordinary textSVG is XML format and can be processed as ordinary text Raster files are program generated data Raster files are program generated data

Shared SVG Browser vs. Shared DisplayShared SVG Browser vs. Shared Display

2525

The following aspects of SVG are affected by The following aspects of SVG are affected by

events:events: Using Using SVG Document Object Model (DOM)SVG Document Object Model (DOM), a , a

script can register DOM2 event listeners so that script can register DOM2 event listeners so that script can be invoked when a given event script can be invoked when a given event occurs. occurs.

SVG includes event attributes on selected SVG includes event attributes on selected elements which define script that can be elements which define script that can be executed when a given event occurs in executed when a given event occurs in association with the given element. association with the given element.

SVG's animation elements can be defined to SVG's animation elements can be defined to begin or end based on events. begin or end based on events.

SVG Events

2626

Types of SVG EventsTypes of SVG Events User Interface eventUser Interface event

DOMFocusInDOMFocusIn DOMFocusOutDOMFocusOut DOMActivateDOMActivate

Mouse eventMouse event ClickClick MousedownMousedown MouseupMouseup MouseoverMouseover MousemoveMousemove mouseoutmouseout

Key eventKey event DOM_KEY_LOCATION_LEFTDOM_KEY_LOCATION_LEFT DOM_KEY_LOCATION_NUMPADDOM_KEY_LOCATION_NUMPAD DOM_KEY_LOCATION_RIGHTDOM_KEY_LOCATION_RIGHT DOM_KEY_LOCATION_STANDARDDOM_KEY_LOCATION_STANDARD DOM_KEY_LOCATION_UNKNOWNDOM_KEY_LOCATION_UNKNOWN

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

attrattr and and texttext modifications. modifications.

2727

Structure of Collaborative SVG EventsStructure of Collaborative SVG Events

a collaborative event as an object that wraps original a collaborative event as an object that wraps original SVG events with additional context information for SVG events with additional context information for collaboration and Web service model. collaboration and Web service model.

The context information helps to guide the events The context information helps to guide the events through the NaradaBrokering system to reach other through the NaradaBrokering system to reach other clients (subscribers in the same session). clients (subscribers in the same session).

The receivers un-wrap the collaborative event and get an The receivers un-wrap the collaborative event and get an SVG event that defines detailed actions on the SVG SVG event that defines detailed actions on the SVG DOM. The DOM. The ModelModel part of Web service application part of Web service application analyses the SVG event based on its type and then analyses the SVG event based on its type and then delivers the resultant rendering information to the delivers the resultant rendering information to the associated associated ViewView(s). (s).

2828

Types of Collaborative EventsTypes of Collaborative Events

UIEvents vs. semantic eventsUIEvents vs. semantic events Master events vs. non-master eventsMaster events vs. non-master events Major events vs. minor events Major events vs. minor events Global events vs. local eventsGlobal events vs. local events Collaboration as a Web Service (XGSP) Collaboration as a Web Service (XGSP)

EventsEvents

2929

Structure of EventsStructure of Events

An event contains information such as follows:An event contains information such as follows: An original UIEvent or selected semantic events as An original UIEvent or selected semantic events as

generated by the DOMgenerated by the DOM Event types (e.g. master/non-master, major/minor type)Event types (e.g. master/non-master, major/minor type) Context information of the collaboration (e.g. client ID, Context information of the collaboration (e.g. client ID,

session/topic, windows name in a multi-SVG viewer session/topic, windows name in a multi-SVG viewer application, event sequence number)application, event sequence number)

Context information of the Web services specifying Context information of the Web services specifying application and collaboration session.application and collaboration session.

Will integrate with GXOSWill integrate with GXOS GXOS …GXOS …

3030

Generate SVG files IGenerate SVG files I

3131

Generate SVG files IIGenerate SVG files II

3232

Future WorkFuture Work

Packaging Collaborative SVG BrowserPackaging Collaborative SVG Browser Full support of collaborative animation and Full support of collaborative animation and

JavaScript interactivity.JavaScript interactivity. Building Internet GamesBuilding Internet Games Integrate fully with XGSP and Integrate fully with XGSP and

NaradaBrokering.NaradaBrokering. Support replaySupport replay

Integrate with work of PDA group.Integrate with work of PDA group.