Transcript Collaborative DOM as a Web Service by

Collaborative DOM as A Web Service
Presented by Xiaohong Qiu
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
[email protected], [email protected]
Community Grids Lab at Indiana University
1
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
architecture of the Collaborative DOM as A Web
Service Model.
2
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
demand, SMIL, MPEG4, SVG, etc.
3
Interesting Research Areas

Technology Support for Synchronous and Asynchronous
Resource Sharing ─



e-learning
e-science
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


The system consists of a sea of message-based Services (e.g. shared
SVG as a Web Service)
Services linked by publish-subscribe messaging infrastructure such as
NaradaBrokering
4
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.
 Get rich by building a collaborative SVG Game.
5
Related Technologies








DOM (W3C specifications for Document Object Model)

Programmatic interfaces for access and manipulate structured document object

All modern browsers support the W3C DOM
SVG (W3C specifications for Scalable Vector Graphics)

A language for describing 2D vector and mixed vector/raster graphics in XML.

Static SVG part defines vector graphic component format and rendering policy.

Dynamic SVG part defines interactivity, linking, Scripting and Animation interfaces.

JavaScript binding with SVG provides rich functionalities.
XML (W3C specifications for Extensible Markup Language)

A markup language for structured information

A mechanism to identify structures in a document
Web Services (W3C working group)

Programmatic interfaces for application to application communication. JavaScript (A scripting language)

JavaScript can access and manipulate structured document such as HTML.

Dynamic HTML ─ When used with HTML and CSS style sheet, it can make dynamic web pages.

Client side JavaScript
• Web browser (Netscape Navigator, Internet Explorer) can interpret Client side JavaScript statements
that embedded in an HTML page.

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

Event types

Event registration and event listener (The Observer Design Pattern)

JDK awt and JFC
6
Why W3C DOM is important?

Document Object Model or DOM defines the object-structure of a general
document


Allows documents to be accessed as distributed objects – especially as a
Web service
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





Microsoft Word(?), PowerPoint(?)
Adobe Illustrator/Photoshop(?)
Macromedia Flash(?)…
W3C has a particular tree-like specification of Document Object Model
(W3C-DOM)
It defines



an application programming interface (API) for documents (e.g. HTML, XML
documents)
the logical structure of documents
the way a document is accessed and manipulated
7
An Example of A DOM Document
<html>
<head>
</head>
<body>
<h1> Hello World </h1>
</body>
</html>
html
head
body
h1
Hello World
A HTML file is an example of a DOM Document
8
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
control and document mutation
notifications.
9
DOM Event Flow – Tree Topology
Events bubble up
Registration of
an event listener
on an event target
File
New
Window
Events prorogate down
Menu Bar
Edit
Save ●●●
●●●
Exit
Canvas
Help
Text box
Hello World
Image
Status Bar
HyperLink
Registration of
an event listener
on an event target
10
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
Cancelable
11
MVC Paradigm
Model View Controller
Model
Controller
Mouse event
Keyboard events
View
Display
Figure 0 MVC Model
12
Collaborative Web Service
Shared Input Port (Replicated WS) Collaboration
Collaboration as a WS
Set up Session with XG SP
Resource
Facing Port
U
R
F
I
O
F
Web
Service
I
O
WS
V iewer
WS
Display
Master
U
R
F
Event
(Message)
Service
I
O
I
O
I
O
F
Web
Service
I
O
WS
V iewer
WS
Display
Ot her
Participants
U
R
F
F
Web
Service
WS
V iewer
WS
Display
13
Web Service DOM
Web Service DOM
Data
Resource Facing P orts
W eb S ervice Application (Model)
DO
Web
M Application
Service Application
as a W eb service
(Model)
Remaining
W 3C DO M as
semantic
DOM Application
a Webevents
service
User Facing P orts
Control
Events as
Messages
Rendering as
Messages
W eb S ervice Application (V iew )
S elected W 3C DO M semantic events
W 3C DO M UIE vents
W 3C DO M User Interface
14
Figure 2 DOM Application as a Web Service
Web Service Model for Application Development
Data
Resource Facing Ports
Application as a Web service
W3C DOM Semantic Events
Model
Narada
Brokering
User Facing
Ports
Events as
Messages
Rendering as
Messages
Control
Natural in
MVC Model
W3C DOM Raw (UI) Events
W3C DOM User Interface
View
Interrupts in traditional monolithic applications become
“real messages” not directly method calls
Natural for collaboration and universal access
15
Collaborative SVG As A Web Service
Control flow for collaborative SVG clients
From
Collaboration
As a WS
Application as a Web service
Application as a Web service
Events
Rendering
From Master
W3C DOM Events
User Interface
Participating Client
From
Collaboration
As a WS
Application as a Web service
Application as a Web service
Events
Rendering
To Collaborative Clients
W3C DOM Events
User Interface
Master Client
16
SVG is An Application of DOM

