Overview: JavaScript

AJAX (Asynchronous JavaScript and XML) has become very popular for building web applications. AJAX basically proposes to move part of the application to the browser without requiring a JRE-plugin. In order to do so the application needs to be written in JavaScript since JavaScript is the lowest common denominator across different web browsers in terms of prerequisites. Writing portable JavaScript is a daunting and tedious task. With the help of XMLVM, Java applications can be cross-compiled to portable JavaScript. By doing so, XMLVM shields the web-developer from the intrinsic complexities of writing cross-browser portable JavaScript code. As a consequence, a web-developer never has to write or even look at one line of JavaScript code.

The XMLVM generated by the front-end can be mapped to JavaScript using XSL stylesheets. The general approach is to mimic the stack-based virtual machine in the target language by declaring helper variables for the stack and stack-pointer. Consider the <jvm:irem> instruction (integer remainder) that pops two integers off the stack and pushes the remainder after division back onto the stack. Using the following XSL template, the <jvm:irem> instruction can be mapped to JavaScript:

<xsl:template match="jvm:irem">
  <xsl:text>
    __op2 = __stack[--__sp]; // Pop operand 1
    __op1 = __stack[--__sp]; // Pop operand 2
    __stack[__sp++] = __op1 % __op2; // Push remainder
   </xsl:text>
</xsl:template>

Variable __stack represents the runtime stack, whereas __sp refers to the top of the stack. Pre-decrement and post-increment operations are used for popping and pushing of arguments respectively. The following JavaScript program is the cross-compiled version of "Hello World":

qx.Class.define("org_xmlvm_test_HelloWorld", {
  extend: java_lang_Object,
  statics:
  {
    _main___java_lang_String_ARRAYTYPE : function( __arg1)
    {
      var __locals = new Array(1);
      var __stack = new Array(2);
      var __sp = 0;
      var __op1;
      var __op2;
      __locals[0] = __arg1;
      __stack[__sp++] = java_lang_System._out;
      __stack[__sp++] = new java_lang_String("Hello World");
      __sp -= 2;
      __stack[__sp]._println___java_lang_String(__stack[__sp + 1]);
      return;
    }
  }
});

Since JavaScript is a prototype-based programming language, we need to mimic object-oriented features such as class- and method-definitions. The JavaScript code generated by XMLVM makes use of the object-model defined by the Qooxdoo project. E.g., the Qooxdoo function qx.Class.define defines a new class. Since JavaScript does not support overloading, XMLVM uses name-mangling to differentiate between different overloaded version of a method. We also use Qooxdoo's extensive GUI library to implement Java's AWT/Swing widgets in JavaScript. XMLVMs philosophy is to cross-compile AWT/Swing desktop applications to an AJAX application.

Below you can see a demo of a more complex application. On the left you can see a screenshot of a Java application implementing a simple calculator. Click here to view the Java source code of this application. Using XMLVM, this Java application is automatically translated to an AJAX application. On the right hand side you can see the actual calculator running as an AJAX application. Try out a calculation such as "21 * 2"! Click here to view the source of the AJAX calculator application to see the generated JavaScript code.

[Calculator demo]