GWT - GWT Designer开发Ajax应用 (06) - 常用控件使用

http://blog.csdn.net/pathuang68/article/details/4272424

概要说明：

Tab、RadioButton和ComboBox的使用方法。

1.

创建一个GWT Java Project

?

图1

设定项目名称为：TestSeveralWidgets，点击Finish按钮：

?

?

图2

做一下工作：

-?选中Create GWT Module

-?将Module Name设为：TestSeveralWidgets

-?将Package Name设为：com.pnft.ajax

点击Finish按钮。

?

做完这些工作后，这个新建的项目大致是这样的：

?

图3

?

选中src目录，修改项目属性，使其字符集为UTF-8。因为后面我们要用到中文。?

注意：创建GWT Project的详细过程，请见GWT Designer04。

?

2.?新建一个Composite

?

图4

如下图将Composite的Name设定为：TestSeveralWidgetsComposite。

?

图5

点击Finish按钮。做完这些工作后Composite的情况大致如下：

?

图6

?

3.?切换到TestSeveralWidgetsComposite的Design视图

?

图7

?

选中Palette中的TabPanel，

?

图8

?

放置到Empty Composite上，得到：

?

图9

?

4.?在Palette中选中AbsolutePanel，

?

图10

?

将AbsolutePanel放置到步骤3中TabPanel上，得到：

?

图11

?

修改刚才放置的AbsolutePanel的属性：

?

图12

- variable:??????????absolutePanel1

- height:?????????????300px

- styleName:?????tabpanel

- tab title:????????????First Tab

?

?

其中，tabpanel是新增加的css，其内容如下图：

?

图13

注意在新增css时，前面的“.”不能去掉(如上图所示“.tabpanel”)，但在程序中或者属性栏中，使用或显示的均是“tabpanel”，

比如，前面属性修改完成后，GWT Designer会在程序中自动为我们生成一些代码，其中有：

????absolutePanel1.setStyleName("tabpanel");

这就是在程序中引用css的方法。

?

5.?重复4，再增加一个tab(在红线处)

?

图14

其属性修改情况如下：

?

图15

?

6.?在First Tab (即absolutePanel1)上增加一个Label、一个TextBox和一个按钮：

?

图16

增加.gwt-button这个css

?

7.?在第二个Tab (即absolutePanel2)上增加6个Radio Button：

?

图17

6个RadioButton分成两组：

group1：

variable: radioButton1???????text:?单选按钮一

variable: radioButton2???????text:?单选按钮二

variable: radioButton3???????text:?单选按钮三

group2：

variable: radioButton4???????text:?单