GWT-Ext是Google Web Tookit(GWT)带给我们的一组伟大的widgets,当前最新的GWT版本是1.7。
在以下的步骤中,我描述了建立一个GWT 1.7的工程并把它配置为GWT-Ext的必要操作:
1 安装google plugin for eclipse http://code.google.com/eclipse/docs/getting_started.html
2 使用plugin创建一个简单的GWT应用:
Select File -> New -> Web Application Project from the Eclipse menu.
In the New Web Application Project wizard, enter a name for your project (e.g. MegaDeth) and a java package name, e.g., com.megadeth.Take the tick out of the Use Google App Engine tick box.
Click Finish.
3 运行应用程序:
Right click it in package explorer and select Run As -> Run Configurations
Put a tick in the Automatically Select Unused Port tickbox.
Click Run to see the default GWT 1.7 application
4 下载gwtext-2.0.5.zip, 解压缩之后将gwtext.jar 拷贝到项目的\WEB-INF\lib路径下。
5 在工程的war路径下建立一个js路径。
6 下载ext-2.0.2.zip,解压缩之后将其中的内容拷贝到js路径。
7 右键点击项目,选择刷新,让eclipse显示出新的jar包,和js路径。
8 添加gwtext.jar进入项目:
Right click on the project in package explore
Select Properties -> Java Build Path -> Libraries.
Click Add JARs, navigate to gwtext.jar in the project and double click it.
Click OK to close the properties dialog.
9 在项目的gwt.xml 文件中加入以下行:
<inherits name='com.gwtext.GwtExt' />
<stylesheet src="../js/ext-2.0.2/resources/css/ext-all.css" />
<script src="../js/ext-2.0.2/adapter/ext/ext-base.js" />
<script src="../js/ext-2.0.2/ext-all.js" />
10 按照以下方式改变项目的进入点:
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.widgets.Panel;
public class MegaDeth implements EntryPoint
{
public void onModuleLoad()
{
Panel mainPanel = new Panel();
mainPanel.setTitle("Hello World!");
mainPanel.setHeight(300);
mainPanel.setWidth(500);
RootPanel.get().add(mainPanel);
}
}
11 从项目的html文件中删除以下行:
<h1>Web Application Starter Project</h1>
<table align="center">
<tr>
<td colspan="2" style="font-weight:bold;">Please enter your name:</td>
</tr>
<tr>
<td id="nameFieldContainer"></td>
<td id="sendButtonContainer"></td>
</tr>
</table>
12 运行
在以下的步骤中,我描述了建立一个GWT 1.7的工程并把它配置为GWT-Ext的必要操作:
1 安装google plugin for eclipse http://code.google.com/eclipse/docs/getting_started.html
2 使用plugin创建一个简单的GWT应用:
Select File -> New -> Web Application Project from the Eclipse menu.
In the New Web Application Project wizard, enter a name for your project (e.g. MegaDeth) and a java package name, e.g., com.megadeth.Take the tick out of the Use Google App Engine tick box.
Click Finish.
3 运行应用程序:
Right click it in package explorer and select Run As -> Run Configurations
Put a tick in the Automatically Select Unused Port tickbox.
Click Run to see the default GWT 1.7 application
4 下载gwtext-2.0.5.zip, 解压缩之后将gwtext.jar 拷贝到项目的\WEB-INF\lib路径下。
5 在工程的war路径下建立一个js路径。
6 下载ext-2.0.2.zip,解压缩之后将其中的内容拷贝到js路径。
7 右键点击项目,选择刷新,让eclipse显示出新的jar包,和js路径。
8 添加gwtext.jar进入项目:
Right click on the project in package explore
Select Properties -> Java Build Path -> Libraries.
Click Add JARs, navigate to gwtext.jar in the project and double click it.
Click OK to close the properties dialog.
9 在项目的gwt.xml 文件中加入以下行:
<inherits name='com.gwtext.GwtExt' />
<stylesheet src="../js/ext-2.0.2/resources/css/ext-all.css" />
<script src="../js/ext-2.0.2/adapter/ext/ext-base.js" />
<script src="../js/ext-2.0.2/ext-all.js" />
10 按照以下方式改变项目的进入点:
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.widgets.Panel;
public class MegaDeth implements EntryPoint
{
public void onModuleLoad()
{
Panel mainPanel = new Panel();
mainPanel.setTitle("Hello World!");
mainPanel.setHeight(300);
mainPanel.setWidth(500);
RootPanel.get().add(mainPanel);
}
}
11 从项目的html文件中删除以下行:
<h1>Web Application Starter Project</h1>
<table align="center">
<tr>
<td colspan="2" style="font-weight:bold;">Please enter your name:</td>
</tr>
<tr>
<td id="nameFieldContainer"></td>
<td id="sendButtonContainer"></td>
</tr>
</table>
12 运行