gwt maven plugin 创建 SmartGwt 项目 + I18N (图文)之三

开发环境：

JDK1.6, Maven 3.0, GWT2.1.1, SmartGwt 2.3

本文介绍第三步：替换为 SmartGwt 项目

准备工作：

1)第二步所建立的项目；

2)自己熟悉的 IDE

1、修改 pom.xml

增加 SmartGwt repository

<repositories> <repository> <id>smartgwt</id> <name>SmartGwt</name> <url>http://www.smartclient.com/maven2</url> <snapshots> <enabled>false</enabled> </snapshots> </repository> </repositories>

增加 SmartGwt 依赖

 <dependency> <groupId>com.smartgwt</groupId> <artifactId>smartgwt</artifactId> <version>2.3</version> </dependency>

完整 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/maven-v4_0_0.xsd"> <!-- POM file generated with GWT webAppCreator --> <modelVersion>4.0.0</modelVersion> <groupId>train</groupId> <artifactId>myGwt</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>GWT Maven Archetype</name> <properties> <!-- GWT version --> <gwtVersion>2.1.1</gwtVersion> <!--compiler level--> <maven.compiler.source>1.6</maven.compiler.source> <maven.compiler.target>1.6</maven.compiler.target> <!-- encoding--> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <webappDirectory>${project.build.directory}/${project.build.finalName}</webappDirectory> </properties> <dependencies> <dependency> <groupId>com.google.gwt</groupId> <artifactId>gwt-servlet</artifactId> <version>${gwtVersion}</version> <scope>runtime</scope> </dependency> <dependency> <groupId>com.google.gwt</groupId> <artifactId>gwt-user</artifactId> <version>${gwtVersion}</version> <scope>provided</scope> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.7</version> <scope>test</scope> </dependency> <!-- smart gwt --> <dependency> <groupId>com.smartgwt</groupId> <artifactId>smartgwt</artifactId> <version>2.3</version> </dependency> </dependencies> <build> <!-- Generate compiled stuff in the folder used for developing mode --> <outputDirectory>${webappDirectory}/WEB-INF/classes</outputDirectory> <plugins> <!-- GWT Maven Plugin --> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>gwt-maven-plugin</artifactId> <version>2.1.0-1</version> <executions> <execution> <goals> <goal>compile</goal> <goal>test</goal> <goal>i18n</goal> <goal>generateAsync</goal> </goals> </execution> </executions> <!-- Plugin configuration. There are many available options, see gwt-maven-plugin documentation at codehaus.org --> <configuration> <runTarget>myGwt.html</runTarget> <hostedWebapp>${webappDirectory}</hostedWebapp> <i18nMessagesBundle>com.train.client.Messages</i18nMessagesBundle> </configuration> </plugin> <!-- Copy static web files before executing gwt:run --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.1.1</version> <executions> <execution> <phase>compile</phase> <goals> <goal>exploded</goal> </goals> </execution> </executions> <configuration> <webappDirectory>${webappDirectory}</webappDirectory> </configuration> </plugin> </plugins> </build> <repositories> <repository> <id>smartgwt</id> <name>SmartGwt</name> <url>http://www.smartclient.com/maven2</url> <snapshots> <enabled>false</enabled> </snapshots> </repository> </repositories> </project>

 2、修改 *.gwt.xml

在 resources/com/train 下找到 mysql.gwt.xml，修改如下：

<?xml version="1.0" encoding="UTF-8"?> <module rename-to='myGwt'> <inherits name='com.google.gwt.user.User'/> <inherits name='com.smartgwt.SmartGwt' /> <inherits name="com.smartclient.theme.enterprise.Enterprise"/> <extend-property name="locale" values="zh"/> <entry-point class='com.train.client.myGwt'/> <source path='client'/> <source path='shared'/> </module>

 主题 theme 可自行选择。

3、修改 entry-point 类，换成 SmartGwt 实现

package com.train.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.smartgwt.client.util.SC; import com.smartgwt.client.widgets.form.DynamicForm; import com.smartgwt.client.widgets.form.fields.ButtonItem; import com.smartgwt.client.widgets.form.fields.TextItem; import com.smartgwt.client.widgets.layout.VLayout; public class myGwt implements EntryPoint { private final Messages msg = GWT.create(Messages.class); public void onModuleLoad() { //a DynamicForm DynamicForm form = new DynamicForm(); //name input final TextItem textItem = new TextItem(); textItem.setTitle(msg.nameField()); //send button ButtonItem sendBtn = new ButtonItem(msg.sendButton()); sendBtn.addClickHandler(new com.smartgwt.client.widgets.form.fields.events.ClickHandler() { public void onClick(com.smartgwt.client.widgets.form.fields.events.ClickEvent clickEvent) { if(textItem.getValue()!=null){ SC.say(msg.nameField()+ " : " + textItem.getValue().toString()); } } }); form.setItems(textItem , sendBtn ); VLayout lay = new VLayout(); lay.setWidth100(); lay.setHeight100(); lay.addMember(form); lay.draw(); } }   

 说明：一个 VLayout 布局，DynamicForm中一个 ButtonItem ，一个TextItem

ButtonItem 监听鼠标点击事件，显示用户在 TextItem 所输入的内容。

4、給 Host Page 减肥

去掉不必要的内容，如下：

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="myGwt.css" mce_href="myGwt.css"> <title>Hello Smart Gwt</title> <mce:script type="text/javascript" language="javascript" src="myGwt/myGwt.nocache.js" mce_src="myGwt/myGwt.nocache.js"></mce:script> </head> <body> <!-- OPTIONAL: include this if you want history support --> <iframe src="javascript:''" mce_src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> <!-- RECOMMENDED if your web app will not function without JavaScript enabled --> <noscript> <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"> Your web browser must have JavaScript enabled in order for this application to display correctly. </div> </noscript> </body> </html>  

body 部分的 iframe 支持页面历史功能；<noscript />部分的作用是：当浏览器不支持js，显示友好提示信息。

5、运行项目

运行 mvn gwt:run，默认英文页面：

链接后加 &locale=zh, 显示中文页面：

说明：SmartGwt UI 组件本身有国际化资源配置，比如这个弹出框的标题已自动显示为中文的"消息"。

如果有其他 UI ，其文字部分也将同时显示为中文。

小结：

到这里已完成 SmartGwt 项目的创建及 I18N 实现。