Creating Dynamic Thin-Client User-Interfaces with Flash and Java

Creating Dynamic Thin-Client Creating Dynamic Thin-Client User-Interfaces with Flash and User-Interfaces with Flash and

JavaJava

Brad Neuberg, bneuberg@randomwalk.com

The Problem & MotivationThe Problem & Motivation

The Problem: Find a new rendering engine for Java.

Motivation: Java is a fabulous networking language and “model” language, but is a lousy “display” language.

Problems with Java’s Current Problems with Java’s Current Rendering Engine (JRE 1.2.2)Rendering Engine (JRE 1.2.2)Large (many megabytes)SlowNot truly cross-platform (disparate support

across platforms)No installed base (Sun has been terrible

with bundling deals

Requirements for a New Requirements for a New Rendering EngineRendering Engine

1) Must be cross-platform

2) Must be very fast

3) Must be small

4) Can be integrated well with Java

5) Supports the “new way” of creating UIs

6) Creates good looking, dynamic UIs

7) Easy to work with

The “New Way” to Create The “New Way” to Create User-InterfacesUser-Interfaces

First appeared with HTML, similar to Model-View-Controller

User-interface is completely “unhooked” from behavior of program

Designer draws and creates user-interface using some tools (Dreamweaver, Director, etc.)

Program “hooks onto” UI to control it

The “New Way” to Create The “New Way” to Create User-Interfaces (Continued)User-Interfaces (Continued)

Example: JSP file has UI which “calls” JavaBeans for behavior.

Advantages of this New ModelAdvantages of this New Model

Can offer great productivityCreates much better-looking UIsOffers greater flexibility to evolve UIsNo throwaway prototype UI

Candidates for the New Candidates for the New Rendering EngineRendering Engine

DHTML + JavaScript– DHTML totally incompatible across browsers– Even IE for Mac and IE for Windows have

different programming models– Slow– JavaScript is terrible for large-scale engineering– JavaScript also has few good built-in libraries

Candidates for the New Candidates for the New Rendering Engine (Continued)Rendering Engine (Continued)DHTML + Java through IBM’s DirectDom

(formally Weblets) Toolkit– Allows Java to control browser HTML

elements– Promising, but still at alpha-level– Large download (~1.5 megs)

Candidates for the New Candidates for the New Rendering Engine (Continued)Rendering Engine (Continued)Servlet/JSP generated HTML

– No downloads– Slow trips back to server– Limited user-interface ability

Candidates for the New Candidates for the New Rendering Engine (Continued)Rendering Engine (Continued) Mozilla

– XUL (eXtensible UI Language) allows for UIs that are controlled by Java

– Very cross-platform (available for Linux, Windows, Mac, Solaris, HP-UX, BeOS, etc.)

– Still unstable and alpha-level– Large Download (~2 - ~15 megs, depending on number

of components)– Sluggish– Promising, but not mature yet

Candidates for the New Candidates for the New Rendering Engine (Continued)Rendering Engine (Continued) SVG (Scalable Vector Graphics) through Adobe’s

Plugin controlled by DirectDom– Wonderful, easy programming model– SVG is a standard– Standard is still immature, though– Viewers are slow– Large download – SVG plugin (~3 megs) + DirectDom

(~1.5 megs)– Both SVG plugin & Direct Dom are alpha-level– No tool support to create SVG files

Candidates for the New Candidates for the New Rendering Engine (Continued)Rendering Engine (Continued)JRE 1.3

– Much faster than previous JREs, but still not fast enough

– Swing is now truly mature with JRE 1.3– Large download (~5 megs)– Still beta– Major memory requirements for Swing apps

Candidates for the New Candidates for the New Rendering Engine (Continued)Rendering Engine (Continued) Flash 4 Plugin + Java 1.1 Native Browser VM

– Flash plugin very ubiquitous (on about ~85% of browsers)

– Flash plugin is extremely small download (~150K)– Flash is extremely cross-platform (Flash 4 plugin

available for Windows 95/98/NT, Mac, Solaris, Linux, and Irix)

– Flash is very fast

Candidates for the New Candidates for the New Rendering Engine (Continued)Rendering Engine (Continued) Flash 4 Plugin + Java 1.1 Native Browser VM

(Continued)– Flash has advanced rendering engine (anti-aliased text,

cross-platform fonts, alpha-channel/transparency, text-fields, sprites, tweening, etc.)

– Flash has very small compressed files– Easy to create using Macromedia Flash Authoring

application– Flash is well-known to designers

What is Flash?What is Flash?

Binary vector based format that supports animation, interactivity, and text-rendering

