tutorial.html

---
layout: default
title: Tutorial
---

		<p>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!
		</p>
		<p>If you're too busy to follow the steps, you can find this tutorial also here: <a href="https://github.com/st-js/bridges-examples/tree/master/html-hello">https://github.com/st-js/bridges-examples/tree/master/html-hello</a>.
		</p>
		<p>
		So here are the steps to create a new, very simple application, with ST-JS:</p>

		<ol class="tutorial">
			<li>Create a new empty POM file for a war project
<pre class="code prettyprint lang-xml">
&lt;project xmlns=&quot;http://maven.apache.org/POM/4.0.0&quot;
        xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;
        xsi:schemaLocation=&quot;http://maven.apache.org/POM/4.0.0
                            http://maven.apache.org/xsd/maven-4.0.0.xsd&quot;&gt;

    &lt;modelVersion&gt;4.0.0&lt;/modelVersion&gt;

    &lt;groupId&gt;org.st-js&lt;/groupId&gt;
    &lt;artifactId&gt;hello&lt;/artifactId&gt;
    &lt;version&gt;1.0.0-SNAPSHOT&lt;/version&gt;
    &lt;packaging&gt;war&lt;/packaging&gt;
    &lt;name&gt;Hello world&lt;/name&gt;

&lt;/project&gt;
</pre>
			</li>



			<li>Add the <i>stjs.version</i> property - easier to have the same version between the different ST-JS artifacts
<pre class="code prettyprint lang-xml">
&lt;properties&gt;
    &lt;stjs.version&gt;3.0.3&lt;/stjs.version&gt;
&lt;/properties&gt;
</pre>
			</li>

			<li>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
<pre class="code prettyprint lang-xml">
&lt;build&gt;
    &lt;sourceDirectory&gt;src/main/java&lt;/sourceDirectory&gt;
    &lt;plugins&gt;
        &lt;plugin&gt;
            &lt;groupId&gt;org.apache.maven.plugins&lt;/groupId&gt;
            &lt;artifactId&gt;maven-compiler-plugin&lt;/artifactId&gt;
            &lt;configuration&gt;
                &lt;source&gt;1.6&lt;/source&gt;
                &lt;target&gt;1.6&lt;/target&gt;
            &lt;/configuration&gt;
        &lt;/plugin&gt;
    &lt;/plugins&gt;
&lt;/build&gt;
</pre>
		</li>

			<li>Add the dependency to the ST-JS JavaScript (basic and DOM) bridge library
<pre class="code prettyprint lang-xml">
&lt;dependency&gt;
    &lt;groupId&gt;org.st-js.bridge&lt;/groupId&gt;
    &lt;artifactId&gt;html&lt;/artifactId&gt;
    &lt;version&gt;5.0.bv2&lt;/version&gt;
&lt;/dependency&gt;
</pre>
			</li>

			<li>Add the ST-JS plugin that will generate the JavaScript code (inside the build/plugins section)
<pre class="code prettyprint lang-xml">
&lt;plugin&gt;
    &lt;groupId&gt;org.st-js&lt;/groupId&gt;
    &lt;artifactId&gt;maven-plugin&lt;/artifactId&gt;
    &lt;version&gt;${stjs.version}&lt;/version&gt;
    &lt;executions&gt;
        &lt;execution&gt;
        &lt;id&gt;main&lt;/id&gt;
        &lt;goals&gt;
            &lt;goal&gt;generate&lt;/goal&gt;
        &lt;/goals&gt;
        &lt;/execution&gt;
    &lt;/executions&gt;
&lt;/plugin&gt;
</pre>
		</li>

			<li>Add the index.html page (in src/main/webapp)
<pre class="code prettyprint lang-html">
&lt;html&gt;
&lt;body&gt;

    &lt;h1&gt;ST-JS example: Hello world&lt;/h1&gt;

    &lt;form id=&quot;form&quot;&gt;
        Say hello to: &lt;input type=&quot;text&quot; name=&quot;to&quot;&gt; &lt;input type=&quot;button&quot; name=&quot;say&quot; value=&quot;Go&quot;&gt;
    &lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
		</li>

			<li>Create the Java class org/stjs/hello/HelloWorld.java. The main method will be executed after the declaration of the class.
<pre class="code prettyprint lang-java">
public class HelloWorld {
    public static void main(String [] args){
    }
}
</pre>
		</li>

		<li>Add the onload listener in the main method. The "window" object is a static member of the <b>Global</b> class.
<pre class="code prettyprint lang-java">
window.onload = new Callback1&lt;DOMEvent&gt;() {
    public void $invoke(DOMEvent ev) {
    }
};
</pre>
		</li>

		<li>Add the click listener to the "Go" button inside the onload listener
<pre class="code prettyprint lang-java">
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;
};
</pre>
</li>

		<li>Include the generated JavaScript and the ST-JS support file in the page
<pre class="code prettyprint lang-html">
&lt;head&gt;
    &lt;script src=&quot;generated-js/stjs.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;generated-js/org/stjs/hello/HelloWorld.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
</pre>
		</li>

		<li>Add an (almost) empty WEB-INF/web.xml file in src/main/webapp to allow maven build
<pre class="code prettyprint lang-xml">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;web-app xmlns=&quot;http://java.sun.com/xml/ns/j2ee&quot;
	xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;
	xsi:schemaLocation=&quot;http://java.sun.com/xml/ns/j2ee
		http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd&quot;
	version=&quot;2.4&quot;&gt;
&lt;/web-app&gt;
</pre>
		</li>

		<li>Build (* see generated JavaScript below) and deploy it to your application server (or use the <a href="#jetty">Jetty Maven plugin **</a> to start it directly from the command line)</li>

		<li>Browse <a href="http://localhost:8080/stjs/index.html">the page</a> and click on the "Go" button<br/>
			<img src="hello.jpg">
		</li>
	</ol>

	<!-- This code cannot be found there!!
	<p>
	You can also find this example (together with other, mode advanced examples) included in the ST-JS downloadable archive. Go to our <a href="download.html">download section</a> for details.
	</p>
	 -->

	<p>*) The generated JavaScript code:</p>
<pre class="code prettyprint lang-javascript">
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();
</pre>

	<p><a id="jetty"></a>**) Jetty configuration:</p>
<pre class="code prettyprint lang-xml">
&lt;plugin&gt;
    &lt;groupId&gt;org.mortbay.jetty&lt;/groupId&gt;
    &lt;artifactId&gt;jetty-maven-plugin&lt;/artifactId&gt;
    &lt;configuration&gt;
        &lt;webAppConfig&gt;
        &lt;contextPath&gt;/stjs&lt;/contextPath&gt;
        &lt;baseResource implementation=&quot;org.eclipse.jetty.util.resource.ResourceCollection&quot;&gt;
            &lt;resourcesAsCSV&gt;src/main/webapp,target/${project.artifactId}-${project.version}&lt;/resourcesAsCSV&gt;
        &lt;/baseResource&gt;
        &lt;/webAppConfig&gt;
    &lt;/configuration&gt;
&lt;/plugin&gt;
</pre>