ST-JS: Borrowing Java's syntax to write type-safe JavaScript

Tutorial

This tutorial explains you how to build a "Hello World" application using ST-JS. We presume you have previous knowledge of Maven, Java, JavaScript and HTML. Additionally, you'll have to deploy the generated war file to your preferred servlet engine. Even though Java is used to generate the JavaScript, for this particular example no Java code is run, as no interaction with the server is made. So you can also take the content of the war file and deploy it to an Apache server, for example, and it will work!

If you're too busy to follow the steps, you can find this tutorial also here: https://github.com/st-js/bridges-examples/tree/master/html-hello.

So here are the steps to create a new, very simple application, with ST-JS:

Create a new empty POM file for a war project

<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/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>org.st-js</groupId>
    <artifactId>hello</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>Hello world</name>

</project>

Add the stjs.version property - easier to have the same version between the different ST-JS artifacts
```
<properties>
    <stjs.version>3.0.3</stjs.version>
</properties>
```

Point the build to the actual source folder containing the Java source files to compile to JavaScript and set the Java version to a version superior to 1.5

<build>
    <sourceDirectory>src/main/java</sourceDirectory>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <configuration>
                <source>1.6</source>
                <target>1.6</target>
            </configuration>
        </plugin>
    </plugins>
</build>

Add the dependency to the ST-JS JavaScript (basic and DOM) bridge library

<dependency>
    <groupId>org.st-js.bridge</groupId>
    <artifactId>html</artifactId>
    <version>5.0.bv2</version>
</dependency>

Add the ST-JS plugin that will generate the JavaScript code (inside the build/plugins section)

<plugin>
    <groupId>org.st-js</groupId>
    <artifactId>maven-plugin</artifactId>
    <version>${stjs.version}</version>
    <executions>
        <execution>
        <id>main</id>
        <goals>
            <goal>generate</goal>
        </goals>
        </execution>
    </executions>
</plugin>

Add the index.html page (in src/main/webapp)

<html>
<body>

    <h1>ST-JS example: Hello world</h1>

    <form id="form">
        Say hello to: <input type="text" name="to"> <input type="button" name="say" value="Go">
    </form>

</body>
</html>

Create the Java class org/stjs/hello/HelloWorld.java. The main method will be executed after the declaration of the class.
```
public class HelloWorld {
    public static void main(String [] args){
    }
}
```
Add the onload listener in the main method. The "window" object is a static member of the Global class.
```
window.onload = new Callback1<DOMEvent>() {
    public void $invoke(DOMEvent ev) {
    }
};
```

Add the click listener to the "Go" button inside the onload listener

Form form = window.document.forms.$get(0);
Element button = form.elements.$get("say");
final Input text = form.elements.$get("to");
button.onclick = (ev) -> {
    alert("Hello " + text.value);
    return true;
};

Include the generated JavaScript and the ST-JS support file in the page

<head>
    <script src="generated-js/stjs.js" type="text/javascript"></script>
    <script src="generated-js/org/stjs/hello/HelloWorld.js" type="text/javascript"></script>
</head>

Add an (almost) empty WEB-INF/web.xml file in src/main/webapp to allow maven build

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
		http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
	version="2.4">
</web-app>

Build (* see generated JavaScript below) and deploy it to your application server (or use the Jetty Maven plugin ** to start it directly from the command line)
Browse the page and click on the "Go" button

*) The generated JavaScript code:

var HelloWorld = function(){};
stjs.extend(HelloWorld, null, [], function(constructor, prototype){
    constructor.main = function(args) {
        window.onload = function(ev) {
            var form = window.document.forms[0];
            var button = form.elements["say"];
            var text = form.elements["to"];
            button.onclick = function(ev) {
                alert("Hello " + text.value);
                return true;
            };
        };
    };
}, {});

if (!stjs.mainCallDisabled) HelloWorld.main();

**) Jetty configuration:

<plugin>
    <groupId>org.mortbay.jetty</groupId>
    <artifactId>jetty-maven-plugin</artifactId>
    <configuration>
        <webAppConfig>
        <contextPath>/stjs</contextPath>
        <baseResource implementation="org.eclipse.jetty.util.resource.ResourceCollection">
            <resourcesAsCSV>src/main/webapp,target/${project.artifactId}-${project.version}</resourcesAsCSV>
        </baseResource>
        </webAppConfig>
    </configuration>
</plugin>

ST-JS: Strongly Typed JavaScript

Borrowing Java's syntax to write type-safe JavaScript

Tutorial