GXT界面构建与表单应用详解

### GXT界面构建与表单应用详解 #### 1. GXT基础组件介绍 在界面开发中，GXT提供了丰富的基础组件，下面是一些常见组件及其描述的匹配： | 组件 | 描述 | | --- | --- | | Tooltip | 当鼠标悬停在另一个元素上时提供额外信息 | | Popup | 可以出现在其他组件之上 | | Viewport | 填充浏览器窗口并监控窗口大小调整 | | ContentPanel | | | Button | 有带图标和菜单的版本 | | Composite | 包装另一个组件并隐藏其公共方法 | | TextField | 接受文本输入 | | BoxComponent | 继承自Component，添加了大小和定位方法 | | Component | 所有GXT组件的基类 | | LayoutContainer | 可以包含其他组件并使用布局来控制它们的布局 | #### 2. Popup的定位与对齐 当前，我们使用`show()`方法显示Popup时，它会出现在屏幕中间，远离触发它的按钮。为了让Popup更友好地显示，我们可以将其与触发按钮进行关联。 具体操作步骤如下： 1. 在`RssNavigationPanel`中，修改`SelectionListener`的操作，使`linkFeedPopup`的左下角与`Link feed Button`的左上角对齐： ```java btnLinkFeed.addSelectionListener(new SelectionListener<ButtonEvent>() { @Override public void componentSelected(ButtonEvent ce) { if (btnLinkFeed.isPressed()) { linkFeedPopup.show(btnLinkFeed.getElement(), "bl-tl?"); } else { linkFeedPopup.hide(); } } }); ``` 2. 启动应用程序，检查Popup是否直接出现在`Link feed Button`上方。 #### 3. 为TextField添加KeyListener 目前，用户需要在`TextField`中输入要添加的Feed的URL，然后点击添加按钮。为了提高效率，我们可以添加一个`KeyListener`，使按下回车键也能执行相同的功能。 示例代码如下： ```java tfUrl.addKeyListener(new KeyListener() { public void componentKeyDown(ComponentEvent event) { if (event.getKeyCode() == KeyCodes.KEY_ENTER) { addFeed(tfUrl.getValue()); } } }); ``` #### 4. GXT表单组件 在开发中，我们可能需要创建表单来输入数据。GXT提供了丰富的表单组件，下面是一些常见的表单组件及其功能： - **FormPanel**：继承自`ContentPanel`，用于管理表单组件。默认使用`FormLayout`，只能添加`Field`组件，如`TextField`和`LabelField`。它的主要优点是可以对包含的所有字段进行操作，如标记所有字段为只读、检查所有字段是否有效、更改标签显示方式以及最终使用HTTP POST或GWT RPC提交表单。 - **Fields**： - **TextFields**： - **NumberField**：只允许输入数字，并提供验证输入数字的方法，如最大和最小值。 - **TextArea**：类似于HTML的多行文本字段。 - **FileUploadField**：带有浏览按钮的HTML样式文件上传字段。 - **TriggerField components**： - **TriggerField**：基本的触发字段。 - **TwinTriggerField**：带有两个触发按钮的触发字段。 - **DateField**：允许用户通过点击触发按钮从日历中选择日期。 - **ComboBox**：使用`ModelData`对象提供选项。 - **ComboBox component**： - **SimpleComboBox**：允许输入硬编码的选项列表，并自动处理`ModelData`对象。 - **TimeField**：在ComboBox中填充时间列表，时间间隔可以变化。 - **ThemeSelector**：在ComboBox中填充所有注册的GXT主题，选择一个主题会使应用程序重新加载并应用新主题。 - **ListField component**：与`ComboBox`类似，使用`ModelData`提供选项列表，但允许用户选择多个值。 - **CheckBox components**： - **CheckBox**：单个复选框。 - **Radio**：带有圆形单选按钮的复选框子类。 - **CheckBoxGroup**：允许将所有CheckBox水平或垂直对齐。 - **RadioGroup**：确保其中只有一个单选字段被选中。 - **HtmlEditor component**：允许用户输入富文本，以HTML格式存储。 - **Other field components**： - **SliderField**：用于在表单中使用滑块组件的包装器。 - **LabelField**：仅显示静态文本。 - **AdapterField**：允许将自定义组件包装为字段以在表单中使用。 - **FieldSet**：作为另一个字段的容器，提供边框、标题和展开/折叠功能。 - **HiddenField**：用于随表单提交隐藏值，不可见。 下面是一个匹配表单组件与其定义的小测验： | 定义 | 匹配的表单组件 | | --- | --- | | 允许包装自定义组件以在表单中使用 | Adapter Field | | 允许输入富文本 | HtmlEditor | | 允许用户从日历中选择日期 | DateField | | 只允许输入数字 | NumberField | | 使用`ModelData`对象构建只能选择一个项目的列表 | ComboBox | | 允许输入多行纯文本 | TextArea | | 选择项目时自动更改应用程序主题 | ThemeSelector | | 允许将Radio组件对齐在一起 | RadioGroup | | 用于提交隐藏值 | HiddenField | | 显示静态文本 | LabelField | #### 5. 扩展示例应用程序 为了扩展示例应用程序，我们将使用GXT表单组件创建一个用于创建新Feed的表单。具体步骤如下： ##### 5.1 创建“Create feed”按钮 1. 在`RSSReader.css`样式表中，添加一个新的创建按钮图标的元素： ```css .create-feed { background: url(gxt/images/icons/feed_create.png) no-repeat center left !important; } ``` 2. 在`RssNavigationPanel`类的构造函数中，定义一个名为“Create feed”的新按钮，并设置图标和工具提示： ```java final Button btnCreateFeed = new Button("Create feed"); btnCreateFeed.setIconStyle("create-feed"); ToolTipConfig createNewToolTipConfig = new ToolTipConfig(); createNewToolTipConfig.setTitle("Create a new RSS feed"); createNewToolTipConfig.setText("Creates a new RSS feed"); btnCreateFeed.setToolTip(createNewToolTipConfig); addButton(btnCreateFeed); ``` 3. 启动应用程序，检查是否有“Create feed”和“Link Feed”两个按钮。 ##### 5.2 创建Feed类 为了存储Feed数据，我们需要创建一个Java对象。具体步骤如下： 1. 在示例应用程序中，创建一个名为`shared.model`的新包，与现有的`server`和`client`包处于同一级