GWT Boot Samples

Here you can find some samples on how you can use the GWT Boot Starters in your project. This quickstart document is based on following sample project: gwt-boot-sample-basic. If you are looking for GWT Boot Starter for Spring Boot check this out: gwt-boot-sample-basic-with-spring-boot

Quick Start

Step 1 - Create a Maven Project

Just create a simple Maven Project. Add the parent project and the starter dependencies. To be able to compile to JavaScript you need to add gwt-maven-plugin and add your GWT module name.

   <parent>
      <groupId>com.github.gwtboot</groupId>
      <artifactId>gwt-boot-starter-parent</artifactId>
      <version>VERSION</version>
   </parent>
   <dependencies>
      <dependency>
         <groupId>com.github.gwtboot</groupId>
         <artifactId>gwt-boot-starter</artifactId>
      </dependency>
   </dependencies>
   <build>
      <plugins>
         <plugin>
            <groupId>net.ltgt.gwt.maven</groupId>
            <artifactId>gwt-maven-plugin</artifactId>
            <configuration>
               <moduleName>hello.YourModule</moduleName>
               <startupUrls>
                  <url>/basic/</url>
               </startupUrls>
            </configuration>
         </plugin>
      </plugins>
   </build>

Step 2 - Create a GWT Module Descriptor module.gwt.xml

Create a GWT module descriptor at src/main directory. In this file you describe the EntryPoint class which is similar to Java Main class and method. Module rename-to="basic" means that the JavaScript will be compiled to the script basic.nocache.js. This module inherits everything from the Starter module. This JavaScript can be imported in the host HTML file on the next step.

<module rename-to="basic">
   <inherits name="com.github.gwtboot.starter.Starter"/>
   <entry-point class='hello.client.YourEntryPoint'/>
</module>

Step 3 - Create a Host HTML File where your JavaScript can run

In this HTML file, located at hello/public, your generated JavaScript will run. This JavaScript can access the HTML file. In this example the generated JavaScript will access the div with id="helloButton".

<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <title>Demo GWT Webapp</title>
   <script type="text/javascript" language="javascript" 
      src="basic.nocache.js" async=""></script>
</head>
<body>
   <div id="helloButton"/>
</body>
</html>

Step 4 - Create your Java Entry Point Main Class

The EntryPoint is the first class which will be executed. In this example it will exchange the "helloButton" with a Button.

package hello.client;

import com.google.gwt.core.client.*;
import com.google.gwt.user.client.ui.*;

public class YourEntryPoint implements EntryPoint {
   @Override
   public void onModuleLoad() {
      Button button = new Button("Click me");
      button.addClickHandler(clickEvent -> { 
         Window.alert("Hello World!"); 
      });
      RootPanel.get("helloButton").add(button);
   }
}

In gwt-boot-sample-basic you can take a look at the basic example in GWT.

Now you are ready to start your GWT basic sample app for the first time.

Starting GWT in SuperDev Mode

The application gwt-boot-sample-basic uses integrated Jetty server from GWT to deliver the HTML host file. This can be done with other Servlet app as well.

Step 1 - Run GWT DevMode to automatically compile the code

First generate the GWT Module Descriptor and then run the GWT Dev Mode in SuperDev mode to be able to compile the Java code to JavaScript code on reload in the web browser. In Maven you can run following command:

mvn gwt:generate-module gwt:devmode

You can just generate the module once and after that just run:

mvn gwt:devmode

Step 2 - Run the App in your Browser

Run it on:

http://localhost:8888/basic

Just reload your web app and GWT SuperDev mode will transpile your Java code to JavaScript on the fly. That's it, now you can develop your web app with GWT incrementally and fast! Enjoy!

adrienbaron/gwt-boot-samples