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
[email protected], [email protected]@syr.edu, [email protected]
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
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 …
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.
Top Related