How can functions in a Griffon applet be called from JavaScript?

Question

We have a project that is web-based, but needs to have significant access to the user's filesystem. HTML doesn't (yet) allow us enough access, and since we are primarily a Grails shop, having the file access code as an applet makes far more sense than having it be Flash code.

We've dabbled a little bit with Griffon (a previous prototype for this project was a 100% Griffon Webstart app), and love the structure and "boilerplate removal" that Griffon gives to applets. The issue we keep running into, however, is connecting the Html / JavaScript UI to the Griffon applet that actually does all of the work.

We found James Williams' excellent example of calling JavaScript functions from a Griffon app, but haven't been able to find an example of the reverse: calling Griffon functions from the JavaScript side.

The primary issue is that we want to have the Griffon app be "headless" (or as close as we can get), since all of the UI will be handled by JavaScript and HTML. This means that we can't use UI events triggered from within the Griffon app, the way that James does in his example.

Does anyone have an example of JavaScript interacting with a Griffon applet that we could learn from? Or any advice on how to surface things from within a Griffon applet to JavaScript?

Answer 1

Sounds to me you want to call a Java (or groovy!) function found within the Applet from the outside world using JavaScript, right?

In order for this to work:

1. You must have livescript enabled and the applet's jar must be signed.

2. The next step is to define an entry point in the applet subclass that knows how to handle the call you want to make.

   This is where it gets tricky because the default applet class is griffon.swing.SwingApplet so you must create your own subclass of griffon.swing.SwingApplet and use it as the main entry point.

   Your subclass will be the one that defines the method (or methods) callable from the JavaScript side. This should be something along the lines of:

   import griffon.swing.SwingApplet;  
   
   public class MySwingApplet extends SwingApplet {
       // match superclass constructors
       public CalculatorApplet(String[] args) {  
           super(args);  
       }  
   
       public Object myAppletMethod(String[] args) {
           // args come form the JS world
           // do whatever is necessary here
       }
   }
   

3. To tell Griffon to use our custom applet subclass instead of the default, simply create a file named griffon-app/scripts/_Events.groovy and place the following inside:

   eventPackageAppStart = {  
       griffonAppletClass = 'calculator.CalculatorApplet'  
   }
   

4. Finally, grab hold of the applet object from javascript and invoke myAppletMethod() with any values you see fit:

   <script>  
       function talkToApplet() {
           var r = document.applets.myAppletId.myAppletMethod("arg1", "arg2");  
           alert(r);
       }
   </script>
   

---

A more detailed example can be found on my blog.