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

1. Creating Dynamic Thin-Client User-Interfaces with Flash and Java Brad Neuberg, bneuberg@randomwalk.com

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

3. Problems with Java’s Current Rendering Engine (JRE 1.2.2) • Large (many megabytes) • Slow • Not truly cross-platform (disparate support across platforms) • No installed base (Sun has been terrible with bundling deals

4. Requirements for a New Rendering Engine • Must be cross-platform • Must be very fast • Must be small • Can be integrated well with Java • Supports the “new way” of creating UIs • Creates good looking, dynamic UIs • Easy to work with

5. The “New Way” to Create User-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

6. The “New Way” to Create User-Interfaces (Continued) • Example: JSP file has UI which “calls” JavaBeans for behavior.

7. Advantages of this New Model • Can offer great productivity • Creates much better-looking UIs • Offers greater flexibility to evolve UIs • No throwaway prototype UI

8. Candidates for the New Rendering 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

9. Candidates for the New 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)

10. Candidates for the New Rendering Engine (Continued) • Servlet/JSP generated HTML • No downloads • Slow trips back to server • Limited user-interface ability

11. Candidates for the New 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

12. Candidates for the New 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

13. Candidates for the New 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

14. Candidates for the New 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

15. Candidates for the New 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

16. What is Flash? • Binary vector based format that supports animation, interactivity, and text-rendering • Created with an authoring tool named Flash • Vector format offers small, fast downloads, screen-size independence, easy conversion to print-format, and animation

17. Flash 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)

18. Flash (advanced rendering)+Java (advanced networking and programming)=Killer cross-platform solution

19. Flash/Java Integration • Allow Java to call methods on Flash Plugin (Done) • Allow Flash to call Java methods and create new Java instances (80% Done) • Build on (1) to give the illusion that objects in Flash are actually Java objects (TBD)

20. Allow Java to Call Methods on Flash Plugin • The Flash Plugin exposes several methods to JavaScript • Play() • GetVariable(varName) • GotoFrame(frameNumber) • Etc.

21. Allow Java to Call Methods on 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

22. Allow Java to Call Methods on 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"); } }

23. Allow Flash to call Java methods and create new Java instances • Flash has a light-weight scripting language called ActionScript • ActionScript has a command call FSCommand(String command, String arguments) • This command can be used to call external JavaScript functions

24. Allow Flash to call Java methods and Create New Java Instances (Continued) • Created reflective Java and JavaScript glue to let Flash FSCommands call Java methods and create Java objects

25. Allow Flash to Call Java Methods and Create New 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

26. Allow Flash to Call Java Methods and Create New 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

27. Give the Illusion that Objects in Flash are Actually Java Objects • 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

28. Give the Illusion that Objects in Flash are Actually Java 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.

29. Give the Illusion that Objects in Flash are Actually Java Objects (Continued) • The Java will have no clue that it is talking to Flash • Similar to CORBA proxies

30. The 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 same • Will make it possible to embed Swing components into the GUI where appropriate