当前位置: 代码迷 >> Ajax >> GWT - GWT Designer开发Ajax使用 (06) - 常用控件使用
  详细解决方案

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

热度:546   发布时间:2012-10-31 14:37:31.0
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中的运行结果与上相同,略。

  相关解决方案