Created with an authoring tool named FlashVector format offers small, fast downloads,

screen-size independence, easy conversion to print-format, and animation

Flash ExamplesFlash Examples

Eye4U (shows speed)Balthaser (shows text-effects and UI

widgets)Yugop Scrolling UI (shows UI widgets)FlashZone Action Demo (shows UI

widgets)Romeo Design (shows multimedia)

FlashFlash (advanced rendering) (advanced rendering)++

JavaJava (advanced networking (advanced networking and programming)and programming)

==Killer cross-platform Killer cross-platform

solutionsolution

Flash/Java IntegrationFlash/Java Integration

1. Allow Java to call methods on Flash Plugin (Done)

2. Allow Flash to call Java methods and create new Java instances (80% Done)

3. Build on (1) to give the illusion that objects in Flash are actually Java objects (TBD)

Allow Java to Call Methods on Allow Java to Call Methods on Flash PluginFlash Plugin

The Flash Plugin exposes several methods to JavaScript– Play()– GetVariable(varName)– GotoFrame(frameNumber)– Etc.

Allow Java to Call Methods on Allow Java to Call Methods on Flash Plugin (Continued)Flash Plugin (Continued)

Made JavaScript and Java wrapper around plugin, using LiveConnect

LiveConnect allows JavaScript to call Java, and vice-versa

Most people assume it’s only supported in Netscape, but it is also completely compatible with IE

Allow Java to Call Methods on Allow Java to Call Methods on Flash Plugin (Continued)Flash Plugin (Continued)

Example use of FlashPlugin class:import org.twoofdiscs.flash.FlashPlugin;

import org.twoofdiscs.flash.MainController;

public class AddressBook {

public void displayAddressBook() {

// get FlashPlugin

FlashPlugin plugin = MainController.getFlashPlugin();

plugin.TCallLabel("/", "DISPLAY_ADDRESSBOOK");

}

}

Allow Flash to call Java Allow Flash to call Java methods and create new Java methods and create new Java

instancesinstancesFlash has a light-weight scripting language

called ActionScriptActionScript has a command call

FSCommand(String command, String arguments)

This command can be used to call external JavaScript functions

Allow Flash to call Java Allow Flash to call Java methods and Create New methods and Create New

Java Instances (Continued)Java Instances (Continued)

Created reflective Java and JavaScript glue to let Flash FSCommands call Java methods and create Java objects

Allow Flash to Call Java Allow Flash to Call Java Methods and Create New Methods and Create New

Java Instances (Continued)Java Instances (Continued)

Creating Java Object from Flash:– FSCommand(‘org.twoofdiscs.demo.AddressBook

myAddressBook = new org.twoofdiscs.demo.AddressBook(“Brad Neuberg”)’)

org.twoofdiscs.demo.AddressBook myAddressBook = new

org.twoofdiscs.demo.AddressBook(“Brad Neuberg”)- Java object to create

Allow Flash to Call Java Allow Flash to Call Java Methods and Create New Methods and Create New

Java Instances (Continued)Java Instances (Continued) Calling Java Methods from Flash

– FSCommand(‘myAddressBook.getContacts()’, ‘/someTarget:var1, true, /, RETURN_RESULT_READY’

– Stop

FSCommand(‘myAddressBook.getContacts()’ – Gives instance name of previously created Java object and method to run

/someTarget:var1, true, /, RETURN_RESULT_READY - Specifies name of Flash variable to put results into, whether the results are an array, and the movie target and label to restart at

Give the Illusion that Objects Give the Illusion that Objects in Flash are Actually Java in Flash are Actually Java

ObjectsObjects Will allow one to define a Java interface:public interface BankSummary { public int getUsersChoice(); public void resetColumns();} Then, a Flash compiler will be run:

– java org.twoofdiscs.flash.callingflash.FlashCompile BankSummary

Give the Illusion that Objects Give the Illusion that Objects in Flash are Actually Java in Flash are Actually Java

Objects (Continued)Objects (Continued)

This will generate a Flash file, that can be imported into a Flash movie

This Flash movie will now appear to have an object named BankSummary that can be created, cloned, and have methods called on just like an ordinary Java object.

Give the Illusion that Objects Give the Illusion that Objects in Flash are Actually Java in Flash are Actually Java

Objects (Continued)Objects (Continued)

The Java will have no clue that it is talking to Flash

Similar to CORBA proxies

The FutureThe Future

As Java 2D speed increases, the Flash engine can be written in Java

An open-source Java Flash engine is already available

Everything will be able to remain the sameWill make it possible to embed Swing

components into the GUI where appropriate