Full HTML for

Basic foilset Architecture and Implementation of JavaScript Shared Browser

Given by Geoffrey C. Fox at Tango Group Seminar on 26 March 99. Foils prepared 26 March 99
Outside Index Summary of Material

We describe the latest JavaScript shared browser which builds on the old WebWisdom system as well the newer production Java shared browser
We describe architecture and some of the key JavaScript concepts including event handlers and signed scripts
We describe high level JSSB event structure and ability to selectively trap, archive and replay
We finish by noting this as a a "flawed" model of what could be possible in sharing rich objects and point out importance for universal access

Table of Contents for full HTML of Architecture and Implementation of JavaScript Shared Browser

 Denote Foils where Image Critical
Denote Foils where HTML is sufficient
1 JavaScript Shared Bowser in TangoInteractive Architecture and Implementation
2 Abstract of Shared Browser Presentation
3 Basic JSSB Architecture
4 JSSB JavaScript Shared Browser
5 Some Cosmic Features of JSSB
6 Some Technical Difficulties
7 Technical Approach of JSSB
8 Is a variable defined?
9 Some Needed JavaScript Technologies
10 onUnload onLoad Events
11 Event Model in JSSB
12 Events have a Bunch of Properties
13 Other Capabilities of Event Package
14 Use of Events in JSSB
15 What Can, Will be or May be Shared
16 Archiving sessions
17 Futures

Outside Index Summary of Material

HTML version of Basic Foils prepared 26 March 99

Foil 1 JavaScript Shared Bowser in TangoInteractive Architecture and Implementation

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Geoffrey Fox NPAC Syracuse University
111 College Place
Syracuse
New York
13244-4100
gcf@npac.syr.edu
HTML version of Basic Foils prepared 26 March 99

Foil 2 Abstract of Shared Browser Presentation

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
We describe the latest JavaScript shared browser which builds on the old WebWisdom system as well the newer production Java shared browser
We describe architecture and some of the key JavaScript concepts including event handlers and signed scripts
We describe high level JSSB event structure and ability to selectively trap, archive and replay
We finish by noting this as a a "flawed" model of what could be possible in sharing rich objects and point out importance for universal access
HTML version of Basic Foils prepared 26 March 99

Foil 3 Basic JSSB Architecture

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Null Window Holds All
Permanent
Data
Tango
Launches and Positions auxiliary windows
Cannot be signed Cannot do SetTimeout
(has LiveConnect restrictions)
Clock and Event Record
Position Control Bar
Can be Destroyed without restarting
Tango Session
HTML version of Basic Foils prepared 26 March 99

Foil 4 JSSB JavaScript Shared Browser

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Originally we used WebWisdom which was a specialized JavaScript Shared Browser
  • Master "knew" URL of pages to be shared and sent this to nonmaster
  • Very precise but required preparation which limited its utility
Current Java SB determines URL changes by inspecting URL on Master in a "tight loop"
New JSSB uses same strategy but can add capabilities by inspecting further document properties such as forms and links
  • One can combine new JSSB with old WebWisdom ideas but this is not implemented yet
  • Note WebWisdom strategy is natural whenever one can control pages as when made from templates (as in WebWisdomNT)
HTML version of Basic Foils prepared 26 March 99

Foil 5 Some Cosmic Features of JSSB

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Web Pages can access general server side resources which can either be specified by URL (web-linked database) or by data (input in form and/or calculated by JavaScript handlers) and URL.
  • So JSSB shares server side objects
Sharing forms and links and implied JavaScript generalizes to sharing the web page "object properties"
Thus JSSB becomes (TangoInteractive) synchronous sharing technology for W3C DOM (Document Object Model)
  • So JSSB shares client side objects
There are some "standalone" capabilities of JSSB on a single machine with and without TangoInteractive
  • viewing JSSB as either a monitor or as an "high level interface" to the DOM
HTML version of Basic Foils prepared 26 March 99

Foil 6 Some Technical Difficulties

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Pages can change even if URL does not
  • Frames
  • CGI Scripts with POST mechanism
  • Reloading Page
  • Resizing Page
  • Client Side JavaScript
Pages can change due to:
  • Action within page (possibly a different frame)
  • Action from browser controls
Netscape allows no (known to me) rigorous detection of page changes
HTML version of Basic Foils prepared 26 March 99

Foil 7 Technical Approach of JSSB

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Allow WebWisdom pages defined as those with an internal structure interfacing to JSSB
  • These pages register themselves with JSSB
  • They signify "pageloaded" to JSSB
  • They allow special event data channels (pointer changes, other DHTML as in card games)
  • Potentially transfer data (quizzes, glossary items etc. to JSSB)
Allow general pages using heuristics to best identify relevant actions
  • Detect unload, existence of document properties
HTML version of Basic Foils prepared 26 March 99

Foil 8 Is a variable defined?

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
One must NEVER access an undefined variable
  • if in JavaScript that is linked to LiveConnect, one gets a Java error which requires restarting Netscape .....
  • If in less sensitive JavaScript, execution of script stops and action unpredictable
