當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

如何创建一个基于Maven的SmartGWT项目

發布時間：2024/3/26 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了如何创建一个基于Maven的SmartGWT项目小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

如何創建一個基于Maven的SmartGWT項目

使用環境

Eclipse的版本為：Luna Service Release 2 (4.4.2)（這個其實不是很重要，你完全可以使用最新版本的Eclipse或者MyEclipse）

Maven的版本為：3.1.0

SmartGWT的版本為：6.0p

GWT的SDK版本為：2.7

前提準備

你需要安裝Maven。如何安裝Maven不是文本的內容，你可以參考我的關于Maven的博客。

把SmartGWT的jar包上傳到私服服務器。

操作過程

創建GWT項目

因為SmartGWT是基于GWT的，所以想要創建SmartGWT項目，先要創建GWT的項目。
一般來說，Eclipse或者MyEclipse已經集成了Maven，如果你的沒有集成，那么先安裝Maven的插件，這里不過多介紹。這里提示一下，我們并不使用Eclipse自帶的Maven。我們使用自己的安裝的Maven。關于如何使用自己的Maven，請看本文最后面的附錄。

創建一個Maven項目

按下快捷鍵：Ctrl+n，彈出新建窗口，如下圖所示：

在輸入框中輸入maven

選中Maven Project項

點擊Next按鈕

彈出窗口，如下圖所示：

直接點擊Next

彈出窗口，選擇骨架，如下圖所示：

篩選框中輸入gwt

若篩選結果能夠出現如圖所示的結果，則跳過第3步，直接到第4步

點擊Add Archetype...按鈕，彈出窗口Add Archetype

輸入骨架的坐標信息。
Group Id : org.codehaus.mojo
Artifact Id : gwt-maven-plugin
Version : 2.7.0

點擊OK

返回到第1步

選中記錄，點擊Next按鈕，到下一步

輸入你要創建的項目的相關信息，如下圖所示：

輸入你要創建的項目的坐標信息，如果不清楚概念，建議學習一下Maven中坐標的概念

輸入模塊名稱

點擊Add...按鈕，添加模塊

點擊Finish按鈕，完成創建GWT項目。

刪除不需要的文件

按照我們下載的gwt的骨架，Maven給我們生成了GWT的項目，文件結構如下圖所示：

因為是默認生成的項目，有些文件或者內容是我們不需要的，我們來刪掉它們。

刪除文件，如下圖所示：

步驟就直接看圖吧。

修改文件

打開入口類：smartgwtdemo4.java

刪除所有的代碼，換成圖中所示的代碼。
代碼如下所示：

package com.test.smartgwtdemo4.client;import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.RootPanel;public class smartgwtdemo4 implements EntryPoint {public void onModuleLoad() {com.smartgwt.client.widgets.IButton button = new com.smartgwt.client.widgets.IButton("smartGWt的按鈕組件");RootPanel.get().add(button);com.google.gwt.user.client.ui.Button gwtButton = new com.google.gwt.user.client.ui.Button("GWT的按鈕組件");RootPanel.get().add(gwtButton);} }

從代碼中可以看出來，我使用了GWT的組件Button和SmartGWT的組件IButton。如果頁面上能夠正確顯示著兩個按鈕，那么說明SmartGWT就創建成功了。
報錯？沒錯，因為現在還沒修改Maven的配置文件POM.xml呢。

修改web.xml文件，入下圖所示：

打開web.xml

修改代碼如下所示

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-appPUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd"><web-app><welcome-file-list><welcome-file>smartgwtdemo4.html</welcome-file></welcome-file-list></web-app>

修改smartgwtdemo4.html,如下圖所示：

打開頁面smartgwtdemo4.html

修改代碼如下：

<!doctype html><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="smartgwtdemo4.css"> <title>smartgwtdemo4</title> </head> <body><script type="text/javascript">var isomorphicDir = "smartgwtdemo4/sc/";</script><script type="text/javascript"src='smartgwtdemo4/sc/modules/ISC_Core.js'></script><script type="text/javascript"src='smartgwtdemo4/sc/modules/ISC_Foundation.js'></script><script type="text/javascript"src='smartgwtdemo4/sc/modules/ISC_Containers.js'></script><script type="text/javascript"src='smartgwtdemo4/sc/modules/ISC_Grids.js'></script><script type="text/javascript"src='smartgwtdemo4/sc/modules/ISC_Forms.js'></script><script type="text/javascript"src='smartgwtdemo4/sc/modules/ISC_RichTextEditor.js'></script><script type="text/javascript"src='smartgwtdemo4/sc/modules/ISC_DataBinding.js'></script><script type="text/javascript"src='smartgwtdemo4/sc/modules/ISC_Calendar.js'></script><script type="text/javascript"src='smartgwtdemo4/sc/modules/ISC_Drawing.js'></script><script type="text/javascript"src='smartgwtdemo4/sc/skins/Enterprise/load_skin.js'></script><script type="text/javascript" lang="javascript"src="smartgwtdemo4/smartgwtdemo4.nocache.js"></script> </body> </html>

