Wednesday, September 7, 2011

Loading Flash and Java Applets via Javascript


Working in Flex can help build really great for building very rich internet applications, however, when it comes to working outside of the Flash Player sandbox that is when things start to get a little more interesting.

Case in point... the application I have been working on required the ability to call a Java Applet.  The applet was required because there had been a lot of Java code written with very complex algorithms for generating a certain type of image.  We were concerned with the bandwidth usage required for going back and forth to the server for the images and also with the responsiveness of the Flex application as it waited for the response from the server.  The application in question involved a WYSIWYG editor and these images were generated at the end of a drop.

To execute the call to the applet there was a javscript function that would get called using the ExternalInterface class in Flex.  A call back was added that would then notify the Flex application when the image was generated.  The thing I spent the most time figuring out was the proper way for loading the applet into an html page, while supporting both browsers and also attempting to stay compliant to the latest html standards.

What I found is that the good old html tags that are thrown about for this are: <applet>, <embed> and <object>. Now depending on what browser you are developing for will dictate which tags get used.  My understanding is that for IE you use <object>, while for Mozilla you need to use <embed> tags.  The <applet> may work for both, but is considered deprecated.  Now this is where it gets really confusing because in order to support both browser types you have to add both sets of tags and in turn have to put a bunch of duplicate parameter definitions, etc...

So after banging my head against the wall adding tags and parameters inside the tags and then actually adding parameter tags, I went back to the internet and tried searching some more.  What I finally came across was an official Java page with instructions for using Javascript to dynamically add the applet at runtime based on browser type. Here is the page Java Rich Internet Applications Deployment Advice . Oracle provides a Javascript file you can drop in your web application and then add a couple simple lines of code to your html file and voila magically the applet loads correctly for your browser.  The Javascript files also include functions for validating the Java version and also downloading the latest version of the plugin.

Once I switched to this method it not only made my html much cleaner, but it also made the code xhtml compliant.  I did have some difficulties checking for a specific version of the Java Plugin, with it always just returning the major and minor version and not the revision/update version.  However, if you are looking to just add the applet this is the way to go.

It turns out there is a similar problem for embedding Flash Player applications inside html.  It all comes back to the <embed>, <object> and <applet> tags.  There is a specific set of parameters you have to put in and again have to use two sets of tags to support multiple browsers.  Again somebody realized this was a problem and said, "Hey lets just right a javascript function to dynamically add the correct object to the html dom."  Oddly enough Adobe actually includes this functionality as the "html wrapper" template in Flash Builder.  You will see a call in the html to AC_runActiveContent(), this is very similar to what the Javascript does for embedding a Java applet, but in this case it takes in the parameters required for a Flash movie.

Now this works well, but I did a little more searching, because "who wants to use the Adobe Standards" and found the SWF Object project on Google Code. It pretty much does the same thing as Adobe's recommended way, but is a little more robust and has what seems to be a pretty active community. Also one of the deciding factors was the ability to have the cursor and focus on a field in my application and also be able to type in it without having to click on the app. (That is for another post though)

So in summary embedding applets or Flash applications in html is really outdated and involves some really old and hard to use tags.  However, thanks to the smart people of the world, we now have some very easy to use javascript libraries that can be used to dynamically add these "RIA" objects inside our html documents.