在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控件,到那时大家就会看到同一个功能页面,展示的不用页面渲染效果哦~~~~