接下來修改模塊定義文件，如下圖所示：

雙擊打開模塊定義文件smartgwtdemo4.gwt.xml

修改配置如下所示：

<?xml version="1.0" encoding="UTF-8"?>  <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.7.0//EN""http://gwtproject.org/doctype/2.7.0/gwt-module.dtd"> <module rename-to='smartgwtdemo4'><inherits name='com.google.gwt.user.User' /><inherits name="com.smartgwt.SmartGwtNoScript" /><inherits name="com.smartgwt.DrawingNoScript" /><inherits name="com.smartgwt.tools.SmartGwtTools" /><inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlueResources" /><entry-point class='com.test.smartgwtdemo4.client.smartgwtdemo4' /><source path='client' /></module>

修改Maven的配置文件POM.xml，如下圖所示：

雙擊打開Maven的配置文件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"><modelVersion>4.0.0</modelVersion><groupId>com.test</groupId><artifactId>smartgwtdemo4</artifactId><packaging>war</packaging><version>0.0.1-SNAPSHOT</version><name>GWT Maven Archetype</name><properties><gwt.version>2.7.0</gwt.version><maven.compiler.source>1.7</maven.compiler.source><maven.compiler.target>1.7</maven.compiler.target><junit.version>4.11</junit.version><smartgwt.version>6.0</smartgwt.version><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><dependency><groupId>com.google.gwt</groupId><artifactId>gwt-servlet</artifactId><version>${gwt.version}</version><scope>runtime</scope></dependency><dependency><groupId>com.google.gwt</groupId><artifactId>gwt-user</artifactId><version>${gwt.version}</version><scope>provided</scope></dependency><dependency><groupId>com.google.gwt</groupId><artifactId>gwt-dev</artifactId><version>${gwt.version}</version><scope>provided</scope></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>${junit.version}</version><scope>test</scope></dependency><dependency><groupId>com.smartgwt</groupId><artifactId>smartgwt</artifactId><version>${smartgwt.version}</version></dependency></dependencies><build><outputDirectory>${project.build.directory}/${project.build.finalName}/WEB-INF/classes</outputDirectory><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>2.5.1</version><configuration><source>${maven.compiler.source}</source><target>${maven.compiler.target}</target></configuration></plugin><plugin><groupId>org.codehaus.mojo</groupId><artifactId>gwt-maven-plugin</artifactId><version>2.7.0</version><executions><execution><goals><goal>compile</goal><goal>test</goal><goal>generateAsync</goal></goals></execution></executions><configuration><extraJvmArgs>-Xms1024M</extraJvmArgs><runTarget>smartgwtdemo4.html</runTarget><modules><module>com.test.smartgwtdemo4.smartgwtdemo4</module></modules></configuration></plugin></plugins></build></project>

提示：對于SmartGWT的jar包，我在Maven的中央倉庫中只發現了到2.5版本的，并沒有發現最新版的，而現在最新版已經到了6.1版本了。所以我去SmartGWT官網下載了6.0版本的jar包，然后上傳到了Nexus私服里面。如果你沒有搭建私服，或者你需要搭建一個私服，放心，搭建私服并不困難。

刷新Maven配置，入下圖所示：

現在好了，項目已經沒有顯示錯誤了，讓我們來測試一下項目是否能用吧。

測試項目

安裝項目到本地倉庫

如下圖所示：

右鍵選中項目->Run As ->Maven install

執行要一段時間，一定要耐心等待。有時候會執行失敗，再試一次可能就行了。

運行項目

如下圖所示：

打開窗口Edit Configuration

打開窗口

右鍵選中項目->Run As ->Maven build…

在目標輸入框中輸入：gwt:clean gwt:run

點擊Run按鈕

點擊按鈕：GWT Developement Mode

運行結果

如下圖所示：

附錄

如何使用自己的Maven:
http://blog.csdn.net/wang465745776/article/details/51095556

如何上傳第三方插件到Nexus私服
http://blog.csdn.net/wang465745776/article/details/52527905

本教程代碼，見我上傳的資源

2016-10-17號補充

教程中遺留了，在創建SmartGWT項目的時候，需要引入SmartGWT的一些JS包。在這里，我直接貼出我的smartgwtdemo4.html的內容，代碼如下：

總結

以上是生活随笔為你收集整理的如何创建一个基于Maven的SmartGWT项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： editplus自动换行html,edi
下一篇：制作准考证方法wps版