GWT - GWT Designer开发Ajax应用 (06) - 常用控件使用
shangsoft 2011-08-03
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中的运行结果与上相同，略。
