GWT表单小部件详解

### GWT表单小部件详解 在Web开发中，表单小部件是与用户交互的重要组成部分。GWT（Google Web Toolkit）提供了丰富的表单小部件，可用于创建各种交互式Web应用程序。下面将详细介绍GWT中的各类表单小部件。 #### 1. 外部链接创建 在GWT中，若要创建外部资源链接，不能直接使用某些默认功能，需借助HTML小部件并添加锚标签。示例代码如下： ```java HTML externalLink = new HTML("<a href='http://www.rdews.com'>Ryan's Site</a>"); ``` 当用户点击此链接时，浏览器会卸载当前应用程序，并加载链接指向的资源。若应用程序使用历史标记正确处理状态，用户点击浏览器的返回按钮时，将回到离开应用时的状态。 此外，还可使用GWT的DOM类创建自定义的外部链接小部件。 #### 2. 表单小部件概述 GWT提供的表单小部件通常用于HTML表单，但与传统HTML表单不同。传统HTML表单提交后会刷新页面，而Ajax应用程序则尝试消除这种页面刷新，通常异步将数据提交到服务器。GWT的表单小部件不一定要在HTML表单内使用，使用方式更灵活，类似于桌面应用程序中的对应部件。 GWT自带的表单小部件有：Button、CheckBox、RadioButton、ListBox、TextBox、PasswordTextBox、TextArea、FileUpload和Hidden。GWT 1.4版本还增加了一些更复杂的表单小部件，如ToggleButton、PushButton、SuggestBox和RichTextArea。 #### 3. 按钮（Button） Button小部件封装了HTML表单中类型为button的输入元素。在HTML中，通过`input`标签的`type`属性指定输入类型，添加按钮的代码如下： ```html <input type="button"> ``` 在GWT中，按钮不仅可用于表单数据提交，还能调用应用程序内的任何操作。例如，在搜索应用中，可使用按钮提交搜索查询。示例代码如下： ```java Button submitButton = new Button("Search"); searchPanel.add( submitButton ); ``` 上述代码创建了一个按钮，并将其添加到父容器中显示。当用户按下搜索按钮时，应用程序处理点击事件并执行从多个搜索引擎检索搜索结果的代码。与传统Web应用不同，Ajax应用可异步向服务器提交请求而不刷新页面。 Button小部件类实现了`SourcesClickEvents`接口，可让应用程序代码处理点击事件。可添加点击监听器，示例如下： ```java submitButton.addClickListener( new ClickListener(){ public void onClick(Widget sender){ doSearch(); } }); ``` 此外，Button小部件和其他许多表单小部件还通过实现`HasFocus`接口和`SourcesFocusEvents`支持焦点功能，允许以编程方式处理小部件获得或失去键盘焦点的情况。 #### 4. 切换按钮（ToggleButton）和推按钮（PushButton） ToggleButton和PushButton是用户界面库中另外两种类型的按钮，使用方式与普通Button小部件类似。 ToggleButton与Button的区别在于，点击ToggleButton后，它会保持按下状态，直到再次点击才恢复。例如，文字处理器中的加粗按钮就是这种类型。 PushButton的行为与Button相同，但支持根据其状态自定义外观。 这两种按钮都继承自`CustomButton`类，该类提供了为不同按钮状态显示不同按钮面的通用功能。按钮面可以是文本、HTML或图像。为不同按钮状态提供不同面，可创建自定义按钮，使其行为类似于普通按钮。 `CustomButton`实现支持六种不同的按钮状态，每种状态可以有不同的按钮面和独立的CSS样式。具体状态如下表所示： | 按钮状态 | ToggleButton | PushButton | | --- | --- | --- | | Button up | gwt-ToggleButton-up | gwt-PushButton-up | | Button down | gwt-ToggleButton-down | gwt-PushButton-down | | Button up, mouse hovering | gwt-ToggleButton-up-hovering | gwt-PushButton-up-hovering | | Button up, disabled | gwt-ToggleButton-up-disabled | gwt-PushButton-up-disabled | | Button down, mouse hovering | gwt-ToggleButton-down-hovering | gwt-PushButton-down-hovering | | Button down, disabled | gwt-ToggleButton-down-disabled | gwt-PushButton-down-disabled | 至少需要为`Button up`状态定义一个面。若未定义其他面，则该面将用于所有状态。状态遵循层次结构来确定显示哪个面，若某个状态的面未定义，将使用层次结构中更高级别的面。 创建ToggleButton的示例代码如下： ```java ToggleButton minimizeButton = new ToggleButton(new Image("minimize1.gif"), new Image("minimize2.gif")); ``` 也可使用`Face`类调整每个按钮面的内容。例如，更改按钮按下状态的面： ```java minimizeButton.getDownFace().setImage(new Image("minimize2.gif")); ``` #### 5. 复选框（Checkbox） Checkbox小部件封装了HTML的复选框输入标签。与Button小部件类似，它支持焦点行为和点击事件，但有被选中或未被选中的状态。默认状态为未选中，用户点击时状态会切换。可使用`setChecked`方法以编程方式设置状态，传入`true`表示选中，`false`表示未选中。 示例代码如下： ```java final CheckBox checkBox = new CheckBox(); row.setWidget(0,0, checkBox ); checkBox.addClickListener( new ClickListener(){ public void onClick( Widget sender ){ if( checkBox.isChecked() ) label.addStyleName("ToDoList-Done"); else label.removeStyleName("ToDoList-Done"); } }); ``` 上述代码创建了一个复选框，并添加了点击监听器。当用户选中复选框时，会更改标签的CSS样式，添加删除线装饰。若只需静态标签，可直接在复选框上设置文本值： ```java checkBox.setText( "check me" ); ``` #### 6. 单选按钮（RadioButton） RadioButton小部件与CheckBox小部件类似，但它属于一组其他RadioButton，且同一时间只能有一个被选中。在一组CheckBox小部件中，用户可以选中任意数量的复选框。 示例代码如下： ```java RadioButton redButton = new RadioButton("colors", "red"); RadioButton greenButton = new RadioButton("colors", "green"); RadioButton blueButton = new RadioButton("colors", "blue"); panel.add( redButton ); panel.add( greenButton ); panel.add( blueButton ); ``` RadioButton小部件继承自CheckBox小部件，继承了其所有功能，包括`setChecked`/`isChecked`方法、焦点行为和客户端事件处理。 #### 7. 列表框（ListBox） ListBox小部件在最基本状态下与RadioButton小部件功能相同，为用户提供一组选项，用户只能选择其中一个。但ListBox将所有选项包含在一个小部件中，外观与RadioButton小部件不同，有两种显示方式： - **下拉框形式**：选项显示在下拉框中，选中的选项显示在框内，用户点击向下箭头按钮时显示列表选项。创建代码如下： ```java ListBox colorList = new ListBox(); colorList.addItem("red"); colorList.addItem("green"); colorList.addItem("blue"); panel.add( colorList ); ``` - **列表形式**：显示选项列表，选中的选项高亮显示。若列表项过多，会显示垂直滚动条。创建代码如下： ```java colorList.setVisibleItemCount(3); ``` ListBox小部件支持焦点行为和处理更改事件。当用户更改选中项时，会触发更改事件。示例代码如下： ```java colorList.addChangeListener( new ChangeListener(){ public void onChange( Widget sender ){ int selectedIndex = colorList.getSe ```