六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 24|回复: 0

GWT1

[复制链接]

升级  50%

31

主题

31

主题

31

主题

秀才

Rank: 2

积分
125
 楼主| 发表于 2013-1-29 09:16:22 | 显示全部楼层 |阅读模式
GWT的初步理解:

GWT
1.分为前端和后端,前端会编译为javascript,后端不用.
2.前端的实现方法和Swing相似,Google GWT 提供一组UI组件
3.Model 一个模块对应一个Model, 在对就的 xxx.gwt.xml中对Model进行配置. 一个Model对应一个Html页面,在这个页面引入该由该Model编译生成的javascript
4.RPC 前端与后端交互,RPC 主要用两个接口与一个实现类组成,
interface xxxService extends RemoteService 定义 Servcie方法
interface xxxServiceAsync 定义异步调用的方法,每个方法与 xxxService方法对应,在参数上加上了一个AsyncCallback,用于接收异步调用返回的结果
以上两个接口都定义在 client端,会被编译成javascript
xxxServiceImpl extends RemoteServiceServlet implements xxxService  实现 xxxService定义的方法,继承了 GWT提供的 RemoteServiceServlet,
其实就是一个Servlet,需要在web.xml对此Servlet进行配置.该实现类不需要编译为javascript,部署于服务器端
注意:需要通过RPC进行传递的Object都必须实现序列化接口 Serializable
RPC使用流程:
1).创建一个 xxxServiceAsync接口
xxxServiceAsync xxxService = GWT.create(xxxService.class);
2).创建一个AsyncCallBack 对象
final AsyncCallback callback = new AsyncCallback() {            @Override            public void onFailure(Throwable caught) {                //  throw new UnsupportedOperationException("Not supported yet.");                Window.alert(" fail: " + caught.getMessage());            }            @Override            public void onSuccess(Object result) {                //Window.alert("Add success");               // refreshCategoryTable();  //进行UI相关的操作            }        };
3).在UI的事件中或需要的地方进行RPC调用
xxxService.service方法(参数,callback);

RPC的调用和普通的 Ajax调用的方法是一样的.

5.样式,GWT 的UI可以自由设置样式,通过css,
1.定义好css,在 html中引入,然后再给UI添加在css中定义的样式,在 xxx.gwt.xml中可以指定默认的theme,如standard,Chrome,Dark
如在css中定义: .button{width:100px;background-color: #A1B9A2;height: 30px;}
中写Button时添加样式:addStockButton.addStyleName("button");这样addStockButton就会按照 .button中定义的样式显示
注意:如果在xxx.gwt.xml中设置了 默认的theme,则自定义的 css中有的属性可能会不起作用,需要注意。每种不同的UI有不同的添加css方法,调试css的时候可以用
firebug 查看具体部分的css应用是否正确.
参考http://code.google.com/webtoolkit/doc/latest/tutorial/style.html


6.面板的的布构造与功能有关,相关的操作或显示可用一个面板封装, 共用的AsyncCallback,ClickHander 可提取出来。

比如  save,cancel,delete,edit,等操作button可放在一个widget中,用一个方法来生 成这个Widget,生成Widget时把 button需要操作的参数传过去
如:
//category 为需要修改的category,row 为表格的行号, table为需要修改的table
Widget getCategoryOperateorWidget(final CategoryGWT category, final int row, final FlexTable table)

7. maven GWT: mvn archetype:generate -DarchetypeRepository=repo1.maven.org  -DarchetypeGroupId=org.codehaus.mojo   -DarchetypeArtifactId=gwt-maven-plugin  -DarchetypeVersion=2.2.0

8.EJB3 Entity with GWT Client,
1.GWT  client    端需要编译成javascript,所以要在 GWT client端使用EJB Entity,则在 client端需要有Entity的源码,
Entity的源码可以在 EJBModel 打包时换源码打包进jar包(用maven):
<build>        <!--如果不手动指定resource则默认打包 resources目录下的内容,手动指定后则只打包指定的内容 下例中 ejbmodel为Entity所在目录-->       <resources>            <resource>                <directory>src/main/java</directory>                <includes>                    <include>**/ejbmodel/*.java</include>                </includes>            </resource>            <resource>              <directory>src/main/resources</directory>                <includes>                    <include>**/*.xml</include>                </includes>            </resource>        </resources>
2.    还需要  all enums & interfaces from javax.persistence  java.io.Serializable as an alias for com.google.gwt.user.client.rpc.IsSerializable


1.download gwt sdk
2.netbean gwtplugin: gwt4nb https://gwt4nb.dev.java.net/ -->download
3.code.google.com/webtoolkit
4.create maven gwt project:  google: maven gwt archetype
UI:
http://code.google.com/webtoolkit/examples/
http://www.smartclient.com/smartgwt
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表