corner imagecorner image
IDEPlatformPluginsDocs & SupportCommunityPartners

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

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

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

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

注意:如果使用的是 NetBeans IDE 6.8,请参阅在 Java ME 应用程序中使用表项 - NetBeans IDE 6.8 教程。

目录

本页上的内容适用于 NetBeans IDE 6.9 或 7.0

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

软件或资源 要求的版本
带有 Java ME 的 NetBeans Beans 版本 6.9 或更高版本
Java Development Kit (JDK) 版本 6

表项组件的工作方式

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

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

安装并运行样例应用程序

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

  1. 下载 TableItemExample.zip 文件。
  2. 解压缩该文件。
  3. 在 IDE 中,选择“文件”>“打开项目”,然后浏览到包含解压缩文件的文件夹。
  4. 打开“项目”窗口。该窗口应如下所示:

    包含表项示例的“项目”窗口

  5. 在“项目”窗口中,右键单击项目节点并选择“运行项目”(或按 F6)。当应用程序运行时,将会打开一个仿真器窗口,其中显示了在缺省设备仿真器中运行的应用程序。
  6. 在仿真器窗口中,单击 "Launch" 下面的按钮。仿真器将显示一个表,如下所示:

    显示样例表应用程序的 DefaultColorPhone 仿真器

  7. 对该表进行如下编辑:
    • 使用选择按钮上的方向箭头在单元格之间移动光标。
    • 单击 "Edit Cell" 下面的按钮以编辑某个单元格的内容。
  8. 单击 "Exit" 下面的按钮以关闭应用程序。

返回页首

使用表项定制组件创建表

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

  1. 创建 MyTableExample 项目
  2. 在 MyTableExample 项目中添加包和 Visual MIDlet
  3. 在 MyTableMidlet 中添加组件
  4. 编辑 SimpleTableModel 设计
  5. 向窗体组件和文本框组件中添加命令
  6. 连接组件以创建应用程序流
  7. 插入源代码
  8. 运行项目

创建 MyTableExample 项目

  1. 选择“文件”>“新建项目 (Ctrl-Shift-N)”。在“类别”下,选择 "Java ME"。在“项目”下,选择“Mobile 应用程序”,然后单击“下一步”。
  2. 在“项目名称”字段中键入 MyTableExample。将“项目位置”更改为系统中的某个目录。从现在开始,我们将此目录称为 $PROJECTHOME
  3. 取消选中“创建 Hello MIDlet”复选框。单击“下一步”。
  4. 将 "Sun Java Wireless Toolkit 2.5.2" 保留为选定的仿真器平台。单击“完成”。

在 MyTableExample 项目中添加包和 Visual MIDlet

  1. 在“项目”窗口中选择 MyTableExample 项目,然后选择“文件”>“新建文件 (Ctrl-N)”。在“类别”下选择 "Java"。在“文件类型”下,选择“Java 包”。单击“下一步”。
  2. 在“包名”字段中输入 tableitemexample。单击“完成”。
  3. 在“项目”窗口中选择 tableitemexample 包,然后选择“文件”>“新建文件 (Ctrl-N)”。在“类别”下,选择 "MIDP"。在“文件类型”下,选择 "Visual MIDlet"。单击“下一步”。
  4. 分别在“MIDlet 名称”字段和“MIDP 类名”字段中输入 MyTableItemMidlet。单击“完成”。

在 MyTableItemMidlet 中添加组件

  1. 将 Visual MIDlet 切换至“流”视图。将以下屏幕组件从组件面板拖放至流设计器中:
    • 窗体
    • 文本框
  2. 选择 textBox,然后在“属性”窗口中将组件标题更改为 Edit
  3. 双击 form 组件以切换到“屏幕”视图。
  4. 将“表项”组件从组件面板的“项”类别拖放至 form 中。添加到屏幕设计器中的“表项”组件如下所示:

    显示在设备屏幕上包含 tableItem 的屏幕设计器

  5. 选择 tableItem,然后在“属性”窗口中键入 TableItem Example 作为“标签”属性值。
  6. 右键单击 tableItem 组件,然后在弹出式菜单中选择“属性”。
  7. 在“表模型”属性中单击箭头 (箭头),然后在下拉列表中选择 "<新 SimpleTableModel>"。
  8. 单击“关闭”。
    simpleTableModel 组件将添加到资源中。
  9. 添加了 simpleTableModel

编辑 SimpleTableModel

  1. 在“屏幕”视图中,双击 "<未指定表模型>" 组件以打开“值”对话框。
  2. 在“值”对话框中,选中“使用表头”选项。
  3. 分别单击“添加行”和“添加列”按钮四次,将行数和列数更改为 4。
  4. 将表头分别重命名为 column 1column 2column 3column 4
  5. 表模型

  6. 单击“确定”以完成操作。
  7. 为 tableItem 组件指定了简单的表模型

在窗体组件和文本框组件中添加命令

  1. 打开“流”视图。
  2. 从组件面板的“命令”类别中选择“退出命令”。将其拖放至 form 组件中。对于“项命令”,重复执行此操作。
  3. 在“屏幕”视图中选择 "itemCommand"。在“属性”窗口中,将“标签”属性值更改为 Edit Cell
  4. 在“流”视图中,从组件面板的“命令”类别中选择“确定命令”,然后将其拖放至 textBox 组件中。
  5. 显示包含添加的命令的“流”视图

连接组件

在“流”视图中,单击“移动设备”上的“已启动”,然后将其拖至 form 组件上。采用相同的方法,按照下图所示连接各个组件。

显示包含连接的组件的“流”窗口

插入源代码

  1. 切换至“源”视图。
  2. 在源代码(第 198 行)中查找 getOkCommand 方法,然后在 okCommand = new Command("Ok", Command.OK, 0);(显示的内容为 // write post-init user code here)后面插入以下代码:
     	                                    
                } else if (command == itemCommand) {
                    
     		/* This part of the code is responsible for
             * getting value from the table model
             */
             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("");
            } 
  3. 在第 207 行中单击错误标记 (错误标记),然后从弹出式菜单中选择“在 tableitemexample.MyTableItemMidlet 中创建字段命令”选项,如下图所示。
  4. 修改源代码

  5. 在源代码(第 189 行)中查找 getItemCommand 方法,然后在 itemCommand = new Command("Edit Cell", Command.ITEM, 0);(显示的内容为 // write post-init user code here)后面插入以下代码:
    	     /* This part of the code is responsible for
             * getting value from the table model
             */
             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("");
            } 
    	  

运行项目

按 F6 键以运行主项目。或者,也可以选择“运行”>“运行主项目”

返回页首

tableItem 和 SimpleTableModel 组件的 Javadoc

NetBeans IDE 提供 tableItemtableModel 组件以及可以在 VMD 中使用的其他组件的 API Javadoc。要阅读 tableItemtableModel 组件的 Javadoc,请完成以下步骤:

  1. 将光标放在源代码中的 tableItemtableModel 组件上,然后按 Ctr-Shift-空格键(或选择“源”>“显示文档”)。
    将在弹出式窗口中显示该元素的 Javadoc。
  2. 在弹出式窗口中单击“在外部 Web 浏览器中显示文档”图标 (在外部 Web 浏览器中显示文档),以查看有关浏览器中的 tableItemtableModel 组件的详细信息。

返回页首


另请参见

返回页首