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.

Introduction article about GWT Boot Starters: GWT Boot Starters — Bootstrap a Simple GWT Web App

IDE

You can use IntelliJ or Eclipse / STS. To be able to use Java APT correctly please take a look on how to configure Java APT with Maven in each development environment.

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>

If you are using the SNAPSHOT version of the starter you need to add Sonatype Snapshots repository by extending or creating <repositories> section since the gwtboot-modules are not released yet, so the example needs to access the SNAPSHOT version of gwtboot-modules.

   <repositories>
      <repository>
         <id>sonatype-snapshots</id>
         <name>Sonatype Snapshots</name>
         <url>https://oss.sonatype.org/content/repositories/snapshots</url>
         <snapshots>
            <enabled>true</enabled>
            <updatePolicy>always</updatePolicy>
            <checksumPolicy>fail</checksumPolicy>
         </snapshots>
      </repository>
   </repositories>

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 apps 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

Now you can copy&paste the "Copy to Clipboard" result of the GWT Development Mode UI above. 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!

Step 3 - Debug the App in your Browser

You can debug the Java code on the browser with the help of source maps. In this example we use Google Chrome.

Enjoy!

ibaca/gwt-boot-samples