Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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 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