GWT - GWT Designer开发Ajax应用 (02)
来源:互联网 发布:mac地址修改不了 编辑:程序博客网 时间:2024/04/29 09:01
前篇:http://blog.csdn.net/pathuang68/archive/2009/04/24/4112177.aspx
注意:如果看不到完整的图片,可以鼠标右键->“图片另存为”的方法,存到本地看即可。
第一个GWT ajax 应用
先注意一下GWT/GWT Designer中的中文乱码问题:
方法一:将相关的Java源文件的编码改为UTF-8即可
图1
方法二:用%JAVA_HOME%/bin目录下的native2ascii.exe做转换。
下面开始第一个GWT - GWT Designer Ajax应用开发:
1. 新建一个GWT Java Project
图2
图3
图4
点击Next按钮,
图5
点击Finish按钮
图6
以上就是GWT Designer自动产生的代码。点击Design,并双击firstAjaxApp.java这个tab放大至全屏,
图7
选中Click me!按钮,并将其删除。
图8
保存,并双击firstAjaxApp.java这个tab,下面修改firstAjaxApp.java的字符集属性,
图9
图10
保存。
2. 新建一个GWT Composite:
图11
图12
点击Next按钮,取Composite的名称为FirstComposite:
图13
点击Finish按钮,
图14
点击下面Design tab,
图15
双击上面的FirstComposite.java,使之放大到全屏,
图16
增加一个FlexTable到EmptyComposite这个Panel上,
图17
图18
增加一个Lable widget到Empty FlexTable上,修改其Text属性,使之为“Username:”
图19
再如下图增加一个Label widget,并修改其Text属性,使之为“Password:”
图20
图21
如下图,增加一个TextBox widget,并修改其variable属性,使其为“textBoxUsername”:
图22
再增加一个PasswordTextBox widget,修改其variable属性,使其为“passwordTextBoxPassword”
图23
如下图增加一个Button widget,修改其variable属性,使其为
图24
图25
选中最外面的Panel上的Anchor(下边和右边中间的蓝色小点),使整个Composite缩小类似下图:
图26
如下图增加一个按钮,修改其属性,使其Text属性为“同意”,variable属性为“buttonOK”
图27
如下图再增加一个按钮,使其Text属性为“取消”,variable属性为“buttonCancel”
图28
图29
选中textBoxUsername,修改其colspan属性,使之为2:
图30
对passwordTextBoxPassword,做同样处理:
图31
至此,得到的结果如下:
图32
用如下图所示的方法Expose widget:
textBoxUsername, passwordTextBoxPassword,buttonOK以及buttonCancel
图33
图34
Expose的目的就是为了在别的Panel中放入Composite时,能够控制Composite中的单个widget。
选中buttonOK按钮,并查看其styleName属性,点击其右边“…”按钮:
图35
图36
点击Add按钮
图37
点击OK按钮,
图38
点击Edit按钮,做如下图所示的修改,
图39
点击OK按钮,
图40
右上角得到的是css脚本,点击OK按钮。保存,并缩小设计界面:
图41
3. 将FirstComposite加入到firstAjaxApp的rootPanel中
点击“Choose Widget”,
图42
图43
选中FirstComposite,然后点击OK按钮
图44
修改buttonOK的Text属性为“确认”如上图。修改按钮的style,如下:
图45
点击Add按钮,
图46
点击OK按钮,
图47
点击OK按钮即可修改buttonOK的Text的字号。选择buttonCancel按钮,使其styleName也为.gwt-Button1,最后得到:
图48
此时,如果我们回到Composite的界面,修改Composite,将“Username:”和“Password:”分别改为“用户名称:”和“用户密码”,并使字号变为12,得到:
图49
并将这两个Label的variable属性分别修改为labelUsername和labelPassword,然后都Expose出去。回到firstAjaxApp界面:
图50
出现乱码,做如下修改:
图51
图52
界面修改基本完成,点击Palette左上方的按钮,可以查看界面设计效果:
图53
图54
再回到设计界面,修改两个按钮的width和height属性:
图55
至此,界面设计工作告一段落。
4. 添加代码
添加buttonOK的处理代码:
图56
同样方式添加buttonCancel代码。回到Source tab,我们可以看到增加了下面高亮部分的代码:
图57
将上面高亮区的代码扩充如下:
图58
保存。
5. 试运行。
图59
得到结果:
图60
图61
图62
上述结果完全符合要求。
6. 正式发布
选中firstAjaxApp.java,单击右键,如下图进行发布:
图63
图64
点击browse按钮,
图65
点击OK按钮,
图66
成功完成。在D:/Tomcat6/webapps目录下,我们发现多了一个firstAjaxApp.war文件:
图67
在命令行下启动Tomcat6,firstAjaxApp将被自动发布:
图68
在IE中访问这个应用:
图69
先输入正确的用户名称和用户密码,点击确认按钮:
图70
现在输入错误的用户名称或者用户密码,点击确认按钮,
图71
点击取消按钮,
图72
以上测试证明,所有功能均成功实现。
注意:本应用并非必须使用Composite的方式。
后篇:http://blog.csdn.net/pathuang68/archive/2009/04/25/4123646.aspx
- GWT - GWT Designer开发Ajax应用 (02)
- GWT - GWT Designer开发Ajax应用 (01)
- GWT - GWT Designer开发Ajax应用 (03)
- GWT - GWT Designer开发Ajax应用 (04)
- GWT - GWT Designer开发Ajax应用 (06) - 常用控件使用
- GWT - GWT Designer开发Ajax应用 (06) - 常用控件使用
- GWT - GWT Designer开发Ajax应用 (05) 利用RPC传递对象
- GWT - GWT Designer开发Ajax应用 (05) 利用RPC传递对象
- 利用GWT开发高性能Ajax应用
- 利用GWT开发高性能Ajax应用
- 利用GWT开发高性能Ajax应用
- 利用GWT开发高性能Ajax应用
- 利用GWT开发高性能Ajax应用
- 利用GWT开发高性能Ajax应用
- GWT 开发AJAX
- GWT开发AJAX。。。。
- 使用GWT开发AJAX应用程序
- 使用GWT开发AJAX应用程序
- 在VC++程序中显示存储过程的执行进度
- 高手教你ie主页被篡改怎么办|加个参数永远不怕IE主页被修改
- Linux下启用CDMA1X PCMCIA
- cMAKE
- MySQL: 诡异的MySQL server has gone away及其解决
- GWT - GWT Designer开发Ajax应用 (02)
- AppDomain 类
- vm 中鼠标不对解决方法
- Spring2.5+Struts1.3.8+JPA(Hibernate实现)整合之二
- java初体验
- 数据库中索引原理
- Spring2.5+Struts1.3.8+JPA(Hibernate实现)整合之三
- 现在才发现csdn好强大
- ASP中的CheckBox