corner imagecorner image
IDEPlatformPluginsDocs & SupportCommunityPartners

可视 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 快速入门指南,然后再继续学习本教程。

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

目录

本页上的内容适用于 NetBeans IDE 6.9 或更高版本

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

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

TableItem 组件的工作方式

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

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

安装并运行样例应用程序

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

  1. 下载 TableItemExample.zip 文件。
  2. 解压缩该文件。
  3. 在 IDE 中,选择 "File"(文件)> "Open Project"(打开项目),然后浏览至包含该解压缩文件的文件夹。
  4. 打开 "Projects"(项目)窗口。该窗口应如下所示:

    包含表项示例的 "Projects"(项目)窗口

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

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

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

返回页首

使用表项定制组件创建表

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

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

创建 MyTableExample 项目

  1. 选择 "File"(文件)> "New Project"(新建项目)(Ctrl-Shift-N 组合键)。在 "Categories"(类别)下,选择 "Java ME"。在 "Projects"(项目)下,选择 "Mobile Application"(Mobile 应用程序),然后单击 "Next"(下一步)。
  2. 在 "Project Name"(项目名称)字段中键入 MyTableExample。将Project Location(项目位置)更改为系统中的某个目录。从现在开始,我们可以将此目录称为 $PROJECTHOME
  3. 取消选中 "Create Hello MIDlet"(创建 Hello MIDlet)复选框。单击 "Next"(下一步)。
  4. 将 "Java Platform Micro Edition SDK 3.0" 保留为选定的仿真器平台。单击 "Finish"(完成)。

在 MyTableExample 项目中添加包和 Visual MIDlet

  1. 在 "Project"(项目)窗口中选择 MyTableExample 项目,然后选择 "File"(文件)> "New File"(新建文件)(Ctrl-N 组合键)。在 "Categories"(类别)下,选择 "Java"。在 "File Types"(文件类型)下,选择 "Java Package"(Java 包)。单击 "Next"(下一步)。
  2. 在 "Package Name"(包名)字段中输入 tableitemexample。单击 "Finish"(完成)。
  3. 在 "Project"(项目)窗口中选择 tableitemexample 包,然后选择 "File"(文件)> "New File"(新建文件)(Ctrl-N 组合键)。在 "Categories"(类别)下,选择 "MIDP"。在 "File Types"(文件类型)下,选择 "Visual MIDlet"。单击 "Next"(下一步)。
  4. 分别在 "MIDlet Name"(MIDlet 名称)和 "MIDP Class Name"(MIDP 类名)字段中输入 MyTableItemMidlet。单击 "Finish"(完成)。

在 MyTableItemMidlet 中添加组件

  1. 将 Visual MIDlet 切换至 "Flow"(流)视图。将以下屏幕组件从 "Component Palette"(组件面板)拖放至 "Flow"(流)设计器中:
    • Form(表单)
    • Text Box(文本框)
  2. 选择 textBox,然后在 "Properties"(属性)窗口中将该组件的 "Title"(标题)更改为 Edit
  3. 双击 form 组件以切换至 "Screen"(屏幕)视图。
  4. 将 "Table Item"(表项)组件从 "Component Palette"(组件面板)的 "Items"(项)类别拖放至 form 中。添加到 "Screen Designer"(屏幕设计器)中的 "Table Item"(表项)组件如下所示:

    显示在 "Device Screen"(设备屏幕)上包含 TableItem 的 "Screen Designer"(屏幕设计器)

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

    添加了 simpleTableModel

编辑 SimpleTableModel

  1. 在 "Screen"(屏幕)视图中,双击 "<No table model specified>"(<未指定表模型>)组件,以打开 "Values"(值)对话框。
  2. 在 "Values"(值)对话框中,选中 "Use Header"(使用表头)选项。
  3. 分别单击 "Add Row"(添加行)和 "Add Column"(添加列)按钮四次,以便将行数和列数更改为 4。
  4. 将表头分别重命名为 column 1column 2column 3column 4

    表模型

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

    为 TableItem 组件指定了简单的表模型

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

  1. 打开 "Flow"(流)视图。
  2. 从 "Component Palette"(组件面板)的 "Commands"(命令)类别中选择 "Exit Command"(退出命令)。将其拖放至 form 组件中。对 "Item Command"(项命令)重复执行此操作。
  3. 在 "Screen"(屏幕)视图中选择 "itemCommand"。在 "Properties"(属性)窗口中,将 "Label"(标签)属性值更改为 Edit Cell
  4. 在 "Flow"(流)视图中,从 "Component Palette"(组件面板)的 "Commands"(命令)类别中选择 "OK Command"(确定命令),然后将其拖放至 textBox 组件中。

    显示包含已添加命令的 "Flow"(流)视图

连接组件

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

显示包含连接的组件的 "Flow"(流)窗口

插入源代码

  1. 在 "Flow"(流)视图中,右键单击 form 组件的 "itemCommand",然后从弹出式菜单中选择 "Go to source"(转至源)。
  2. 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("");
            } 
  3. 切换至 "Flow"(流)视图,右键单击 textBox 组件的 "okCommand",然后从弹出式菜单中选择 "Go to Source"(转至源)。
  4. 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();  
    	  
  5. 按 Ctrl+S 组合键以保存所做的编辑。

运行项目

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

返回页首

TableItem 和 SimpleTableModel 组件的 Javadoc

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

  1. 将光标放在源代码中的 TableItemTableModel 组件上,然后按 Ctr-Shift-空格组合键(或选择 "Source"(源)> "Show Documentation"(显示文档))。
    此时将在弹出式窗口中显示该元素的 Javadoc。
  2. 在弹出式窗口中单击 "Show documentation in external web browser"(在外部 Web 浏览器中显示文档)图标 ("Show documentation in external web browser"(在外部 Web 浏览器中显示文档)),以便在浏览器中查看有关 TableItemTableModel 组件的详细信息。

返回页首


另请参见

返回页首