Eclipse tutorial

Alexey Andreev edited this page Dec 31, 2015 · 10 revisions

This tutorial shows you how to create a web application using TeaVM and Eclipse.

Prerequisites

If you already have an installed environment for developing Java web applications in Eclipse, you can skip this section.

First, you obviously need Eclipse. TeaVM supports Eclipse versions 4.2, 4.3 and 4.4. You are free to choose any version of these, for example, you can download the latest version of Eclipse for Java EE developers. You don't need something special to install Eclipse, just unzip the package and run eclipse executable file.

Second, you need to install a servlet container. For example, you can choose Apache Tomcat 7.0. Again, just unzip this package. You don't need to start-up container, Eclipse will do it for you.

Third, you need Apache Maven. Please, follow installation instruction from the Maven download page.

Installing TeaVM plugin

Before developing TeaVM applications, you need to install TeaVM plugin for Ecplise. In menu choose Help -> Install New Software.... To the Work with field paste the following address: http://teavm.org/eclipse/update-site/0.4.x/ and press Enter. Select all plugins from the list and proceed with the installation. After you install TeaVM and restart Eclipse, you are ready to create a project.

Creating a project

In menu, choose the File -> New -> Other... item.

In the first page of the wizard choose Maven Project from the Maven category. Leave everything untouched in the second page, so you create project from Maven archetype.

In the third page you need to choose the TeaVM archetype. You may type teavm in the filter field. If nothing appears, add the archetype manually. Push the Add Archetype... button and fill the form with the following information:

  • Archetype Group Id: org.teavm
  • Archetype Artifact Id: teavm-maven-webapp
  • Archetype Version: 0.4.3

Now the archetype appears in the archetype list, choose it and proceed to the next page.

In the last page choose any group id, artifact id, version and package you like. For example, specify com.mydomain for group id, teavm-firstapp for artifact id, 0.0.1-SNAPHOT for version and com.mydomain.teavmfirstapp for package.

Push the Finish button and see your newly created project in the Project explorer. Wait while Eclipse downloads all required maven artifacts and configures your project.

If everything went OK, your project should look like this:

The newly created project

Deploying the project in the container

If you still have no a servlet container configured by Eclipse, you should add one. In menu, chose the Window -> Show View -> Other and select the Servers item from the Server category. You should see an empty list of server and a link that proposes to create a new server. Push it and select your servlet container (Apache Tomcat 7.0). In the next page select the Tomcat installation directory and press the Next > button. You should see your project in the Available section. Move it to the Configured section and push Finish.

Select the newly created server in the Servers view and push the Start the server button on the top-right corner of the view. Now your application is running and you can open it in the browser. Its location depends on your container's settings and from your project configuration. With the proposed settings it must be at http://localhost:8080/teavm-firstapp/.

If you see a blank page, you may try to force Eclipse and WTP to pick the generated JavaScript. In menu, try Project -> Clean, then right click on you project in the Project Explorer and select the Refresh command. Now refresh your page. If everyting is ok, you should see the text: TeaVM generated element.

Doing some server logic

Create the Server class in the com.mydomain.teavmfirstapp package. For this purpose, open the Java Resources folder of your project and then src/main/java. Right click on the package and choose New -> Class.

The class content must be the following:

package com.mydomain.teavmfirstapp;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/hello")
public class Server extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
            Thread.sleep(500);
        } catch (InterruptedException e) {
            return;
        }
        String userAgent = req.getHeader("User-Agent");
        resp.getWriter().write("Hello, " + userAgent);
    }
}

Restart the server and follow http://localhost:8080/teavm-firstapp/hello in the browser. If you saw the greeting message, everything is ok.

Interacting with the server

Now you are ready to modify your application to send request to server and receive response. First, open index.html page (it is in the Deployed Resoures / webapp folder of the project) and modify its content:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello web application</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" charset="utf-8" src="teavm/runtime.js"></script>
    <script type="text/javascript" charset="utf-8" src="teavm/classes.js"></script>
  </head>
  <body onload="main()">
    <div><button id="hello-button">Hello, server</button></div>
    <div id="hello-panel"></div>
    <div id="thinking-panel" style="display:none"><i>Server is thinking...</i></div>
    <div id="response-panel"></div>
  </body>
</html>

Second, add some TeaVM logic in the Client class:

package com.mydomain.teavmfirstapp;

import org.teavm.jso.ajax.ReadyStateChangeHandler;
import org.teavm.jso.ajax.XMLHttpRequest;
import org.teavm.jso.browser.Window;
import org.teavm.jso.dom.events.Event;
import org.teavm.jso.dom.events.EventListener;
import org.teavm.jso.dom.html.HTMLButtonElement;
import org.teavm.jso.dom.html.HTMLDocument;
import org.teavm.jso.dom.html.HTMLElement;

public class Client {
    private static HTMLDocument document = HTMLDocument.current();
    private static HTMLButtonElement helloButton = document.getElementById("hello-button").cast();
    private static HTMLElement responsePanel = document.getElementById("response-panel");
    private static HTMLElement thinkingPanel = document.getElementById("thinking-panel");

    private Client() {
    }

    public static void main(String[] args) {
        helloButton.listenClick(evt -> sayHello());
    }

    private static void sayHello() {
        helloButton.setDisabled(true);
        thinkingPanel.getStyle().setProperty("display", "");
        XMLHttpRequest xhr = XMLHttpRequest.create();
        xhr.onComplete(() -> {
            responsePanel.appendChild(document.createElement("div").withText(xhr.getResponseText()));
            helloButton.setDisabled(false);
            thinkingPanel.getStyle().setProperty("display", "none");
        });
        xhr.open("GET", "hello");
        xhr.send();
    }
}

You don't need to restart or republish anything. Just save your modifications and refresh page in the browser. If everything went ok, your server should greet you after a short pause.