Until page fully formed, any of its properties can be undefined
Modern JavaScript allows one to test if variables are defined and so avoid these errors
in a.b.c.d.e type reference, one must first test if a exists, then b, then ....
WWutility.js includes
  • WW_isdefined(property) returns true if argument is defined as a property or method
  • WW_isitawindow(possibleframe) returns true if argument is a window or frame
HTML version of Basic Foils prepared 26 March 99

Foil 9 Some Needed JavaScript Technologies

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Signed Scripts to allow one to read data from general web pages
  • and also to make control bar always on top and narrow
Ability to "capture" events and either
  • take a snapshot of their properties to send to nonmaster
  • choose whether or not to accept default action (nonmaster must use cloneurl button to play around with page, most mouse clicks ignored on shared page)
Most important events are CLICK CHANGE but potentially others (MOUSEOVER MOUSEOUT ONLOAD ONUNLOAD)
HTML version of Basic Foils prepared 26 March 99

Foil 10 onUnload onLoad Events

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
With <body onload="signifyload()" > signifyload is called when page is fully loaded and DOM fully constructed
  • Seemingly can NOT reliably capture onload event as needs to be reset for each page
  • Instead for general pages use if(WW_isdefined(document.forms)) etc.
  • Note we can always detect unload of previous page ....
  • WebWisdom pages all have an onload event handler which inter alia registers with JSSB
One can either
  • a) set onunload handler of general pages after they are loaded and make this handler signify
  • b) set framewindow.WW_dynamicvariable = 1 (say) and then page is unloaded after one finds this variable undefined
HTML version of Basic Foils prepared 26 March 99

Foil 11 Event Model in JSSB

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
JSSB implements the "shared event" of collaboration!
Major Events are page or frame loads
Minor Events are form button clicks, pointer movement etc.
HTML version of Basic Foils prepared 26 March 99

Foil 12 Events have a Bunch of Properties

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Events have properties which are defined in Wwjstangoevent.js.
This includes functions to print events either to Java console or to a spawned web browser page
This allows one to specify type (string, integer ..) of properties
This allows one to allow an event to include arrays of "child" events
HTML version of Basic Foils prepared 26 March 99

Foil 13 Other Capabilities of Event Package

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Serialize events as an Ascii string -- used to transmit via TangoInteractive and to archive events as values of hidden fields in History Page
  • "escape" values of string properties
  • recursively allow "child events" (arrays)
Deserialize, Initialize, Clone, Compare .....
  • Compare events to remove redundant heartbeats
Should probably be done using XML but currently simple adhoc protocol
  • there is a JavaScript XML parser
HTML version of Basic Foils prepared 26 March 99

Foil 14 Use of Events in JSSB

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
All major events are generated from minor events
  • Directly if minor event specifies a new URL
  • Indirectly if minor event specifies a form or URL click
  • Need heuristic in "general pages" to link major events to minor events
Minor events are sent by master via Tango to nonmasters
Minor events are NOT immediately processed in nonmaster but rather queued
  • otherwise events such as "set form text field" must be thrown away if page not ready to receive
Queues processed in two ways
  • WebWisdom minor events are queued in JSSB but processed in WebWisdom page that uses them
  • Other minor events are processed in order by JSSB in same loop that inspects page URL's
HTML version of Basic Foils prepared 26 March 99

Foil 15 What Can, Will be or May be Shared

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Clicks on frames/layers if on form/link
  • Not clear to me if can or should shared "captured clicks on general pages"
General clicks on WebWisdom Pages implying very application specific actions
Could share mouseover, mouseout ...
Can veto clicks or other events on nonmaster side
  • Don't know how to veto changes on nonmaster
Form Contents at any time
  • can reload any dump at any time
Resizing so master and nonmaster have same scaling
Scrolling
Sharing can be customized from dialog window
Note JSSB knows where each nonmaster is in event queue and has information on download times
  • This will be sent to master to produce status display
JSSB does monitor nonmaster page to detect unwanted page changes
HTML version of Basic Foils prepared 26 March 99

Foil 16 Archiving sessions

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
One can archive a session by "saving from Netscape" the History Page where all events (or a subset) are recorded in serialized fashion in hidden fields
Session can be restored (or added to existing events) by loading history page from a local file with archived information
Note events include timing information and so archives should be linkable to LecCorder
Sessions can be replayed from master or nonmaster either locally or for broadcast
HTML version of Basic Foils prepared 26 March 99

Foil 17 Futures

From Architecture and Implementation of JavaScript Shared Browser Tango Group Seminar -- 26 March 99. *
Full HTML Index
Web pages have a rich set of properties and events inducing (or indicating) their change
  • Current set up is incomplete and different between Netscape and MicroSoft
W3C DOM is gradually defining a more elegant structure but unclear that they have got it right
TangoInteractive with its JavaScript API is one of most serious tests
We can use nonmaster customization to support user dependent rendering and so achieve universal (cross disability) access
  • As a given foil is pulled down by teacher, one visually handicapped student gets audio version, while somebody stuck on a low bandwidth network gets the low resolution version
  • Quite interesting to support multiple views of same page/event on a single machine
© Northeast Parallel Architectures Center, Syracuse University, npac@npac.syr.edu

If you have any comments about this server, send e-mail to webmaster@npac.syr.edu.

Page produced by wwwfoil on Fri Mar 26 1999