Monday, October 24, 2011

Spring and GWT tutorial. Part 2 - Adding GWT

Recently I've started working in a GWT project. It is a new technology for me, so I've decided to create a simple web application based on Spring and GWT.

This post has a Russian version.

If you have never heard about GWT, you can read about it there and pass a very useful tutorial.

We have already created a skeleton of our application using Spring. Now let's add GWT to our project.

At first, let's change pom.xml:
<?xml version="1.0" encoding="UTF-8"?>
<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>hellogwt</groupId>
    <artifactId>hellogwt</artifactId>
    <version>1.0</version>
    <packaging>war</packaging>

    <properties>
        <spring.version>4.2.4.RELEASE</spring.version>
        <gwt.version>2.7.0</gwt.version>
        <log4j.version>1.2.17</log4j.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt-servlet</artifactId>
            <version>${gwt.version}</version>
        </dependency>
        <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt-user</artifactId>
            <version>${gwt.version}</version>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>${log4j.version}</version>
        </dependency>
    </dependencies>

    <build>
        <finalName>hellogwt</finalName>
        <plugins>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>gwt-maven-plugin</artifactId>
                <version>${gwt.version}</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>compile</goal>
                            <goal>test</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

We will use spring4gwt library to integrate Spring with GWT. It is not contained in Maven repository, so we have to download and add it to WEB-INF/lib project's folder.

UPD: Instead of manually adding spring4gwt library to the project we can add it to Maven local repository and set that our project depends on it. We have to:
  • execute next command in directory where library is located:
    mvn install:install-file -Dfile=spring4gwt-0.0.1.jar -DgroupId=com.google.code -DartifactId=spring4gwt -Dversion=0.0.1 -Dpackaging=jar
  • add a new dependency into pom.xml:
    <properties>
        ...
        <spring4gwt.version>0.0.1</spring4gwt.version>
    </properties>
    
    <dependencies>
        ...
        <dependency>
            <groupId>com.google.code</groupId>
            <artifactId>spring4gwt</artifactId>
            <version>${spring4gwt.version}</version>
        </dependency>
    </dependencies>
Anton, thanks for a good advice!

