Wednesday, October 19, 2011

Создаем приложение с помощью Spring и GWT. Часть 2 - Добавляем GWT

Недавно я начал работу в проекте, в котором используется новая для меня технология - GWT. Решил написать небольшое приложение, использующее этот фреймворк и Spring.

Те, кто не знаком с GWT, могут ознакомиться с ним здесь и пройти очень полезный tutorial.

В предыдущей части мы создали каркас приложения с помощью Spring. Сейчас рассмотрим, как в наше приложение добавить GWT.

Сперва необходимо изменить pom.xml:
  • добавить артефакты gwt-servlet и gwt-user
  • добавить артефакт log4j, который будет использоваться одной важной библиотекой приложения
  • подключить gwt-maven-plugin для корректной компиляции клиентской части приложения
<?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>

Для интеграции Spring и GWT мы будем использовать библиотеку spring4gwt. Её нет в репозитории Maven, поэтому ее нужно скачать отсюда и добавить в директорию WEB-INF/lib нашего проекта.

UPD: Вместо того, чтобы вручную добавлять библиотеку spring4gwt в проект, можно добавить её в локальный репозиторий Maven и указать зависимость от нее в pom.xml. Для этого нужно:
  • В директории с библиотекой выполнить следующую команду:
    mvn install:install-file -Dfile=spring4gwt-0.0.1.jar -DgroupId=com.google.code -DartifactId=spring4gwt -Dversion=0.0.1 -Dpackaging=jar
  • Добавить зависимость в 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, спасибо за совет!

Изменим web.xml:
  • заменим сервлет DispatcherServlet на SpringGwtRemoteServiceServlet из spring4gwt
  • заменим url-pattern сервлета на "/hellogwt/springGwtServices/*" для корректной работы сервисов приложения
  • заменим страницу приветствия на 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>

Переименуем index.jsp в HelloGWT.html и изменим ее содержимое:
<!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>

Создадим xml-файл модуля HelloGWT.gwt.xml в пакете com.hellogwt:
<?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>

Создадим класс HelloGWT в пакете com.hellogwt.client. В методе onModuleLoad() добавим метку с текстом "Hello, GWT!" в нашу html-страницу:
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);
    }
}

Соберем проект, выполнив команду "mvn clean install":
[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] ------------------------------------------------------------------------

Скопируем полученный war-файл в директорию Tomcat'а webapps, запустим сервер и перейдем по ссылке http://localhost:8080/hellogwt/. Должна отобразиться страница с текстом "Hello, GWT!":











Структура проекта:




























Исходный код созданного приложения доступен по ссылке https://subversion.assembla.com/svn/hellogwt-2/trunk/.

Мы смогли успешно интегрировать GWT в Spring-приложение. В следующей части рассмотрим, как добавить GWT RPC сервисы в наш проект.


Рекомендуемые посты:

8 comments:

  1. >Для интеграции Spring и GWT мы будем использовать >библиотеку spring4gwt. Её нет в репозитории >Maven, поэтому ее нужно скачать отсюда и добавить >в директорию WEB-INF/lib нашего проекта.

    Кошейрней и Maven-style будет задеплоить ее в локальный репозиторий командой mvn deploy:deploy-file с соответсвующими параметрами.

    ReplyDelete
    Replies
    1. Спасибо за рекомендацию!

      Delete
  2. Ну и для деплоя на сервер удобней воспользоваться лайфсайлклом мавена deploy.

    ReplyDelete
  3. Спасибо преогромнейшее!!!!

    ReplyDelete
  4. Хорошие статьи, спасибо!
    Есть вопрос, когда я с рабочего приложения которое запускалось на встроенном сервере пытаюсь пересесть на Tomcat у меня не находит "MyApp/MyApp.nocache.js" который подключается на HTML странице...
    Что делать?

    ReplyDelete
  5. Хорошая статья. Вот только не радует зависимость в лице spring4gwt. То ли она уже давно брошена, то ли просто развивать нечего. Но никаких изменений нет с августа 2009 года. Кроме того, она до сих пор хостится на google code, который обещают в скором будущем закрыть. Отсюда вопрос, а есть ли другой простой и "более стандартный" способ использовать совместно Spring и GWT?

    ReplyDelete