GXT之旅：第一章：初识ExtGWT(4)——用Eclipse创建空GXT项目

在GWT项目开始真正的GXT的之旅

之前我们都是开始搭建一个GWT项目，如何编译，运行她，在jetty和tomcat上。以及一些需要注意的问题。现在我们需要把这个项目用GXT做一下修改。

步骤如下：

• 导入GXT类库：

找到FirstApp项目，右键，进入Java Build Path，引入GXT-2.2.5类库。

并且把gxt-.2.25-gwt22.jar拷贝到FirstApp\WebContent\WEB-INF\lib里面以保证项目运行环境。

• 在GWT module 配置里，加入GXT的entry：

GWT module 文件（FirstApp.gwt.xml），她配置了GWT程序的入口配置，以及所引用的一些额外的使用类库。她始终以“gwt.xml”文件名结尾，并且放在项目的基包（com.danielvaughan.firstapp/FirstApp.gwt.xml）里面。为了使用GXT，我们需要修改里面的内容。

默认情况下，GWT项目引用她自带的样式包（<inherits name='com.google.gwt.user.theme.standard.Standard'/>）。现在我们要使用GXT的样式包（<inherits name='com.extjs.gxt.ui.GXT' />），修改后的FirstApp.gwt.xml文件如下：

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='firstapp'>
	<!-- Inherit the core Web Toolkit stuff.                        -->
	<inherits name='com.google.gwt.user.User' />

	<!-- Inherit the default GWT style sheet.  You can change       -->
	<!-- the theme of your GWT application by uncommenting          -->
	<!-- any one of the following lines.                            -->
	<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/>-->
	<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
	<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

	<!-- Other module inherits                                      -->
	<inherits name='com.extjs.gxt.ui.GXT' />
	<!-- Specify the app entry point class.                         -->
	<entry-point class='com.danielvaughan.firstapp.client.FirstApp' />

	<!-- Specify the paths for translatable code                    -->
	<source path='client' />
	<source path='shared' />

</module>

•  拷贝GXT SDK目录里面的resources文件夹到项目WebContent下，然后重命名为gxt，然后整个项目的结构目录如下：

• 修改FirstApp.html文件，引用GXT的css
  

<link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css">

• 注意此时还不能运行项目，因为默认项目是使用GWT的控件来完成页面渲染，我们目前仅仅引入了GXT的css，并没有使用GXT的控件
• 下一节我们会FirstApp项目里面的GWT控件替换为GXT控件，到那时大家就会看到同一个功能页面，展示的不用页面渲染效果哦～～～～