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

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:?单选按钮四

variable: radioButton5???????text:?单选按钮五

variable: radioButton6???????text:?单选按钮六

?

8.?继续在第二个Tab (即absolutePanel2)上增加一个ComboBox：

?

图18

variable:?????????????comboBox

修改items属性：

?

图19

点击OK按钮。

?

预览一下我们的设计：

?

图20

?

9.?修改GWT Designer自动生成的代码。到目前为止，GWT Designer为我们生成了一下代码：

public?class?TestSeveralWidgetsComposite?extends?Composite

{

????public?TestSeveralWidgetsComposite()

{

????????final?TabPanel tabPanel =?new?TabPanel();

????????initWidget(tabPanel);

?

????????final?AbsolutePanel absolutePanel1 =?new?AbsolutePanel();

????????tabPanel.add(absolutePanel1,?"First Tab");

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

????????absolutePanel1.setHeight("300px");

?

????????final?Label label =?new?Label("New Label");

????????absolutePanel1.add(label, 38, 64);

?

????????final?TextBox textBox =?new?TextBox();

????????absolutePanel1.add(textBox, 109, 58);

?

????????final?Button okButtonOK =?new?Button();

????????absolutePanel1.add(okButtonOK, 276, 57);

????????okButtonOK.setText("OK");

?

????????final?AbsolutePanel absolutePanel2 =?new?AbsolutePanel();

????????tabPanel.add(absolutePanel2,?"第二个Tab");

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

????????absolutePanel2.setHeight("300px");

?

????????final?RadioButton radioButton1 =?new?RadioButton("group1");

????????absolutePanel2.add(radioButton1, 39, 73);

????????radioButton1.setText("单选按钮一");

?

????????final?RadioButton radioButton2 =?new?RadioButton("group1");

????????absolutePanel2.add(radioButton2, 39, 98);

????????radioButton2.setText("单选按钮二");

?

????????final?RadioButton radioButton3 =?new?RadioButton("group1");

????????absolutePanel2.add(radioButton3, 39, 123);

????????radioButton3.setText("单选按钮三");

?

????????final?RadioButton radioButton4 =?new?RadioButton("group2");

????????absolutePanel2.add(radioButton4, 246, 73);

????????radioButton4.setText("单选按钮四");

?

????????final?RadioButton radioButton5 =?new?RadioButton("group2");

????????absolutePanel2.add(radioButton5, 246, 98);

????????radioButton5.setText("单选按钮五");

?

????????final?RadioButton radioButton6 =?new?RadioButton("group2");

????????absolutePanel2.add(radioButton6, 246, 123);

????????radioButton6.setText("单选按钮六");

?

????????final?ListBox comboBox =?new?ListBox();

????????absolutePanel2.add(comboBox, 39, 181);

????????comboBox.addItem("");

????????comboBox.addItem("谁家玉笛暗飞声，");

????????comboBox.addItem("散入春风满洛城。");

????????comboBox.addItem("此夜曲中闻折柳，");

????????comboBox.addItem("何人不起故园情。");

????????comboBox.addItem("一树寒梅白玉条，");

????????comboBox.addItem("迥邻村路傍溪桥。");

????????comboBox.addItem("不知近水花先发，");

????????comboBox.addItem("疑是经冬雪未消。");

????????comboBox.addItem("湖光秋月两相和，");

????????comboBox.addItem("潭面无风镜未磨。");

????????comboBox.addItem("遥望洞庭山水翠，");

????????comboBox.addItem("白银盘里一青螺。");

????????comboBox.setWidth("287px");

????????tabPanel.selectTab(0);

????}

}

?

修改上面的代码，将所有widget从构造方法TestSeveralWidgetsComposite中提出来，使其作为类的私有成员变量，修改后的代码如下：

public?class?TestSeveralWidgetsComposite?extends?Composite