Scalable Vector Graphics (SVG)



SVG includes a complete (DOM) and conforms to the DOM level 1
Recommendation [DOM1].



a new XML-based language for describing two-dimensional vector and
mixed vector/raster graphics from W3C.
SVG 1.0 specification becomes a W3C recommendation at September
4th, 2001
DOM is just an interface that defines Document Object Model and
Events Model.
SVG is a complete implementation of DOM.
SVG DOM


has a high level of compatibility and consistency with the HTML DOM
that is defined in the DOM Level 1 specification.
supports and incorporates many of the facilities described DOM level 2"
[DOM2], including the CSS object model and event handling.
17
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 [XML-NS]
 SVG's syntax for referencing element IDs is a
compatible subset of the ID referencing syntax in
"XML Pointer Language (XPointer)" [XPTR].
 SVG content can be styled by either CSS (see
"Cascading Style Sheets (CSS) level 2"
specification [CSS2]) or XSL (see "XSL
Transformations (XSLT) Version 1.0" [XSLT]).
18
SVG – The Future

Open source framework for applications like
Macromedia Shockwave, Adobe Illustrator,
Microsoft PowerPoint.


Exploit general XML tools
An example for 3D generalizations.

X3D is a new version of VRML

New approaches to Visualization, GUI, Maps
and Geographical information systems, Games
 The growing availability of broadband
connections will encourage this future.
19
Apache Batik SVG Browser


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.



One of the deliverables is a full fledged SVG browser
Batik SVG browser fully support W3C DOM and SVG
specifications.
Batik’s Implementation Status

complete support of all the static SVG features
• display SVG document
• Zoom in , zoom out, translation (scale, rotate)
• hyper linking

Working on supporting dynamic SVG features
• Scripting
• animation
20
Architecture of Apache Batik SVG Browser
21
Apache Batik SVG Browser version
1.5 Beta 5
22
SVG Rendering Process
Building a DOM tree
Building a GVT tree
Rendering the GVT tree
23
Shared SVG Browser vs. Shared Display

Two major systems for representing graphics

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.

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

Shared SVG browser shares import port

Share Display browser shares output port

Different content format

SVG is XML format and can be processed as ordinary text

Raster files are program generated data
24
SVG Events

The following aspects of SVG are affected by
events:
 Using SVG Document Object Model (DOM), a
script can register DOM2 event listeners so that
script can be invoked when a given event
occurs.
 SVG includes event attributes on selected
elements which define script that can be
executed when a given event occurs in
association with the given element.
 SVG's animation elements can be defined to
begin or end based on events.
25
Types of SVG Events

User Interface event




Mouse event







Click
Mousedown
Mouseup
Mouseover
Mousemove
mouseout
Key event






DOMFocusIn
DOMFocusOut
DOMActivate
DOM_KEY_LOCATION_LEFT
DOM_KEY_LOCATION_NUMPAD
DOM_KEY_LOCATION_RIGHT
DOM_KEY_LOCATION_STANDARD
DOM_KEY_LOCATION_UNKNOWN
Mutation event

It is designed to allow notification of any changes to the structure of a document, including
attr and text modifications.
26
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
SVG event that defines detailed actions on the SVG
DOM. The Model part of Web service application
analyses the SVG event based on its type and then
delivers the resultant rendering information to the
associated View(s).
27
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)
Events
28
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

GXOS …
29
Generate SVG files I
30
Generate SVG files II
31
Future Work
 Packaging
Collaborative SVG Browser
 Full support of collaborative animation and
JavaScript interactivity.
 Building Internet Games
 Integrate fully with XGSP and
NaradaBrokering.

Support replay
 Integrate
with work of PDA group.
32