Griffon: Calling application methods from JavaScript

Recently a question was raised at StackOverflow regarding the interaction of a Griffon based applet and JavaScript functions. Basically the question is: from JavaScript, how can I call methods on the applet, say a controller action? As it turns out the answer is simple: you must provide a custom Applet class that exposes what you want to call from JavaScript. Here's how to do it.

I'm using the following setup just in case you'd like to follow along

------------------------------------------------------------
  Griffon 1.3.0
------------------------------------------------------------

   Build: 12-May-2013 08:43 AM
  Groovy: 2.1.3
     Ant: 1.9.0
   Slf4j: 1.7.3
  Spring: 3.2.2.RELEASE
     JVM: 1.7.0_25 (Oracle Corporation 23.25-b01)
      OS: Mac OS X 10.7.5 x86_64

This will be a trivial Swing based calculator app just so we don't get distracted by other details however the recipe will also work for JavaFX based applets (provided you subclass the right class). The first step is then creating the app by issuing the following command

$ griffon create-app calculator

Good. We'll modify all members of the default MVC group created by the previous step. First the model

griffon-app/models/calculator/CalculatorModel.groovy

For this simple calculator we define 2 properties for storing numbers and a third property that will hold the result of applying an arithmetic operation on those two properties. Next comes the controller, where we'll see how those properties are put to good use

griffon-app/controllers/calculator/CalculatorController.groovy

Next comes the View which is nothing more than a grid form of non-editable textfields bound to the model's properties. We make them non-editable in order to avoid cheating, that is, you can't manually change the values of the textfields. Also there's no button to activate the controller action. We'll do that from JavaScript remember? Here's the View

griffon-app/views/calculator/CalculatorView.groovy

So far so good. Now comes the tricky part: we must create our own applet subclass. We'll do this by extending griffon.swing.SwingApplet, the base applet class provided by the Swing plugin.

src/main/calculator/CalculatorApplet.java

This applet exposes a single method named calculateFromJava() which will be called from the outside world. There are a few ways to grab hold of MVC members, shown here is one of the simplest. Notice the method returns the result of the computation that was calculated by the controller and set on the model. Now all that needs to be done is tweak the HTML page generated by the package command. Look up griffon-app/conf/dist/webstart/applet.html and update it with the following contents

<table>
    <tr>
        <td>Number1:</td>
        <td><input type="text" name="number1" id="number1"></td>
    </tr>
    <tr>
        <td>Number2:</td>
        <td><input type="text" name="number2" id="number2"></td>
    </tr>
    <tr>
        <td>Result</td>
        <td><input type="text" name="result" id="result"></td>
    </tr>
    <tr colspan="2">
        <td><button onClick="calculate();">Calculate!</button></td>
    </tr>
</table>

var attributes = {id: 'calculatorApplet',
                      codebase:'@griffonAppCodebase@',
                      code:'@griffonAppletClass@',
                      archive:'@appletJars@',
                      width:'@applet.width@', height:'@applet.height@'};
    var parameters = {fontSize:16,
                      java_arguments: "-Djnlp.packEnabled=true",
                      jnlp_href:'@griffonAppCodebase@/applet.jnlp',
                      draggable:'true',
                      image:'griffon.png',
                      boxmessage:'Loading Calculator',
                      boxbgcolor:'#FFFFFF', boxfgcolor:'#000000',
                      codebase_lookup: 'false'@applet.script.params@};
    var version = '1.7';
    deployJava.runApplet(attributes, parameters, version);
</script></div>
    </div>

<ul>
                    <li><a href="/home/faq">FAQ</a></li>
                    <li><a href="/home/code_of_conduct">Code of Conduct</a></li>
                    <li><a href="/home/upcoming">Upcoming Events</a></li>
                    <li><a href="/home/past">Past Events</a></li>
                    <li><a href="/conference/speaker/list">Speakers</a></li>

</ul>

<ul>
                    <li><a href="/home/about">About Us</a></li>
                    <li><a href="/app/contact/request">Contact Us</a></li>
                    <li><a href="/app/speaker-request">Speak at NFJS Events</a></li>
                    <li><a href="/home/sitemap">Site Map</a></li>
                </ul>
                
            </div>
            <div class="col-12 col-sm-4">

<ul class="links section sites">
                    <li class="last">
                        NFJS Sites:
                    </li>

<li><a href="https://nofluffjuststuff.com/">No Fluff Just Stuff</a></li>
                    <li><a href="https://uberconf.com/">UberConf</a></li>
                    <li><a href="https://techleadersummit.io">TechLeader Summit</a></li>
                    <li><a href="https://archconf.com/">ArchConf</a></li>

<li><a href="https://devopsvision.io">DevOps Vision</a></li>
                    <li><a href="https://mlopsvision.io">MLOps Vision</a></li>
                    <li><a href="https://coderemix.ai/">Code Remix Summit</a></li>

</ul>

</div>
            <div class="col-12 col-sm-4">

<address>
                    Big Sky Technology <br/>
                    5023 W. 120th Avenue <br/>
                    Suite #289 <br/>
                    Broomfield, CO 80020 <br/>
                    help@nofluffjuststuff.com <br/>
                    Phone: (720) 902-7711 <br/>
</address>

</div>
        </div>

</div>

</footer></div>

nfjs.blog.index();</script>
<script>
        "use strict";

var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
        function LoadTawkTo() {
            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
            s1.async=true;
            s1.src='https://embed.tawk.to/608dbb4562662a09efc400ca/1f4kq71o5';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
        };

setTimeout(LoadTawkTo.bind(this), 1000);

</script>

</body>
</html>

Griffon: Calling application methods from JavaScript

Posted by: Andres Almiray on July 12, 2013