`
oraclestudy
  • 浏览: 477115 次
文章分类
社区版块
存档分类

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

 
阅读更多

前篇:GWT - GWT Designer开发Ajax应用 (05) 利用RPC传递对象

概要说明:

TabRadioButtonComboBox的使用方法。


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

如下图将CompositeName设定为:TestSeveralWidgetsComposite

5

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

6


3. 切换到TestSeveralWidgetsCompositeDesign视图

7


选中Palette中的TabPanel

8


放置到Empty Composite上,得到:

9


4. Palette中选中AbsolutePanel

10


AbsolutePanel放置到步骤3TabPanel上,得到:

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)上增加6Radio Button

17

6RadioButton分成两组:

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这个annotationGWT 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之间的Widgetvariable必须唯一,不可重复。如在Tab1中有一个Widget对应的variable是“button”,那么在Tab2中就不可能有另外Widget对应的variable是“button”。

13. Tab1中的textBoxTab2中的6RadioButtonCombBoxWidget,用类似下图所示的方法进行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中被选中Itemindex

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

// 获取ComboBox中被选中Itemtext,并加入到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上,并在IE6FireFox3中运行。

39

40

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

41

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

IE中的运行结果:

42

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

43

点击Click me!按钮,得到:

44

结果正确。

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

后篇:待续

分享到:
评论

相关推荐

    GWT-Ext 控件演示

    GWT-Ext 控件演示 GWT-Ext 控件演示

    GWT-Developer-Plugin

    GWT-Developer-Plugin

    gwt-dev-plugin-x86-对ie浏览器使用

    gwt代码调试插件gwt-dev-plugin-x86.msi,针对ie浏览器使用

    gwt-dev-plugin

    gwt-dev-plugin

    非常好的gwt-ext培训教程

    GWT-Ext 是基于 Google Web Toolkit(GWT)和 ExtJs 的功能强大的网页开发控件库。它扩展了 GWT,在 ExtJs 的基础上实现了有排序功能的表格(Grid)、分页、过滤,支持有拖拽功能的树,高度可定制的组合下拉框...

    gwt-user.jar

    gwt-user.jar 大小:2.86 MB

    gwt-comet-jar包+实例+source.jar包,

    里面东西很多,都是关于GWT-COMET的内容,实现gwt的服务器推技术,包括gwt-comet-examples-1.2.3:google官网上的Test实例;gwt-comet-1.2.3.jar:jar包,gwt-example:聊天实例源代码(.java的),gwt-event-source...

    gwt-windows-1.7.1.zip

    gwt-windows-1.7.1.zipgwt-windows-1.7.1.zipgwt-windows-1.7.1.zipgwt-windows-1.7.1.zipgwt-windows-1.7.1.zipgwt-windows-1.7.1.zip

    gwt-dev-windows.jar

    gwt-dev-windows.jar 大小:9.60 MB

    gwt-servlet-2.3.0.jar

    gwt-servlet-2.3.0.jar

    Gwt-Ext学习笔记之进级篇

    GWT-Ext 是基于 Google Web Toolkit(GWT)和 ExtJs 的功能强大的网页开发控件库。它非常适用于进行纯 Java 语言的富 Internet 应用的快速开发。本系列文章将详细讲解 GWT-Ext 的基本结构和功能特点,并通过代码示例...

    gwt-benchmark-viewer.jar

    gwt-benchmark-viewer.jar

    gwt-servlet.jar

    gwt-servlet.jar 最新版,由于文件太大、不可以上传、有需要可以留言、整包分享给你、

    GWT-ext 布局示例

    GWT-Ext 是基于 Google Web Toolkit(GWT)和 ExtJs 的功能强大的网页开发控件库。它非常适用于进行纯 Java 语言的富 Internet 应用的快速开发。本系列文章将详细讲解 GWT-Ext 的基本结构和功能特点,并通过代码示例...

    gwt-2.7.0.part2.rar

    gwt-2.7.0.part2.rar 官网下载最新版,提供给大家使用

    gwt-ex t学习必备资料

    gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-...

    gwt - dev - firefox16 plugin

    gwt - dev - firefox16 plugin

    gwt-servlet-1.4.61.jar

    gwt-servlet-1.4.61.jar

    gwt-dev-plugin for IE、FireFox、Chrome

    gwt-dev-plugin是GWT针对浏览器的安装插件,包含IE、FireFox、Chrome的。不需要的匆下,非学习文档

Global site tag (gtag.js) - Google Analytics