{

????private?TabPanel?tabPanel;

????private?AbsolutePanel?absolutePanel1;

????private?Label?label;

????private?TextBox?textBox;

????private?Button?okButtonOK;

????private?AbsolutePanel?absolutePanel2;

????private?RadioButton?radioButton1;

????private?RadioButton?radioButton2;

????private?RadioButton?radioButton3;

????private?RadioButton?radioButton4;

????private?RadioButton?radioButton5;

????private?RadioButton?radioButton6;

????private?ListBox?comboBox;

?

????public?TestSeveralWidgetsComposite()

????{

????????tabPanel?=?new?TabPanel();

????????initWidget(tabPanel);

?

????????absolutePanel1?=?new?AbsolutePanel();

????????tabPanel.add(absolutePanel1,?"First Tab");

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

????????absolutePanel1.setHeight("300px");

?

????????label?=?new?Label("New Label");

????????absolutePanel1.add(label, 38, 64);

?

????????textBox?=?new?TextBox();

????????absolutePanel1.add(textBox, 109, 58);

?

????????okButtonOK?=?new?Button();

????????absolutePanel1.add(okButtonOK, 276, 57);

????????okButtonOK.setText("OK");

?

????????absolutePanel2?=?new?AbsolutePanel();

????????tabPanel.add(absolutePanel2,?"第二个Tab");

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

????????absolutePanel2.setHeight("300px");

?

????????radioButton1?=?new?RadioButton("group1");

????????absolutePanel2.add(radioButton1, 39, 73);

????????radioButton1.setText("单选按钮一");

?

????????radioButton2?=?new?RadioButton("group1");

????????absolutePanel2.add(radioButton2, 39, 98);

????????radioButton2.setText("单选按钮二");

?

????????radioButton3?=?new?RadioButton("group1");

????????absolutePanel2.add(radioButton3, 39, 123);

????????radioButton3.setText("单选按钮三");

?

????????radioButton4?=?new?RadioButton("group2");

????????absolutePanel2.add(radioButton4, 246, 73);

????????radioButton4.setText("单选按钮四");

?

????????radioButton5?=?new?RadioButton("group2");

????????absolutePanel2.add(radioButton5, 246, 98);

????????radioButton5.setText("单选按钮五");

?

????????radioButton6?=?new?RadioButton("group2");

????????absolutePanel2.add(radioButton6, 246, 123);

????????radioButton6.setText("单选按钮六");

?

????????comboBox?=?new?ListBox();

????????absolutePanel2.add(comboBox, 39, 181);

????????comboBox.addItem("");

????????comboBox.addItem("谁家玉笛暗飞声，");

????????comboBox.addItem("散入春风满洛城。");

????????comboBox.addItem("此夜曲中闻折柳，");

????????comboBox.addItem("何人不起故园情。");

????????comboBox.addItem("一树寒梅白玉条，");

????????comboBox.addItem("迥邻村路傍溪桥。");

????????comboBox.addItem("不知近水花先发，");

????????comboBox.addItem("疑是经冬雪未消。");

????????comboBox.addItem("湖光秋月两相和，");

????????comboBox.addItem("潭面无风镜未磨。");

????????comboBox.addItem("遥望洞庭山水翠，");

????????comboBox.addItem("白银盘里一青螺。");

????????comboBox.setWidth("287px");

????????tabPanel.selectTab(0);

????}

}

这样做的好处是，如果在类中增加了其他方法，那么其他方法也可以访问到这些widget，而前面那种方法是不方便的。

?

?

?

10.?增加单选按钮消息处理方法

?

图21

GWT Designer将自动生成下面带下划线的代码：

????????radioButton1?=?new?RadioButton("group1");

????????absolutePanel2.add(radioButton1, 39, 73);

????????radioButton1.addClickListener(new?ClickListener()

????????{

????????????public?void?onClick(final?Widget sender)

????????????{

????????????}

????????});

????????radioButton1.setText("单选按钮一");

?

可以采用同样的方法，给其他Widget增加消息处理方法。

?

但我们也可以采用另外一种方式，即将上面的代码带下划线的部分改为下面带下划线的代码：

????????radioButton1?=?new?RadioButton("group1");

????????absolutePanel2.add(radioButton1, 39, 73);

????????radioButton1.addClickListener(this);

????????radioButton1.setText("单选按钮一");

?

这时MyEclipse认为有问题了：

?

图22

选中最后一条，即“Let ‘TestSeveralWidgetsComposite’ implement ‘ClickListener’”，就是说让类

TestSeveralWidgetsComposite实现接口ClickListener。

?

但到此MyEclipse还是在提示问题，这是因为接口ClickListener中由一个onClick方法，TestSeveralWidgetsComposite类必须要实现它。

?

图23

选择“Add unimplemented methods”，

?

图24

注意：去掉@Override这个annotation，GWT 1.4.62(支持jdk1.4-)不支持java1.5中开始有的标注特性。

?

到此，MyEclipse不提示错误信息了。现在为radioButton2 ~ 6增加消息监听器，就像radioButton1那样：

????…

????radioButton2.addClickListener(this);

?????????...

????radioButton2.addClickListener(this);

