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 實現。