GWT Tutorials节选

本文写的乱七八糟..只作为自己回忆之用

需要下载Google插件提供开发的便利

建立专门的工程后，直接使用run进行运行,提供了后台的请求支持--接收请求信息

Tutorials 教程部分

widgets组件
FlexTable组件，提供了灵活的表格,不需要知道多少列,能够方便的进行添加行

Buttons组件,使用div构建的,跨平台按钮--相同的样式

Input Box组件,提供了四种不同输入组件
1:TextBox widget 单行输入
2:PassWordTextBox widget 密码输入
3:TextArea widget 多行输入组件
4:SuggestBox 提供选择的输入组件

Label widget 组件
使用Div构建,块元素

布局与容器元素  Panels
GWT使用这些Panel元素进行元素布局,使用的是html的div或者table.Panel可以相互进行嵌套

Horizontal Panel  横向布局的Panel
Vertical Panel    竖向布局的Panel
Root Panel 并不用于布局显示的Panel,用于局部提交数据,与后台进行异步交互,默认为包装body为Root

Panel
元素获取的方法
RootPanel.get()             // Default. Wraps the HTML body element.
RootPanel.get("stockList")  // Wraps any HTML element with an id of "stockList"

主文件为java类,需要继承EntryPoint接口,并且在onModuleLoad方法中添加所有的组件,以及事件监听

在添加组件到页面前,必须先将组件添加到Root Panel中,其中Root Panel可以为div元素,或者body
如  RootPanel.get("stockList").add(mainPanel);  //其中stocklist为页面上指定的div的id

GWT同样提供了多种不同的事件监听器接口,用于处理事件
常用匿名类的方式进行事件监听

Window.alert()等价与客户端的alert
这里使用的事件模型为调用后台的代码,异步调用

可以使用ArrayList等容器,绑定组件的数据源

GWT Timer计算器的时候,例子中用于自动的刷新局部区域

在例子中,常使用了stocks.indexOf(price.getSymbol()),获取指定元素在集合中的元素

可以使用两种方式设置css样式
1:使用module里面的xml配置
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
2:使用在html中直接插入元素标签
  <link type="text/css" rel="stylesheet" href="StockWatcher.css">

GWT 包含了三种皮肤样式
Standard, Chrome, and Dark. 默认为Standard,通过module的xml文件进行自定义配置

GWT的皮肤包含了RTL 右到左的样式设置,可以通过
<inherits name='com.google.gwt.user.theme.standard.StandardRTL'/> 进行设置

可以在自动生成的module类的css中,设置自定义的属性样式,然后在java类中进行样式的选择
如:stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader");
为设置第一行的style为warchListHeader,如同设置生成html元素的class属性

添加自动绑定组件状态的样式.用于在组件状态变更后自动运用

同样,也可以通过设置GWT组件的方法设置部分的HTML样式
如:stocksFlexTable.setCellPadding(6);


在GWT中用于实现国际化internationalization的方法
Static String Internationalization --类似资源文件的方式
Dynamic String Internationalization--灵活,可是速度较慢
Localizable Interface--最强大的方法

GWT提供了i18nCreator工具,自动创建java接口去访问资源文件

Static String Internationalization 进行国际化的过程
1:需要去使用两个类实现两个接口
GWT Constants interface
GWT Messages interface
2:对于每种需要支持的语言,都需要去建立两个资源文件

上面接口使用接口继承接口的形式.在读取资源文件过程中,会根据类型进行自动选择

具体流程
1:建立接口继承指定接口,分别去定义不同属性的获取方法,并且设置默认值
如:
@DefaultStringValue("StockWatcher")
String stockWatcher();

Note: 国际化中注意保证文件的编码都为utf-8
如 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

2:创建对应类名称的properties资源文件,与类文件在同一目录,不带后缀的为默认资源文件
如:StockWatcherConstant_cn.properties

Messages interface接口能够通过参数调用,返回不同的结果
就在资源文件中使用{0}控制传入的参数,返回完成的带参数的字符串结果

对于格式的使用,类似Java中的MessageFormat

3:替换HTML上的硬编码字符,以及在后台替换硬编码的字符串内容
使用带id的html标签进行替换

指定当前国家化语言---Localizing
在module相关的xml文件中定义
<extend-property name="locale" values="de"/>
表示加载该资源文件,在使用的时候,默认为英语,如果要指定区域可以在url后加入
http://localhost:8888/StockWatcher.html?locale=cn

设置区域的方法有两种
1:html中的<meta name="gwt:property" content="locale=de"> ,可以通过http请求进行解析
2:使用url的方法 使用?locale=cn进行直接的指定

GWT中与远程进行连接的方式,区别与不同的通信的传输协议
1:Making Remote Procedure Calls (GWT RPC)
包装了java数据对象与js对象的自动序列化

2:Retrieving JSON Data via HTTP
可以通过xml或者json进行数据的传输

3:Making Cross-Site Requests for JSONP
用于跨站点的调用js请求


具体使用流程
一:Making Remote Procedure Calls

1:创建一个接口,继承RemoteService.----客户端使用
需要在class上使用注解
@RemoteServiceRelativePath("stockPrices"),用于表示该servlet的url访问路径

2:实现服务端代码--需要专门放置在package里面,并不会被生成js代码

创建类,以impl为后缀,继承RemoteServiceServlet类,并且实现前面定义的client的接口StockPriceService

访问的URL为http://localhost:8888/stockwatcher/stockPrices

3:创建异步调用接口,命名规则为后缀Async,用于定义客户端的回调方法

4:在客户端,即主module中创建异步调用接口的实例,使用GWT的方式,并且实现对应对象的响应事件

5:序列化Java对象 Serializing
使用GWT RPC时,需要对进行传递的Java对象 实现序列化.不同于原来的Java的Serializable 接口

必须包含3个条件
1:必须实现Java Serializable or GWT IsSerializable interface,
2:没有final,non-transient实例成员
3:无参的构造函数

迁移GWT工程到已有工程时,需要注意
1:gwt-servlet.jar file must be in the WEB-INF/lib  需要人工进行放置
  Noto Url:http://code.google.com/support/bin/answer.py?answer=63584&topic=13015
2:注意在web.xml中添加对应的Servlet元素,<servlet-mapping>中的url必须使用绝对路径 /开头


Retrieving JSON Data  使用JSON的传输方式

可以使用eval将json转换成javaScript对象

1:创建专门的JavaScript对象,新建class继承JavaScriptObject,
使用protected级别的无参构造函数,对于获取属性的方法,使用public final native的修饰

native修饰符的使用比较特殊一些

2:在module的xml中配置
<inherits name="com.google.gwt.http.HTTP" />

3:绑定对应的http请求
会通过一个返回的servlet来获取结果值,所以并不会每次都自动刷新

Note注意:这里的数据Servlet可能被缓存,需要手动设置不缓存
resp.setHeader("cache-control","no-store");

关键是使用RequestBuilder 进行异步的请求

JSONP的方式
This technique is called JSON with Padding (JSONP).

在java类中  使用方法签名的/*-{}-*/进行客户端 js代码的编写
jsonp的代码编写比较麻烦...暂不考虑


Unit Testing GWT Applications with JUnit
使用JUnit对GWT进行单元测试

GWTTestCase 用于支持Junit的测试用例

也可以使用命令行工具 junitCreator 进行单元测试