?????????...

radioButton2.addClickListener(this);

?????????...

????radioButton2.addClickListener(this);

?????????...

????radioButton2.addClickListener(this);

?????????…

?

修改类的onClick方法，使之如下：

????public?void?onClick(Widget sender)

????{

????????if(sender ==?radioButton1)

????????{

????????????if(radioButton1.isChecked())

????????????{

????????????????Window.alert("RadioButton1 is checked...");

????????????}

????????}

????????else?if(sender ==?radioButton2)

????????{

????????????if(radioButton2.isChecked())

????????????{

????????????????Window.alert("RadioButton2 is checked...");

????????????}

????????}

????????else?if(sender ==?radioButton3)

????????{

????????????if(radioButton3.isChecked())

????????????{

????????????????Window.alert("RadioButton3 is checked...");

????????????}

????????}

????????else?if(sender ==?radioButton4)

????????{

????????????if(radioButton4.isChecked())

????????????{

????????????????Window.alert("RadioButton4 is checked...");

????????????}

????????}

????????else?if(sender ==?radioButton5)

????????{

????????????if(radioButton5.isChecked())

????????????{

????????????????Window.alert("RadioButton5 is checked...");

????????????}

????????}

????????else?if(sender ==?radioButton6)

????????{

????????????if(radioButton6.isChecked())

????????????{

????????????????Window.alert("RadioButton6 is checked...");

????????????}

????????}

????}

?

?

11.?增加comboBox的消息处理方法

?

图25

增加了下面带下划线的代码(当然也可以象10中那样进行处理)：

????????comboBox?=?new?ListBox();

????????absolutePanel2.add(comboBox, 39, 181);

????????comboBox.addChangeListener(new?ChangeListener()

????????{

????????????public?void?onChange(final?Widget sender)

????????????{

????????????}

????????});

????????comboBox.addItem("");

????????comboBox.addItem("谁家玉笛暗飞声，");

????????comboBox.addItem("散入春风满洛城。");

????????comboBox.addItem("此夜曲中闻折柳，");

????????comboBox.addItem("何人不起故园情。");

????????comboBox.addItem("一树寒梅白玉条，");

????????comboBox.addItem("迥邻村路傍溪桥。");

????????comboBox.addItem("不知近水花先发，");

????????comboBox.addItem("疑是经冬雪未消。");

????????comboBox.addItem("湖光秋月两相和，");

????????comboBox.addItem("潭面无风镜未磨。");

????????comboBox.addItem("遥望洞庭山水翠，");

????????comboBox.addItem("白银盘里一青螺。");

????????comboBox.setWidth("287px");

?

?????????修改上面带下划线的代码为：

????????comboBox.addChangeListener(new?ChangeListener()

????????{

????????????public?void?onChange(final?Widget sender)

????????????{

????????????????int?i =?comboBox.getSelectedIndex();

????????????????String z =?comboBox.getItemText(i);

????????????????Window.alert("Item "?+ i +?"'s text is "?+ z);

????????????}

????????});

?

?

12.?注意，两个不同Tab之间的Widget的variable必须唯一，不可重复。如在Tab1中有一个Widget对应的variable是“button”，那么在Tab2中就不可能有另外Widget对应的variable是“button”。

?

13.?将Tab1中的textBox，Tab2中的6个RadioButton和CombBox等Widget，用类似下图所示的方法进行Expose，这样就会让引用TestSeveralWidgetsComposite这个控件的其他应用，对TestSeveralWidgetsComposite中被Expose了的widget直接进行存取(见16)。

?

图26

到此，整个Composite的开发工作告一段落。

?

14.?在TestSeveralWidgets类中引用上面开发好的TestSeveralWidgetsComposite。

?

图27

点击Palette中的Choose Widget，

如下图，输入TestSeveralWidgetsComposite的名字，还未输入完成的时候，便可以在下面的文本框中看到我们想要引用的TestSeveralWidgetsComposite，选中它，

?

图28

点击OK按钮，在适当位置放置TestSeveralWidgetsComposite，如下图：

?

图29

调整TestSeveralWidgetsComposite的大小和位置，使之如下：

?

图30

这将会在TestSeveralWidgets类中的onModuleLoad方法的最后增加以下代码：

final?TestSeveralWidgetsComposite testSeveralWidgetsComposite =?new

TestSeveralWidgetsComposite();

????????rootPanel.add(testSeveralWidgetsComposite, 10, 10);

????????testSeveralWidgetsComposite.setSize("580px",?"358px");

