java可视应用程序_可视 Mobile 设计器定制组件：在 Java ME 应用程序中使用表项

可视 Mobile 设计器定制组件：在 Java ME 应用程序中使用表项

通过可视 Mobile 设计器 (Visual Mobile Designer, VMD)，您可以使用拖放式组件设计 Java ME 应用程序。在该设计器中，可以通过使用 IDE 提供的组件或使用自己设计的组件，确定应用程序流以及 UI 的外观。VMD 包含许多可用于创建应用程序的标准组件，如 "Lists"(列表)、"Alerts"(警报)、"Forms"(表单)、"Images"(图像)等。此外，它还包含一些用于简化较复杂组件创建过程的定制组件，如等待屏幕、闪屏和登录屏幕。

通过表项组件，您可以快速创建包含一列或多列的表，同时每列都有一个标题区域和一个数据区域，且每个记录都是如此。表在水平和垂直方向上的大小可超出屏幕。用户可以使用光标在任一方向上滚动。使用可视 Mobile 设计器 (Visual Mobile Designer, VMD) 的表项组件，可以简化 Java ME 应用程序中数据表的设计和实现过程。

如果您对在 NetBeans 中开发 Mobile 应用程序不熟悉，则应首先阅读 NetBeans Java ME MIDP 快速入门指南，然后再继续学习本教程。

目录

要学完本教程，您需要具备以下软件和资源：

TableItem 组件的工作方式

本教程中的示例将向您说明如何在 Mobile 应用程序中使用表项组件和表模型组件。该示例演示了这些组件的基本功能，以及如何使用它们在 Java ME 应用程序的 SimpleTableModel 资源中可视化并处理数据。本教程中讨论的表项定制组件将使用一个来自 SimpleTableModel 接口的表，并且它可显示数据，甚至允许用户编辑数据。

除了 "Table Item"(表项)定制组件以外，我们还需要使用两个其他 MIDP 组件："Text Box"(文本框)组件和 "Form"(窗体)组件。要了解有关这些组件以及 VMD 组件面板中包括的其他定制组件的详细信息，请参见可视 Mobile 设计器组件面板指南。

安装并运行样例应用程序

开始之前，您可能希望查看本教程的最终结果。请执行下列步骤以安装 TableItemExample 样例应用程序：

解压缩该文件。

在 IDE 中，选择 "File"(文件)> "Open Project"(打开项目)，然后浏览至包含该解压缩文件的文件夹。

打开 "Projects"(项目)窗口。该窗口应如下所示：

在 "Projects"(项目)窗口中，右键单击项目节点并选择 "Run Project"(运行项目)(或按 F6)。当应用程序运行时，将会打开一个仿真器窗口，其中显示了在缺省设备仿真器中运行的应用程序。

在仿真器窗口中，单击 "Launch" 下面的按钮。仿真器将显示一个表，如下所示：

对该表进行如下编辑：

使用选择按钮上的方向箭头在单元格之间移动光标。

单击 "Edit Cell" 下面的按钮以编辑某个单元格的内容。

单击 "Exit" 下面的按钮以关闭应用程序。

使用表项定制组件创建表

现在，您已看到运行中的表项组件，接下来我们可以向您说明如何创建此应用程序。要创建此应用程序，请执行以下操作：

创建 MyTableExample 项目

选择 "File"(文件)> "New Project"(新建项目)(Ctrl-Shift-N 组合键)。在 "Categories"(类别)下，选择 "Java ME"。在 "Projects"(项目)下，选择 "Mobile Application"(Mobile 应用程序)，然后单击 "Next"(下一步)。

在 "Project Name"(项目名称)字段中键入 MyTableExample。将Project Location(项目位置)更改为系统中的某个目录。从现在开始，我们可以将此目录称为 $PROJECTHOME。

取消选中 "Create Hello MIDlet"(创建 Hello MIDlet)复选框。单击 "Next"(下一步)。

将 "Java Platform Micro Edition SDK 3.0" 保留为选定的仿真器平台。单击 "Finish"(完成)。

在 MyTableExample 项目中添加包和 Visual MIDlet

在 "Project"(项目)窗口中选择 MyTableExample 项目，然后选择 "File"(文件)> "New File"(新建文件)(Ctrl-N 组合键)。在 "Categories"(类别)下，选择 "Java"。在 "File Types"(文件类型)下，选择 "Java Package"(Java 包)。单击 "Next"(下一步)。

在 "Package Name"(包名)字段中输入 tableitemexample。单击 "Finish"(完成)。

在 "Project"(项目)窗口中选择 tableitemexample 包，然后选择 "File"(文件)> "New File"(新建文件)(Ctrl-N 组合键)。在 "Categories"(类别)下，选择 "MIDP"。在 "File Types"(文件类型)下，选择 "Visual MIDlet"。单击 "Next"(下一步)。

