GWT - GWT Designer开发Ajax应用 (02)

前篇：http://blog.youkuaiyun.com/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.youkuaiyun.com/pathuang68/archive/2009/04/25/4123646.aspx