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 <jooc> 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.6.0</jangaroo_version>
    <jangaroo_libs_version>0.6.0</jangaroo_libs_version>
  </properties>

  <pluginRepositories>
    <pluginRepository>
      <id>jangaroo</id>
      <name>Jangaroo repository</name>
      <url>http://repo.jangaroo.net/maven2</url>
    </pluginRepository>
  </pluginRepositories>

  <repositories>
    <repository>
      <id>jangaroo</id>
      <url>http://repo.jangaroo.net/maven2</url>
    </repository>
  </repositories>

  <build>
    <sourceDirectory>src/main/joo</sourceDirectory>
    <outputDirectory>target/joo</outputDirectory>

    <plugins>
      <plugin>
        <groupId>net.jangaroo</groupId>
        <artifactId>jangaroo-lifecycle</artifactId>
        <version>${jangaroo_version}</version>
        <extensions>true</extensions>
      </plugin>

      <plugin>
        <groupId>net.jangaroo</groupId>
        <artifactId>jangaroo-maven-plugin</artifactId>
        <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>
        <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 compiled output is written to PROJECT_HOME/target/joo/scripts/classes/HelloWorld.js.

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

joo.classLoader.prepare("package", [""],

/**
 * The most simple Jangaroo class on earth.
 */
"public class HelloWorld",function($$private){with($$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"],[]
);

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 with on debug level. 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 the Jangaroo code.

In parallel, the Maven build process creates a second file PROJECT_HOME/target/joo/scripts/hello-world.js, called the library file. The name of this file corresponds to your project artifactId (see pom.xml), and it contains a concatenation of all scripts of your application. 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",function($$private){with($$private)return[



"public static function main",function(){
window.document.body.innerHTML="<strong>Hello World from Jangaroo!</strong>";
},
];},["main"],[]
);

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.