分别在 "MIDlet Name"(MIDlet 名称)和 "MIDP Class Name"(MIDP 类名)字段中输入 MyTableItemMidlet。单击 "Finish"(完成)。

在 MyTableItemMidlet 中添加组件

将 Visual MIDlet 切换至 "Flow"(流)视图。将以下屏幕组件从 "Component Palette"(组件面板)拖放至 "Flow"(流)设计器中：

Form(表单)

Text Box(文本框)

选择 textBox，然后在 "Properties"(属性)窗口中将该组件的 "Title"(标题)更改为 Edit。

双击 form 组件以切换至 "Screen"(屏幕)视图。

将 "Table Item"(表项)组件从 "Component Palette"(组件面板)的 "Items"(项)类别拖放至 form 中。添加到 "Screen Designer"(屏幕设计器)中的 "Table Item"(表项)组件如下所示：

选择 tableItem，然后在 "Properties"(属性)窗口中键入 TableItem Example 作为 "Label"(标签)属性值。

右键单击 tableItem 组件，然后在弹出式菜单中选择 "Properties"(属性)。

在 "Table Model"(表模型)属性中单击箭头 (

)，然后在下拉列表中选择 ""()。

单击 "Close"(关闭)。

simpleTableModel 组件将添加到资源中。

编辑 SimpleTableModel

在 "Screen"(屏幕)视图中，双击 ""()组件，以打开 "Values"(值)对话框。

在 "Values"(值)对话框中，选中 "Use Header"(使用表头)选项。

分别单击 "Add Row"(添加行)和 "Add Column"(添加列)按钮四次，以便将行数和列数更改为 4。

将表头分别重命名为 column 1、column 2、column 3 和 column 4。

单击 "OK"(确定)以完成操作。

在 "Form"(窗体)组件和 "Text Box"(文本框)组件中添加命令

打开 "Flow"(流)视图。

从 "Component Palette"(组件面板)的 "Commands"(命令)类别中选择 "Exit Command"(退出命令)。将其拖放至 form 组件中。对 "Item Command"(项命令)重复执行此操作。

在 "Screen"(屏幕)视图中选择 "itemCommand"。在 "Properties"(属性)窗口中，将 "Label"(标签)属性值更改为 Edit Cell。

在 "Flow"(流)视图中，从 "Component Palette"(组件面板)的 "Commands"(命令)类别中选择 "OK Command"(确定命令)，然后将其拖放至 textBox 组件中。

连接组件

在 "Flow"(流)视图中，单击 "Mobile Device"(移动设备)上的 "Started"(已启动)，然后将其拖至 form 组件中。采用相同的方法，按照下图所示连接各个组件。

插入源代码

在 "Flow"(流)视图中，右键单击 form 组件的 "itemCommand"，然后从弹出式菜单中选择 "Go to source"(转至源)。

在 switchDisplayable 方法(显示的内容为 // write pre-action user code here)之前插入以下代码：

if (textBox != null) {

// Get position of the cursor in the table.

int row = tableItem.getSelectedCellRow();

int column = tableItem.getSelectedCellColumn() ;

// Get value from the table model

Object value = simpleTableModel.getValue(column,row);

// Set textBox string value

if (value != null)

textBox.setString(value.toString());

else

textBox.setString("");

}

切换至 "Flow"(流)视图，右键单击 textBox 组件的 "okCommand"，然后从弹出式菜单中选择 "Go to Source"(转至源)。

在 switchDisplayable 方法(显示的内容为 // write pre-action user code here)之前插入以下代码：

int row = tableItem.getSelectedCellRow();

int column = tableItem.getSelectedCellColumn();

// Set new value to the table model

simpleTableModel.setValue(column, row, textBox.getString());

// Repaint table model on the screen device

simpleTableModel.fireTableModelChanged();

按 Ctrl+S 组合键以保存所做的编辑。

运行项目

按 F6 键以运行主项目。此外，也可以选择 "Run"(运行)> "Run Main Project"(运行主项目)。

TableItem 和 SimpleTableModel 组件的 Javadoc

NetBeans IDE 为 TableItem 组件和 TableModel 组件以及可在 VMD 中使用的其他组件提供了 API Javadoc。要阅读 TableItem 或 TableModel 组件的 Javadoc，请执行以下步骤：

将光标放在源代码中的 TableItem 或 TableModel 组件上，然后按 Ctr-Shift-空格组合键(或选择 "Source"(源)> "Show Documentation"(显示文档))。

此时将在弹出式窗口中显示该元素的 Javadoc。

在弹出式窗口中单击 "Show documentation in external web browser"(在外部 Web 浏览器中显示文档)图标 (

)，以便在浏览器中查看有关 TableItem 或 TableModel 组件的详细信息。

另请参见