Create GWT applications on JBoss AS

This tutorial shows how to create Google Web Toolkit applications (GWT) using Eclipse and how to deploy them on WildFly. In the second part of this tutorial, we will show also how to interact with application server serices like RESTful Web services.

Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. A typical GWT application is composed of client and server resources. Client resources are used to create the front end layout using just Java classes (just like you would do with Swing). Server resources include RPC services which are implemented as Ajax calls.

Setting up GWT

Firstly, we recommend downloading the GWT SDK which is available at: https://www.gwtproject.org/download.html

The SDK contains the core libraries, compiler, and development server that you need to write web applications.

Once unzipped the GWT, you will be able to create a basic application skeleton using the command webAppCreator. For example:

./webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp

Setting up the Project dependencies

The webappCreator uses Ant as project builder. If you are going to deploy your app on an application server, we recommend using Maven to build the project. You will need to set up the client and the server libraries.

In order to build the Client UI, you will need to include GWT libraries in it:

<dependencyManagement>
    <dependencies>
      <dependency>
        <groupId>com.google.gwt</groupId>
        <artifactId>gwt</artifactId>
        <version>2.8.2</version>
        <type>pom</type>
        <scope>import</scope>
      </dependency>
    </dependencies>
  </dependencyManagement>

Then, in the dependencies, also include:

<dependency>
     <groupId>com.google.gwt</groupId>
     <artifactId>gwt-user</artifactId>
     <scope>provided</scope>
</dependency>

To build the Server side, include a Java EE or Jakarta EE compatible dependency:

<dependency>
    <groupId>javax</groupId>
    <artifactId>javaee-api</artifactId>
    <version>7.0</version>
    <scope>provided</scope>
</dependency>

Building the GWT User Interface

The User Interface of our application is minimal. We will add a Form which contains:

  • A Label
  • An Input field
  • A Button which triggers the REST Service

Here is the HelloWorldClient.ui.xml:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <g:HTMLPanel ui:field="root">
    <h1>GWT Hello World</h1>
    <form name="theForm" onsubmit="sayHelloButton.click(); return false;">
      <fieldset>  
        <label for="name" id="name_label">Name</label> 
        <input name="name" ui:field="name" type="text" required="required" placeholder="Your Name"/>
        <g:Button ui:field="sayHelloButton" text="Say Hello"/><g:Label ui:field="result"/>
      </fieldset>   
    </form>
  </g:HTMLPanel>

</ui:UiBinder>

The UI is backed by the following

public class HelloWorldClient {

    interface MyUiBinder extends UiBinder<Panel, HelloWorldClient> {
    }

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    @UiField
    Panel root;
    @UiField
    Label result;
    @UiField
    InputElement name;
    @UiField
    Button sayHelloButton;

    HelloWorldClient() {
        uiBinder.createAndBindUi(this);
        sayHelloButton.getElement().setAttribute("name", "sayHelloButton");
    }

    @UiHandler("sayHelloButton")
    public void onButtonClick(ClickEvent e) {
        try {
            new RequestBuilder(RequestBuilder.GET, "hello/json/" + URL.encodePathSegment(name.getValue())).sendRequest(null,
                    new RequestCallback() {

                        @Override
                        public void onResponseReceived(Request request, Response response) {
                            if (response.getStatusCode() == Response.SC_OK) {
                                HelloResponse r = (HelloResponse) JsonUtils.safeEval(response.getText());
                                result.setText(r.getResult());
                            } else {
                                handleError("Server responded with status code " + response.getStatusCode());
                            }
                        }

                        @Override
                        public void onError(Request request, Throwable exception) {
                            handleError(exception.getMessage());
                        }
                    });
        } catch (RequestException exception) {
            handleError(exception.getMessage());
        }
    }

    private void handleError(String details) {
        result.setText("Sorry, can't say hello now. " + details);
    }

    /**
     * Returns the DOM fragment that this
     * 
     * @return
     */
    public Panel getElement() {
        return root;
    }

}

The most interesting part, is the onButtonClick which handles a click of the button by sending an AJAX request to the HelloWorldResource and then updating the label in response.

We also need a Class which maps the JSON response object sent back from the HelloWorldResource JAX-RS HelloWorldResource service.

public class HelloResponse extends JavaScriptObject {

    protected HelloResponse() {
    }

    public final native String getResult() /*-{ return this.result; }-*/;

}

Finally, the GWT UI needs an Entry point which is loaded when the script is loaded in the Browser:

public class HelloWorldApp implements EntryPoint {

    @Override
    public void onModuleLoad() {
        RootPanel.get().add(new HelloWorldClient().getElement());
    }

}

Coding the Server side

Within the server folder, we will add a minimal REST Service which returns an XML or JSON String following up the GET Request:

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;

@Path("/")
public class HelloWorldResource {
 

    @GET
    @Path("/json/{name}")
    @Produces("application/json")
    public String getHelloWorldJSON(@PathParam("name") String name) {
        System.out.println("name: " + name);
        return "{\"result\":\"" + "Hello " + name + "\"}";
    }

    @GET
    @Path("/xml/{name}")
    @Produces("application/xml")
    public String getHelloWorldXML(@PathParam("name") String name) {
        System.out.println("name: " + name);
        return "<xml><hello>" + name + "</hello></xml>";
    }

}

Running the example

To build the application just run from the command line:

mvn clean install

Then, if you have included WildFly maven plugin, you can deploy the application automatically on the server with:

mvn wildfly:deploy

Otherwise, simply copy the WAR file in the deployments folder of the application server.

Finally, point the browser to the home page for the Web Context. For example, http://localhost:8080/jboss-helloworld-gwt/

gwt tutorial jboss wildfly

Conclusion

This article was a walkthough GWT. We have covered how to build a basic application which connects to WildFly using a REST endpoint.

Source code: https://github.com/fmarchioni/mastertheboss/tree/master/web/helloworld-gwt

Found the article helpful? if so please follow us on Socials