Applet-JAX

The title Applet-JAX is courtesy of Hans Muller, who (curse him) thought it up instead of me. What a fabulous title.

Do you ever get tired of seeing the applets blow this gray, or even white, rectangle through the middle of your browser?

Do you ever wish they could be more of a player in dynamic web applications, with the ability to toggle their visibility, or resize themselves as appropriate, or move around on the page?

Welcome to Applet-JAX. Through some simple and long-existing functionality in the Java-JavaScript communication layer, we can easily send events from an Applet to the web page telling it to do the same things with the applet area that it already does with HTML areas.

The key to these techniques (at least the way I implemented them) is to put the applet in a DIV container (which can then be manipulated just like any other DIV on the page), to name the DIV and APPLET elements (so that they can be retrieved and modified easily in the DOM), and to use simple JavaScript to alter the HTML elements (Java does the logic of what/how to alter, JavaScript merely manipulates the DOM). Note that Java has the DOM API which is another way to accomplish some of this stuff (versus using JavaScript); I just went the JS route because that's where I've done most of my DOM hacking so far.

Examples of Applet-JAX effects we could achieve include:

• Toggling an applet's visibility: We could do this either by changing the contents of a container div (to include or exclude the applet tag) or by changing the value of the visibility style on the div.
• Changing an applet's size: We could do this by changing the applet's width/height parameters in the tag itself
• Moving an applet around: We could do this by changing the position of a container div.

In the demo on this page, I demonstrate sample solutions to the first two items; toggling the applet's visibility and size. (The third is also quite achievable; I just didn't happen to do it here in this demo). The demo also does some animation stuff (seemed to fit what I was after here, but animations are also much on my mind these days).

The source code consists of this HTML file and two .java files: Yapplet.java and HeadlineViewer.java. Yapplet simply sets up the applet itself (including acquiring the JSObject needed to communicate to the JavaScript functions on the HTML page) and creates the HeadlineViewer class. HeadlineViewer runs some simple animations that add and remove Strings from a scrolling list of headlines.

The functionality here could be much more involved and the applet could obviously be more interesting (although I'm partial to the headlines, myself). The point of the demo is not to say "Do This", but rather "Here is how you might do something like this; please check out the techniques and do something far more interesting."

The Demo: The demo is a simple scrolling list of "headlines", where the list of current headlines and size of the applet are both updated on an ongoing basis. To run the demo, simply click on the Start Applet button at the top of the page. The button will change to "Stop Applet", which can then be clicked to Stop the applet (make it invisible).

Caveats/Constraints/Lame Excuses:

• Cross-Browser issues: I got this to work in both IE (6 and 7) and Firefox (1.0.7 and 1.5.0.7). I also tried it on both XP and Vista. I did see some timing issues with FireFox, which led to some choppy animation artifacts. A workaround that seemed to work was to simply Stop the applet (click the button) and Start it again. I can easily believe that there are other browsers out there that need slightly different JavaScript, JSObject, DOM, or other code in order to do what I'm trying to do. If you see odd/disfunctional behavior on a particular browser, feel free to comment below and I'll see if I can fix it. (posting a fix wouldn't be horrible, either).
• JRE 5.0 required: I compiled the applet (and the Timing Framework, which it depends upon) with JDK 5.0, so you'll need that version of Java in your browser in order to see this work.

That's it; let me know if you see problems, or have suggestions on this. I'm working on some other stuff that' way cooler, but I wanted to get this out there to start the conversation.