Wednesday, February 5, 2014

GWT - maven based project setup

Let's start with an empty maven web project.



Time to config the pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
            http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.verydapeng</groupId>
    <artifactId>Project-Setup</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>Project-Setup</name>

    <properties>
        <maven.compiler.source>1.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
        <failOnMissingWebXml>false</failOnMissingWebXml>        
        <gwt.version>2.6.0-rc3</gwt.version>
        <gwt.module>com.verydapeng.project.setup.prod</gwt.module>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt-user</artifactId>
            <version>${gwt.version}</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>gwt-maven-plugin</artifactId>
                <version>${gwt.version}</version>
                <configuration>
                    <runTarget>index.html</runTarget>
                    <skip>${gwt.skip}</skip>
                    <module>${gwt.module}</module>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>compile</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>
create the gwt module xml, under the package com.verydapeng.project.setup. let's call it prod.gwt.xml
<module rename-to="app">
    <inherits name="com.google.gwt.user.User" />
    <entry-point class="com.verydapeng.project.setup.client.Entry" />
</module>
create the Entry class
package com.verydapeng.project.setup.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;

public class Entry implements EntryPoint {

    @Override
    public void onModuleLoad() {
        Window.alert("hello world");
    }
}

create the index.html

<!DOCTYPE html>
<html>
    <body>
        <script src="app/app.nocache.js"></script>
    </body>
</html>

Now we are almost done. The project view should be something like this now



Time to run the project!

create a custom action to run the gwt:run goal



wait the GWT dev mode to show up, click the Launch Default Browser button


and viola, Hello World. You may need to install the GWT plugin, if you haven't done so.


sample codes are available here https://github.com/verydapeng/gwt-tutorials under the Project-Setup folder