Using a signed Java applet as a Flex helper – Part 1

29 08 2007

I want to talk about a proof-of-concept I developed a few months back. The problem was that we needed a Flex 2 application to be able to launch an external, native application to edit a file. Since Flex is strictly limited in how it can interact with the file system and the native OS, this seemed impossible. But then I had the idea of using a signed Java applet to do the hard work. Because it’s Java code, it can interact with the file system and do things that Flex can’t do — like launch external applications.

OK — it’s not an original idea. The Artemis project from EffectiveUI is doing something similar, but for AIR applications.

Keep in mind that I’m not a Java programmer. Nor am I a JavaScript programmer. I’m probably making all sorts of mistakes that will induce a lot of eye rolling. Just try to keep it to yourselves. (I do know Flex and Actionscript, so feel free to openly mock egregious errors in those domains.)

I’m going to break this posting into two parts. In the first part I’ll show how to create a trivial Java applet, have it load simultaneously with a Flex application, and show how the Flex application can communicate with the applet. In the second part, I’ll provide a slightly less trivial Java applet that will open an external editor, and show how to sign the applet and deal with thread synchronization issues (!!).

Step 1. Create the applet

Use your favorite text editor and create the following Java source file:

import java.awt.*;
import java.awt.event.*;
import java.applet.*;
import javax.swing.*;
public class HelloWorld extends Applet
{
	public void sayHelloWorld()
	{
           JOptionPane.showMessageDialog( null, "Hello World", "Hello World", JOptionPane.INFORMATION_MESSAGE );
	}
}

Save the file as “HelloWorld.java” and compile it:
javac HelloWorld
which should create the file HelloWorld.class.

Step 2. Create the Flex project

In Flex builder, create a project called JavaApplet, and replace the contents of JavaApplet.mxml with:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			private function onClick() : void
			{
                      ExternalInterface.call( "document.helloWorldApplet.sayHelloWorld()", null );
			}
		]]>
	</mx:Script>
	<mx:Button label="Hello World" click="onClick()"/>
</mx:Application>

Copy the HelloWorld.class file created in Step 1 to the bin directory of the Flex project.

Step 3. Change the html wrapper

Edit the Flex applications HTML wrapper template. Insert the following just before the closing </body> tag:

<APPLET id="helloWorldApplet" code="HelloWorld.class" codebase="." align="baseline"
    width="200" height="200">

Step 4. There’s no step 4

Just run the application. If you’ve done everything right, clicking the button should display a JOption pane with the message “hello world”.

(This might not work in Internet Explorer. I think with IE, you need to replace the <APPLET> tag with <OBJECT>. The syntax is subtly different and I haven’t tried it — I don’t have access to a Windows machine — so you’re on your own.)



Actions

Information

5 responses

21 01 2008
JonR

Are these instructions all assuming use of Flex Builder? The reason I ask is that if you use the Flex SDK and follow these instructions it doesn’t work. When you say “launch application” I’ve tried opening the wrapper html file in a browser and get an error:

SecurityError: Error #2060: Security sandbox violation: ExternalInterface caller file:///C:/flex/bin/JavaApplet.swf cannot access file:///C:/flex/bin/JavaApplet.html.
at flash.external::ExternalInterface$/flash.external:ExternalInterface::_initJS()
at flash.external::ExternalInterface$/call()
at JavaApplet/::onClick()
at JavaApplet/___Button1_click()

In this case (with SDK) would you need to have a true back-end server to try this, and if so how would this be configured? If not, then is there something I might be missing?

21 01 2008
tobiaspatton

Hmmm… I think ‘ve seen this before. Are you using Firefox? Try setting:

in the tag of your HTML wrapper.

21 01 2008
JonR

So this has something to do with the way Flex manages security. If you are using the Flex SDK, then you need to test this from a web server (not from the local filesystem), ensure that you have a crossdomain.xml file in place on the server and then this should work. If you google flex and crossdomain.xml you’ll find various discussions on the subject. Bottom line is that as far as I can tell there is no way to open the wrapper html from the local filesystem.

21 01 2008
JonR

Tried setting allowScriptAccess = always but that didn’t seem to work. I was already setup to use a TurboGears webserver so I just moved the Flex code under a static directory for the TurboGears application and can rebuild it there and load the applet without any problems. This doesn’t solve the original problem of course but is a reasonable workaround (for me anyway).

7 10 2008
dhileep

Use the above code to work on IE also

Leave a comment