1. 1 Collaborative DOM as A Web Service Community Grids Lab at Indiana University May, 2003 by Xiaohong Qiu Ph.D. student, CIS, Syracuse University Ph.D. student, CIS, Syracuse University Community Grids Lab, Indiana University 501 Morton N. St, Suite 222, Bloomington IN 47404 xiqiu@syr.eduxiqiu@syr.edu, xqiu@indiana.edu xqiu@indiana.edu xiqiu@syr.eduxqiu@indiana.edu Presented by Xiaohong Qiu

2. 2 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.

3. 3 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.

4. 4 Interesting Research Areas  Technology Support for Synchronous and Asynchronous Resource Sharing ─ e-learning e-learning e-science e-science video/audio conferencing etc. 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) 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 Services linked by publish-subscribe messaging infrastructure such as NaradaBrokering

5. 5 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.

6. 6 Related Technologies  DOM (W3C specifications for Document Object Model) Programmatic interfaces for access and manipulate structured document object Programmatic interfaces for access and manipulate structured document object All modern browsers support the W3C DOM 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. 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.  XML (W3C specifications for Extensible Markup Language) A markup language for structured information A markup language for structured information A mechanism to identify structures in a document A mechanism to identify structures in a document  Web Services (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 ─ When used with HTML and CSS style sheet, it can make dynamic web pages. Dynamic HTML ─ When used with HTML and CSS style sheet, it can make dynamic web pages. Client side JavaScript Client side JavaScript Web browser (Netscape Navigator, Internet Explorer) can interpret Client side JavaScript statements that embedded in an HTML page.Web browser (Netscape Navigator, Internet Explorer) can interpret Client side JavaScript statements that embedded in an HTML page. Server side JavaScript Server side JavaScript When binding with SVG, JavaScript can manipulate server side computation (e.g. modify the attributes of a DOM object)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 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

7. 7 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 Allows documents to be accessed as distributed objects – especially as a Web service In the most general sense, everything is an object In the most general sense, everything is an object Data ─ A text file, a graph, an email, a MP3 …Data ─ A text file, a graph, an email, a MP3 … Hardware ─ A computer, a printer, a fax machine, a sensor, …Hardware ─ A computer, a printer, a fax machine, a sensor, … Software ─ SVG Viewer and proprietary software likeSoftware ─ 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-DOM)  It defines an application programming interface (API) for documents (e.g. HTML, XML documents) an application programming interface (API) for documents (e.g. HTML, XML documents) the logical structure of documents the logical structure of documents the way a document is accessed and manipulated the way a document is accessed and manipulated

8. 8 An Example of A DOM Document A HTML file is an example of a DOM Document bodyhead h1 Hello World html Hello World

9. 9 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.

10. 10 ●●● DOM Event Flow – Tree Topology CanvasMenu Bar Text box Hello World Window New Status Bar HyperLink EditFile Image ExitSave Help ●●● Registration of an event listener on an event target Registration of an event listener on an event target Events bubble upEvents prorogate down

11. 11 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

12. 12 MVC Paradigm

13. 13 Collaborative Web Service

14. 14 Web Service DOM

15. 15 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 Facing Ports Resource Facing Ports Events as Messages Rendering as Messages View Control Model Narada Brokering Interrupts in traditional monolithic applications become “real messages” not directly method calls Natural for collaboration and universal access Natural in MVC Model

16. 16 Collaborative SVG As A Web Service

17. 17 SVG is An Application of DOM  Scalable Vector Graphics (SVG) a new XML-based language for describing two-dimensional vector and mixed vector/raster graphics from W3C. 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 4 th, 2001 SVG 1.0 specification becomes a W3C recommendation at September 4 th, 2001  SVG includes a complete (DOM) and conforms to the DOM level 1 Recommendation [DOM1]. DOM1 DOM is just an interface that defines Document Object Model and Events Model. DOM is just an interface that defines Document Object Model and Events Model. SVG is a complete implementation of DOM. 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. 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. supports and incorporates many of the facilities described DOM level 2" [DOM2], including the CSS object model and event handling.DOM2

18. 18 SVG is An Application of XML  SVG is compatible with the "Extensible Markup Language (XML) 1.0" Recommendation [XML10] XML10  SVG is compatible with the "Namespaces in XML" Recommendation [XML-NS] XML-NS  SVG's syntax for referencing element IDs is a compatible subset of the ID referencing syntax in "XML Pointer Language (XPointer)" [XPTR]. 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]). CSS2XSLTCSS2XSLT

19. 19 SVG – The Future  Open source framework for applications like Macromedia Shockwave, Adobe Illustrator, Microsoft PowerPoint. Exploit general XML tools Exploit general XML tools  An example for 3D generalizations. X3D is a new version of VRML 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.

20. 20  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 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 complete support of all the static 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 dynamic SVG features Working on supporting dynamic SVG features ScriptingScripting animationanimation Apache Batik SVG Browser

21. 21 Architecture of Apache Batik SVG Browser

22. 22 Apache Batik SVG Browser version 1.5 Beta 5

23. 23 SVG Rendering Process Building a DOM tree Rendering the GVT tree Building a GVT tree

24. 24  Two major systems for representing graphics Raster 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.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.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 finished set of pixels.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.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 pipeline Shared SVG browser shares import port Shared SVG browser shares import port Share Display browser shares output port Share Display browser shares output port  Different content format SVG is XML format and can be processed as ordinary text SVG 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 Display

25. 25  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 Document Object Model (DOM)DOM2 event listenersSVG Document Object Model (DOM)DOM2 event listeners  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. event attributesevent attributes  SVG's animation elements can be defined to begin or end based on events. animation elementsanimation elements SVG Events

26. 26 Types of SVG Events  User Interface event DOMFocusIn DOMFocusIn DOMFocusOut DOMFocusOut DOMActivate DOMActivate  Mouse event Click Click Mousedown Mousedown Mouseup Mouseup Mouseover Mouseover Mousemove Mousemove mouseout mouseout  Key event DOM_KEY_LOCATION_LEFT DOM_KEY_LOCATION_LEFT DOM_KEY_LOCATION_NUMPAD DOM_KEY_LOCATION_NUMPAD DOM_KEY_LOCATION_RIGHT DOM_KEY_LOCATION_RIGHT DOM_KEY_LOCATION_STANDARD DOM_KEY_LOCATION_STANDARD DOM_KEY_LOCATION_UNKNOWN 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. It is designed to allow notification of any changes to the structure of a document, including attr and text modifications.

27. 27 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).

28. 28 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

29. 29 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 … GXOS …

30. 30 Generate SVG files I

31. 31 Generate SVG files II

32. 32 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 Support replay  Integrate with work of PDA group.