Tutorial ~ Using the Compiler

Using the compiler

In order to make your Jangaroo code runnable in a JavaScript 1.x-capable environment such as a web browser or Rhino, it must be translated with jooc, the Jangaroo compiler.

The compiler takes a set of .as files and translates them to a set of .js files in a specified destination directory. You can invoke the compiler in several ways:

• via the command-line by running the bin/jooc script below the Jangaroo home directory or
• by calling the provided Ant task from your Ant build file or
• by using Maven and the Jangaroo Maven plugin.

Usually, you will want to use Maven, as it takes care of all the dirty work for you. You tell Maven about what you want it to build in a pom.xml file. A detailed explanation of what it does is given in section Jangaroo Maven plugin, for now, just copy the following text into _PROJECT_HOME_/pom.xml:

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>net.jangaroo.examples</groupId>
  <artifactId>hello-world</artifactId>
  <version>0.1.0-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>hello-world</name>
  <description>A Hello World Jangaroo Application</description>
  <properties>
    <jangaroo_version>0.8.3</jangaroo_version>
    <jangaroo_libs_version>0.8.5</jangaroo_libs_version>

  </properties>
  <build>
    <sourceDirectory>src/main/joo</sourceDirectory>
    <plugins>
      <plugin>
        <groupId>net.jangaroo</groupId>
        <artifactId>jangaroo-maven-plugin</artifactId>
        <extensions>true</extensions>
        <version>${jangaroo_version}</version>
        <executions>
          <execution>
            <goals>
              <goal>compile</goal>
              <goal>war-package</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.1.1</version>
        <configuration>
          <failOnMissingWebXml>false</failOnMissingWebXml>
        </configuration>
      </plugin>
    </plugins>
  </build>
  <dependencies>
    <dependency>
      <groupId>net.jangaroo</groupId>
      <artifactId>jangaroo-browser</artifactId>
      <version>${jangaroo_libs_version}</version>
      <type>jangaroo</type>
    </dependency>
  </dependencies>
</project>

Now, grab a command line, and enter

> cd _PROJECT_HOME_

> mvn compile

After several initial downloads, eventually the compiler generates two files: _PROJECT_HOME_/target/jangaroo-output/joo/classes/HelloWorld.js and _PROJECT_HOME_/target/jangaroo-output/joo/net.jangaroo.examples.hello-world.classes.js.

Let's have a look at the generated JavaScript code in the first file:

joo.classLoader.prepare("package",/* {*/
  /**
   * The most simple Jangaroo class on earth.
   */
  "public class HelloWorld",1,function($$private){;return[
    /**
     * Let the browser display a welcome message.
     */
    "public static function main",function main()/*:void*/ {
      window.document.body.innerHTML = "<strong>Hello World from Jangaroo!</strong>";
    },
];},["main"],[], "0.8.0", "0.8.3"
);

You may be surprised to see that the generated JavaScript file looks like the evil twin of its ActionScript source. By default, the source code is compiled on debug level "source". As a result, the generated code contains all comments and white space, so that the output is easily recognizable by the original source code author, yes even the line numbers in the output file match the line numbers of the corresponding statements in the input file, making it much easier to debug Jangaroo code.

The second generated file is called the library file. The name of this file uses your project's groupId and artifactId (see pom.xml) to construct a unique file name groupId.artifactId.classes.js that contains a concatenation of all scripts of your module. In this case, you only have one file, but there still is a difference: in the library file, all comments and white space are left out, only the line ends are kept so you can still debug:

// class HelloWorld
joo.classLoader.prepare("package",
"public class HelloWorld",1,function($$private){;return[
"public static function main",function(){
window.document.body.innerHTML="<strong>Hello World from Jangaroo!</strong>";
},
];},["main"],[], "0.8.0", "0.8.3"
);

More information about how to run the compiler and which options it supports is available in the compiler section of the documentation.

In the next and final step of this example, we are going to build a complete Web application by calling the compiled code from a web page.