Also, we will make some changes in web.xml:
  • replace DispatcherServlet with SpringGwtRemoteServiceServlet from spring4gwt
  • replace servlet's url-pattern with "/hellogwt/springGwtServices/*" for correct functioning of application services
  • replace welcome page with HelloGWT.html
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <servlet>
        <servlet-name>springGwtRemoteServiceServlet</servlet-name>
        <servlet-class>org.spring4gwt.server.SpringGwtRemoteServiceServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>springGwtRemoteServiceServlet</servlet-name>
        <url-pattern>/hellogwt/springGwtServices/*</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>HelloGWT.html</welcome-file>
    </welcome-file-list>

</web-app>

Rename index.jsp to HelloGWT.html and change its contents:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="hellogwt.css">
    <title>HelloGWT</title>
    <script type="text/javascript" language="javascript" src="hellogwt/hellogwt.nocache.js"></script>
</head>
<body>
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
            style="position:absolute;width:0;height:0;border:0">
    </iframe>
</body>
</html>

Create a xml module file HelloGWT.gwt.xml in the com.hellogwt package:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.6.2//EN"
        "http://google-web-toolkit.googlecode.com/svn/tags/1.6.2/distro-source/core/src/gwt-module.dtd">

<module rename-to='hellogwt'>
    <inherits name='com.google.gwt.user.User'/>
    <inherits name='com.google.gwt.user.theme.standard.Standard'/>
    <entry-point class='com.hellogwt.client.HelloGWT'/>
</module>

After that create HelloGWT class in the com.hellogwt.client package. Our method onModuleLoad() will add a label with text "Hello, GWT!" into html page:
package com.hellogwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloGWT implements EntryPoint {

    @Override
    public void onModuleLoad() {
        Label greetingLabel = new Label("Hello, GWT!");
        RootPanel.get().add(greetingLabel);
    }
}

Build the project by executing  "mvn clean install" command:
[INFO] Scanning for projects...
[INFO]                                                                         
[INFO] ------------------------------------------------------------------------
[INFO] Building hellogwt 1.0
[INFO] ------------------------------------------------------------------------
[INFO] 
[INFO] --- maven-clean-plugin:2.5:clean (default-clean) @ hellogwt ---
[INFO] Deleting d:\Work\blog\hellogwt-2\target
[INFO] 
[INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ hellogwt ---
[WARNING] Using platform encoding (Cp1251 actually) to copy filtered resources, i.e. build is platform dependent!
[INFO] skip non existing resourceDirectory d:\Work\blog\hellogwt-2\src\main\resources
[INFO] 
[INFO] --- maven-compiler-plugin:2.5.1:compile (default-compile) @ hellogwt ---
[WARNING] File encoding has not been set, using platform encoding Cp1251, i.e. build is platform dependent!
[INFO] Compiling 1 source file to d:\Work\blog\hellogwt-2\target\classes
[INFO] 
[INFO] --- maven-resources-plugin:2.6:testResources (default-testResources) @ hellogwt ---
[WARNING] Using platform encoding (Cp1251 actually) to copy filtered resources, i.e. build is platform dependent!
[INFO] skip non existing resourceDirectory d:\Work\blog\hellogwt-2\src\test\resources
[INFO] 
[INFO] --- maven-compiler-plugin:2.5.1:testCompile (default-testCompile) @ hellogwt ---
[INFO] Nothing to compile - all classes are up to date
[INFO] 
[INFO] --- maven-surefire-plugin:2.12.4:test (default-test) @ hellogwt ---
[INFO] No tests to run.
[INFO] 
[INFO] --- gwt-maven-plugin:2.4.0:compile (default) @ hellogwt ---
[INFO] auto discovered modules [com.hellogwt.HelloGWT]
[INFO] Compiling module com.hellogwt.HelloGWT
[INFO]    Compiling 6 permutations
[INFO]       Compiling permutation 1...
[INFO]       Compiling permutation 3...
[INFO]       Process output
[INFO]          Compiling
[INFO]             Compiling permutation 0...
[INFO]       Process output
[INFO]          Compiling
[INFO]             Compiling permutation 2...
[INFO]       Compiling permutation 4...
[INFO]       Compiling permutation 5...
[INFO]    Compile of permutations succeeded
[INFO] Linking into d:\Work\blog\hellogwt-2\target\hellogwt\hellogwt
[INFO]    Link succeeded
[INFO]    Compilation succeeded -- 29.131s
[INFO] 
[INFO] --- maven-war-plugin:2.2:war (default-war) @ hellogwt ---
[INFO] Packaging webapp
[INFO] Assembling webapp [hellogwt] in [d:\Work\blog\hellogwt-2\target\hellogwt]
[INFO] Processing war project
[INFO] Copying webapp resources [d:\Work\blog\hellogwt-2\src\main\webapp]
[INFO] Webapp assembled in [199 msecs]
[INFO] Building war: d:\Work\blog\hellogwt-2\target\hellogwt.war
[INFO] WEB-INF\web.xml already added, skipping
[INFO] 
[INFO] --- gwt-maven-plugin:2.4.0:test (default) @ hellogwt ---
[INFO] 
[INFO] --- maven-install-plugin:2.4:install (default-install) @ hellogwt ---
[INFO] Installing d:\Work\blog\hellogwt-2\target\hellogwt.war to C:\Users\Alex\.m2\repository\hellogwt\hellogwt\1.0\hellogwt-1.0.war
[INFO] Installing d:\Work\blog\hellogwt-2\pom.xml to C:\Users\Alex\.m2\repository\hellogwt\hellogwt\1.0\hellogwt-1.0.pom
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 35.302s
[INFO] Finished at: Sun Apr 13 00:28:11 EEST 2014
[INFO] Final Memory: 23M/224M
[INFO] ------------------------------------------------------------------------

Now we have application war-file. Copy it into Tomcat's webapps folder, start the server and go to http://localhost:8080/hellogwt/. Our welcome page should be displayed with text "Hello, GWT!":











Folder structure:




























Application source code is available at https://subversion.assembla.com/svn/hellogwt-2/trunk/.

We did it! Now Spring and GWT can work together. Next we will add GWT RPC services to our application.

No comments:

Post a Comment