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

最新推荐文章于 2024-04-22 17:39:51 发布

woshimyc

最新推荐文章于 2024-04-22 17:39:51 发布

阅读量1k

点赞数

分类专栏： GWT 文章标签： gwt ajax radiobutton textbox myeclipse button

GWT 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

概要说明：

Tab、RadioButton和ComboBox的使用方法。

创建一个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那样：

…