?

修改上面的代码，将testSeveralWidgetsComposite作为类的私有成员。修改后TestSeveralWidgets类的代码如下：

…

public?class?TestSeveralWidgets?implements?EntryPoint

{

????private?TestSeveralWidgetsComposite?testSeveralWidgetsComposite;

????private?Button?clickMeButton;

?

????public?void?onModuleLoad()

????{

????????RootPanel rootPanel = RootPanel.get();

?

????????clickMeButton?=?new?Button();

????????rootPanel.add(clickMeButton, 265, 380);

????????clickMeButton.setText("Click me!");

????????clickMeButton.addClickListener(new?ClickListener()

????????{

????????????public?void?onClick(Widget sender)

????????????{

????????????????Window.alert("Hello, GWT World!");

????????????}

????????});

?

????????testSeveralWidgetsComposite?=?new?TestSeveralWidgetsComposite();

????????rootPanel.add(testSeveralWidgetsComposite, 10, 10);

????????testSeveralWidgetsComposite.setSize("580px",?"358px");

????}

…

?

15.?在hosted mode下的运行结果：

?

图31?

?

图32

??

图33

?

图34

应用的表现和我们预想的完全一致。

?

16.?增加Clickme按钮的代码，使得当点击Click Me按钮时，能够将Tab1?和Tab2中的Widget的状态合在一起显示出来。修改后整个TestSeveralWidgets类的代码如下：

public?class?TestSeveralWidgets?implements?EntryPoint

{

????private?TestSeveralWidgetsComposite?testSeveralWidgetsComposite;

????private?Button?clickMeButton;

?

????public?void?onModuleLoad()

????{

????????RootPanel rootPanel = RootPanel.get();

?

????????clickMeButton?=?new?Button();

????????rootPanel.add(clickMeButton, 265, 380);

????????clickMeButton.setText("Click me!");

????????clickMeButton.addClickListener(new?ClickListener()

????????{

????????????public?void?onClick(Widget sender)

????????????{

????????????????String summary;

????????????????//?获取Tab1中的文本框中的文字

????????????????summary =?testSeveralWidgetsComposite.getTextBox().getText();

????????????????//?获取RadioButton 1~6的状态，未考虑代码之优雅程度

????????????????if(testSeveralWidgetsComposite.getRadioButton1().isChecked()) summary +=

"/nRadio Button 1 is checked.";

????????????????if(testSeveralWidgetsComposite.getRadioButton2().isChecked()) summary +=

"/nRadio Button 2 is checked.";

????????????????if(testSeveralWidgetsComposite.getRadioButton3().isChecked()) summary +=

"/nRadio Button 3 is checked.";

????????????????if(testSeveralWidgetsComposite.getRadioButton4().isChecked()) summary +=

"/nRadio Button 4 is checked.";

????????????????if(testSeveralWidgetsComposite.getRadioButton5().isChecked()) summary +=

"/nRadio Button 5 is checked.";

????????????????if(testSeveralWidgetsComposite.getRadioButton6().isChecked()) summary +=

"/nRadio Button 6 is checked.";

?

????????????????//?获取ComboBox中被选中Item的index

????????????????int?index =?testSeveralWidgetsComposite.getComboBox().getSelectedIndex();

????????????????//?获取ComboBox中被选中Item的text，并加入到summary中

????????????????summary +=?"/n"?+

testSeveralWidgetsComposite.getComboBox().getItemText(index);

?

????????????????Window.alert(summary);

????????????}

????????});

?

????????testSeveralWidgetsComposite?=?new?TestSeveralWidgetsComposite();

????????rootPanel.add(testSeveralWidgetsComposite, 10, 10);

????????testSeveralWidgetsComposite.setSize("580px",?"358px");

????}

}

?

17.?再次在hosted mode下运行。

?

图35

如下图，在First Tab中输入“玄机逸士之武功研究”

?

图36

点击“第二个Tab”，并做出如下图所示的选择：?

?

图37

点击Click me！按钮，得到：

?

图38

所得结果和预想相同。

?

18.?部署到Tomcat6上，并在IE6和FireFox3中运行。

?

图39

?

图40

点击OK按钮，开始部署。下图是部署成功后的情形：

?

图41

?

启动Tomcat6，如果还没有启动的话。

?

?

IE中的运行结果：

?

图42

点击“第二个Tab”，并做出如下图所示的选择：

?

图43

点击Click me！按钮，得到：

?

图44

结果正确。

?

FireFox3中的运行结果与上相同，略。