Full HTML for

Basic foilset Simple Examples and Automatic Synchronization

Given by TangoInteractive Team at Tango Tutorial Alliance 98 NCSA Illinois on April 27 98. Foils prepared April 25 98
Outside Index Summary of Material

These foils first discuss Javascript and Java Examples in Tango
We use a very Simple Chat which involves an HTML form for JavaScript
There is operational Code for these examples
The presentation concludes with discussion of Automatic Synchronization in Tango
This particular technology was developed for our sophisticated WhiteBoard/Drawing Program

Table of Contents for full HTML of Simple Examples and Automatic Synchronization

 Denote Foils where Image has important information
Denote Foils where HTML is sufficient
1 TANGO Interactive Tutorial 1) Simple Java and JavaScript Examples 2) Dynamic Synchronization in Tango
2 Summary of Simple Examples and Automatic Synchronization
3 JavaScript interface to Tango
4 HelloWorld for Tango - JavaScript Application
5 HelloWorld for Tango - Java Applet (1)
6 HelloWorld for Tango - Java Applet (2)
7 Automatic synchronization in Tango (1)
8 Automatic synchronization in Tango (2)
9 Automatic synchronization in Tango (3)

Outside Index Summary of Material

HTML version of Basic Foils prepared April 25 98

Foil 1 TANGO Interactive Tutorial 1) Simple Java and JavaScript Examples 2) Dynamic Synchronization in Tango

From Simple Examples and Automatic Synchronization Tango Tutorial Alliance 98 NCSA Illinois -- April 27 98. *
Full HTML Index
Presented by Geoffrey Fox, Marek Podgorny and TANGO team
NPAC, Syracuse University
Alliance `98, April 27th, `98
HTML version of Basic Foils prepared April 25 98

Foil 2 Summary of Simple Examples and Automatic Synchronization

From Simple Examples and Automatic Synchronization Tango Tutorial Alliance 98 NCSA Illinois -- April 27 98. *
Full HTML Index
These foils first discuss Javascript and Java Examples in Tango
We use a very Simple Chat which involves an HTML form for JavaScript
There is operational Code for these examples
The presentation concludes with discussion of Automatic Synchronization in Tango
This particular technology was developed for our sophisticated WhiteBoard/Drawing Program
HTML version of Basic Foils prepared April 25 98

Foil 3 JavaScript interface to Tango

From Simple Examples and Automatic Synchronization Tango Tutorial Alliance 98 NCSA Illinois -- April 27 98. *
Full HTML Index
For simple JavaScript applications:
  • send( String ) / receive( String )
For integration applications:
  • multiple Java applets and JavaScript functions on one HTML page and in one Tango session
  • JavaScript code used as a convenient integration environment
  • named channels for different applications
  • arbitrary messages exchanged between Java applets (fast/scripted assembly of customized applications)
  • String messages used for functions handled directly by JavaScript:
    • sendString( channel, String ) / receiveString( channel, String )
  • opaque byte arrays used for communicating applets:
    • sendBytes( channel, byte[ ] ) / receiveBytes( channel, byte[ ] )
HTML version of Basic Foils prepared April 25 98

Foil 4 HelloWorld for Tango - JavaScript Application

From Simple Examples and Automatic Synchronization Tango Tutorial Alliance 98 NCSA Illinois -- April 27 98. *
Full HTML Index
Chat application in pure HTML
open tangoTemplate.html file for editing
add HTML content at will
  • <form name="chat">
  • <input type="text" name="tty" size=18>
  • <input type="button" value="send">
  • </form>
add collaboratory functionality
  • call Tango_send(m) when Send buttom pressed
    • onclick="Tango_send( this.form.tty.value )"
  • handle Tango_receive(m) when message arrives
    • document.forms.chat.tty.value=m;
register the application in a Tango ControlApplication
HTML version of Basic Foils prepared April 25 98

Foil 5 HelloWorld for Tango - Java Applet (1)

From Simple Examples and Automatic Synchronization Tango Tutorial Alliance 98 NCSA Illinois -- April 27 98. *
Full HTML Index
Chat application in Java
create any Java class which extends TangoApplet
  • public JExamp( ) {
  • text = new TextField( );
  • setLayout( new BorderLayout( ) );
  • add( "North", text);
  • }
Now we must add on next foil Collaboratory function for this applet and register it in a Tango Control Application
HTML version of Basic Foils prepared April 25 98

Foil 6 HelloWorld for Tango - Java Applet (2)

From Simple Examples and Automatic Synchronization Tango Tutorial Alliance 98 NCSA Illinois -- April 27 98. *
Full HTML Index
add collaboratory functionality to the previous class
  • call send( byte[ ] ) when Return pressed
    • if ( ( evt.target = = text ) && ( evt.id = = Event.ACTION_EVENT ) )
    • send( stringToBytes( text.getText( ) ) );
  • handle receive( byte[ ] b ) when data arrives
    • text.setText( bytesToString( b ) );
embed the applet in an HTML page
  • <applet codebase="." archive="tm.jar,JExamp.class" code="JExamp.class" width=280 height=33 mayscript>
  • </applet>
register the page in a Tango ControlApplication
HTML version of Basic Foils prepared April 25 98

Foil 7 Automatic synchronization in Tango (1)

From Simple Examples and Automatic Synchronization Tango Tutorial Alliance 98 NCSA Illinois -- April 27 98. *
Full HTML Index
Some applications use dynamically created objects
  • existence of which needs to be synchronized
  • which themselves need to pass messages and be synchronized
Challenges:
  • replicate newly created objects in collaborating applications
  • identify all objects so they can be uniquely addressed
  • synchronize all existing objects
  • translate object references to different namespaces
  • assure integrity of the state across the session participants
Solution for Tango applets:
  • Synchronizer object implements synchronization logic
  • Updatable interface lets automatize synchronization
  • built on the top of the basic Tango message passing interface
HTML version of Basic Foils prepared April 25 98

Foil 8 Automatic synchronization in Tango (2)

From Simple Examples and Automatic Synchronization Tango Tutorial Alliance 98 NCSA Illinois -- April 27 98. *
Full HTML Index
Implementation of the synchronization mechanism:
  • objects which wish to collaborate implement Updatable interface:
    • getStateUpdate( int feature, DataOutputStream update )
    • updateState( int feature, DataInputStream update )
    • feature is a particular feature which is updated
  • when state of an object changes and synchronization is needed, object notifies the synchronization mechanism about the type of change by posting event to the Synchronizer:
    • new UpdateEvent( Updatable this, int feature )
    • special feature values UPDATE_CREATE, UPDATE_DELETE are recognized
  • the rest is taken care by the Synchronizer
HTML version of Basic Foils prepared April 25 98

Foil 9 Automatic synchronization in Tango (3)

From Simple Examples and Automatic Synchronization Tango Tutorial Alliance 98 NCSA Illinois -- April 27 98. *
Full HTML Index
Synchronizer tasks:
  • keep database of objects / maintain coherent state across the session
  • issue global IDs for objects / make translations ID-object
  • acquires and sends updates / update objects upon receiving updates
Updatable tasks:
  • decide which features shall be updated (at least UPDATE_INIT)
  • implement reading and writing of each feature
  • notify Synchronizer when and which feature has to be updated
© 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 Sun May 3 1998