| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. --> | |
| <!-- Use is subject to license terms.--> | |
| <html> | |
| <head> | |
| <title>可视 Mobile 设计器定制组件：在 Java ME 应用程序中使用表项 - NetBeans IDE 教程</title> | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="Karol Harezlak" content="NetBeans Visual Mobile Designer"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <h1>可视 Mobile 设计器定制组件：在 Java ME 应用程序中使用表项</h1> | |
| <p> 通过可视 Mobile 设计器 (Visual Mobile Designer, VMD)，您可以使用拖放式组件设计 Java ME 应用程序。在该设计器中，可以通过使用 IDE 提供的组件或使用自己设计的组件，确定应用程序流以及 UI 的外观。VMD 包含许多可用于创建应用程序的标准组件，如 "Lists"（列表）、"Alerts"（警报）、"Forms"（表单）、"Images"（图像）等。此外，它还包含一些用于简化较复杂组件创建过程的定制组件，如等待屏幕、闪屏和登录屏幕。 </p> | |
| <p>通过表项组件，您可以快速创建包含一列或多列的表，同时每列都有一个标题区域和一个数据区域，且每个记录都是如此。表在水平和垂直方向上的大小可超出屏幕。用户可以使用光标在任一方向上滚动。使用可视 Mobile 设计器 (Visual Mobile Designer, VMD) 的表项组件，可以简化 Java ME 应用程序中数据表的设计和实现过程。 </p> | |
| <p>如果您对在 NetBeans 中开发 Mobile 应用程序不熟悉，则应首先阅读 <A HREF="quickstart.html">NetBeans Java ME MIDP 快速入门指南</A>，然后再继续学习本教程。</p> | |
| <!--<p class="notes"><b>注意：</b>如果使用的是 NetBeans IDE 6.8，请参阅<a href="../../68/javame/tableitem.html">在 NetBeans IDE 6.8 的 Java ME 应用程序中使用表项</a>教程。</p>--> | |
| <h3>目录</h3> | |
| <img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="本页上的内容适用于 NetBeans IDE 6.9 或更高版本" title="本页上的内容适用于 NetBeans IDE 6.9 或更高版本" > | |
| <ul> | |
| <li><a href="#intro" title="表项组件的工作方式">表项组件的工作方式</a></li> | |
| <li><a href="#sample" title="安装并运行样例应用程序">安装并运行样例应用程序</a></li> | |
| <li><a href="#creating" title="使用表项定制组件创建 Java ME 应用程序">使用表项定制组件创建 Java ME 应用程序</a> | |
| <ul> | |
| <li> <a href="#create">创建 MyTableExample 项目</a> </li> | |
| <li><a href="#add">在 MyTableExample 项目中添加包和 Visual MIDlet</a></li> | |
| <li><a href="#addcomponent">在 MyTableMIDlet 中添加组件</a></li> | |
| <li><a href="#edit">编辑 SimpleTableModel 设计</a></li> | |
| <li><a href="#addcommands">在 "Form"（窗体）组件和 "Text Box"（文本框）组件中添加命令</a></li> | |
| <li><a href="#connect">连接组件以创建应用程序流</a></li> | |
| <li><a href="#insert">插入源代码</a></li> | |
| <li><a href="#run">运行项目</a></li> | |
| </ul></li> | |
| <li><a href="#nextsteps" title="另请参见">另请参见</a></li> | |
| </ul> | |
| <p><b>要学完本教程，您需要具备以下软件和资源：</b></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">软件或资源</th> | |
| <th class="tblheader" scope="col">要求的版本</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">带有 Java ME 的 NetBeans Beans</a></td> | |
| <td class="tbltd1">版本 6.9 或更高版本</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td> | |
| <td class="tbltd1">版本 6 或版本 7</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h2><a name="intro"></a>TableItem 组件的工作方式</h2> | |
| <p>本教程中的示例将向您说明如何在 Mobile 应用程序中使用表项组件和表模型组件。该示例演示了这些组件的基本功能，以及如何使用它们在 Java ME 应用程序的 SimpleTableModel 资源中可视化并处理数据。本教程中讨论的表项定制组件将使用一个来自 SimpleTableModel 接口的表，并且它可显示数据，甚至允许用户编辑数据。</p> | |
| <p>除了 "Table Item"（表项）定制组件以外，我们还需要使用两个其他 MIDP 组件："Text Box"（文本框）组件和 "Form"（窗体）组件。要了解有关这些组件以及 VMD 组件面板中包括的其他定制组件的详细信息，请参见<a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">可视 Mobile 设计器组件面板指南</a>。</p> | |
| <h2><a name="sample"></a>安装并运行样例应用程序</h2> | |
| <p> 开始之前，您可能希望查看本教程的最终结果。请执行下列步骤以安装 <code>TableItemExample</code> 样例应用程序：</p> | |
| <ol> | |
| <li>下载 <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/TableItemExample.zip">TableItemExample.zip</a> 文件。</li> | |
| <li> 解压缩该文件。 </li> | |
| <li> 在 IDE 中，选择 "File"（文件）> "Open Project"（打开项目），然后浏览至包含该解压缩文件的文件夹。<tt></tt><tt></tt> </li> | |
| <li>打开 "Projects"（项目）窗口。该窗口应如下所示： | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-project-window.png" border=1 alt="包含表项示例的 "Projects"（项目）窗口" ></p> | |
| </li> | |
| <li>在 "Projects"（项目）窗口中，右键单击项目节点并选择 "Run Project"（运行项目）（或按 F6）。当应用程序运行时，将会打开一个仿真器窗口，其中显示了在缺省设备仿真器中运行的应用程序。 </li> | |
| <li>在仿真器窗口中，单击 "Launch" 下面的按钮。仿真器将显示一个表，如下所示： | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-emulator.png" border=1 alt="显示样例表应用程序的 DefaultColorPhone 仿真器" > </p> </li> | |
| <li>对该表进行如下编辑： | |
| <ul> | |
| <li>使用选择按钮上的方向箭头在单元格之间移动光标。</li> | |
| <li>单击 "Edit Cell" 下面的按钮以编辑某个单元格的内容。</li> | |
| </ul></li> | |
| <li>单击 "Exit" 下面的按钮以关闭应用程序。 </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">返回页首</a></p> | |
| <h2><a name="creating"></a>使用表项定制组件创建表 </h2> | |
| <div class="indent"> | |
| <p>现在，您已看到运行中的表项组件，接下来我们可以向您说明如何创建此应用程序。要创建此应用程序，请执行以下操作： </p> | |
| </div> | |
| <ol> | |
| <li> <a href="#create">创建 MyTableExample 项目</a> </li> | |
| <li><a href="#add">在 MyTableExample 项目中添加包和 Visual MIDlet</a></li> | |
| <li><a href="#addcomponent">在 MyTableMIDlet 中添加组件</a></li> | |
| <li><a href="#edit">编辑 SimpleTableModel 设计</a></li> | |
| <li><a href="#addcommands">在 "Form"（窗体）组件和 "TextB ox"（文本框）组件中添加命令</a></li> | |
| <li><a href="#connect">连接组件以创建应用程序流</a></li> | |
| <li><a href="#insert">插入源代码</a></li> | |
| <li><a href="#run">运行项目</a></li> | |
| </ol> | |
| <div class="indent"> | |
| <h3 class="tutorial">创建 MyTableExample 项目<a name="create"></a></h3> | |
| <ol> | |
| <li> 选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N 组合键）。<tt></tt><tt></tt>在 "Categories"（类别）下，选择 "Java ME"。在 "Projects"（项目）下，选择 "Mobile Application"（Mobile 应用程序），然后单击 "Next"（下一步）。 </li> | |
| <li> 在 "Project Name"（项目名称）字段中键入 <code>MyTableExample</code>。将Project Location（项目位置）更改为系统中的某个目录。从现在开始，我们可以将此目录称为 <tt>$PROJECTHOME</tt>。 </li> | |
| <li> 取消选中 "Create Hello MIDlet"（创建 Hello MIDlet）复选框。单击 "Next"（下一步）。 </li> | |
| <li> 将 "Java Platform Micro Edition SDK 3.0" 保留为选定的仿真器平台。单击 "Finish"（完成）。 </li> | |
| <!--li> Click Finish. The project folder contains all of your sources and project metadata, such | |
| as the project Ant script. The application itself is displayed in the Flow Design window of the Visual Mobile Designer. </li--> | |
| </ol> | |
| <h3 class="tutorial">在 MyTableExample 项目中添加包和 Visual MIDlet<a name="add"></a></h3> | |
| <ol> | |
| <li> 在 "Project"（项目）窗口中选择 <code>MyTableExample</code> 项目，然后选择 "File"（文件）> "New File"（新建文件）（Ctrl-N 组合键）。<tt></tt><tt></tt>在 "Categories"（类别）下，选择 "Java"。在 "File Types"（文件类型）下，选择 "Java Package"（Java 包）。单击 "Next"（下一步）。 </li> | |
| <li> 在 "Package Name"（包名）字段中输入 <code>tableitemexample</code>。单击 "Finish"（完成）。 | |
| </li> | |
| <li> 在 "Project"（项目）窗口中选择 <code>tableitemexample</code> 包，然后选择 "File"（文件）> "New File"（新建文件）（Ctrl-N 组合键）。<tt></tt><tt></tt>在 "Categories"（类别）下，选择 "MIDP"。在 "File Types"（文件类型）下，选择 "Visual MIDlet"。单击 "Next"（下一步）。 </li> | |
| <li> 分别在 "MIDlet Name"（MIDlet 名称）和 "MIDP Class Name"（MIDP 类名）字段中输入 <code>MyTableItemMidlet</code>。单击 "Finish"（完成）。 </li> | |
| </ol> | |
| <h3 class="tutorial">在 MyTableItemMidlet 中添加组件<a name="addcomponent"></a></h3> | |
| <ol> | |
| <li> 将 Visual MIDlet 切换至 "Flow"（流）视图。将以下屏幕组件从 "Component Palette"（组件面板）拖放至 "Flow"（流）设计器中： | |
| <ul> | |
| <li> | |
| <div class="indent"> Form（表单）</div> | |
| </li> | |
| <li> | |
| <div class="indent">Text Box（文本框）</div> | |
| </li> | |
| </ul></li> | |
| <li>选择 <tt>textBox</tt>，然后在 "Properties"（属性）窗口中将该组件的 "Title"（标题）更改为 <tt>Edit</tt>。</li> | |
| <li>双击 <tt>form</tt> 组件以切换至 "Screen"（屏幕）视图。 </li> | |
| <li>将 "Table Item"（表项）组件从 "Component Palette"（组件面板）的 "Items"（项）类别拖放至 <tt>form</tt> 中。<tt></tt>添加到 "Screen Designer"（屏幕设计器）中的 "Table Item"（表项）组件如下所示：<tt></tt> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-tableitemform.png" border=1 alt="显示在 "Device Screen"（设备屏幕）上包含 TableItem 的 "Screen Designer"（屏幕设计器）" ></p> | |
| </li> | |
| <li>选择 <tt>tableItem</tt>，然后在 "Properties"（属性）窗口中键入 <code>TableItem Example</code> 作为 "Label"（标签）属性值。</li> | |
| <li>右键单击 <tt>tableItem</tt> 组件，然后在弹出式菜单中选择 "Properties"（属性）。</li> | |
| <li>在 "Table Model"（表模型）属性中单击箭头 (<img src="../../../images_www/articles/71/mobility/tableitem/arrow.png" border=1 alt="箭头">)，然后在下拉列表中选择 "<New SimpleTableModel>"（<新 SimpleTableModel>）。<tt></tt></li> | |
| <li>单击 "Close"（关闭）。<br><tt>simpleTableModel</tt> 组件将添加到资源中。 | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/resources.png" border=1 alt="添加了 simpleTableModel" ></p></li> | |
| </ol> | |
| <h3 class="tutorial">编辑 SimpleTableModel<a name="edit"></a></h3> | |
| <ol> | |
| <li> 在 "Screen"（屏幕）视图中，双击 "<No table model specified>"（<未指定表模型>）组件，以打开 "Values"（值）对话框。<tt></tt> </li> | |
| <li>在 "Values"（值）对话框中，选中 "Use Header"（使用表头）选项。</li> | |
| <li> 分别单击 "Add Row"（添加行）和 "Add Column"（添加列）按钮四次，以便将行数和列数更改为 4。</li> | |
| <li> 将表头分别重命名为 <tt>column 1</tt>、<tt>column 2</tt>、<tt>column 3</tt> 和 <tt>column 4</tt>。 | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/tableitem/ti-values-editor.png" border=1 alt="表模型" > </p></li> | |
| <li>单击 "OK"（确定）以完成操作。 | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/tableitem/ti-screeneditor_form1.png" border=1 alt="为 TableItem 组件指定了简单的表模型" > </p></li> | |
| </ol> | |
| <h3 class="tutorial">在 "Form"（窗体）组件和 "Text Box"（文本框）组件中添加命令<a name="addcommands"></a></h3> | |
| <ol> | |
| <li>打开 "Flow"（流）视图。</li> | |
| <li>从 "Component Palette"（组件面板）的 "Commands"（命令）类别中选择 "Exit Command"（退出命令）。<tt></tt>将其拖放至 <tt>form</tt> 组件中。对 "Item Command"（项命令）重复执行此操作。<tt></tt></li> | |
| <li>在 "Screen"（屏幕）视图中选择 "itemCommand"。<tt></tt>在 "Properties"（属性）窗口中，将 "Label"（标签）属性值更改为 <tt>Edit Cell</tt>。 | |
| </li> | |
| <li>在 "Flow"（流）视图中，从 "Component Palette"（组件面板）的 "Commands"（命令）类别中选择 "OK Command"（确定命令），然后将其拖放至 <tt>textBox</tt> 组件中。<tt></tt> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-flow.png" border=1 alt="显示包含已添加命令的 "Flow"（流）视图" > </p></li> | |
| </ol> | |
| <h3 class="tutorial">连接组件<a name="connect"></a></h3> | |
| <div> | |
| <p>在 "Flow"（流）视图中，单击 "Mobile Device"（移动设备）上的 "Started"（已启动），然后将其拖至 <tt>form</tt> 组件中。<tt></tt>采用相同的方法，按照下图所示连接各个组件。</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-flowdesigner.png" border=1 alt="显示包含连接的组件的 "Flow"（流）窗口" ></p> | |
| </div> | |
| <h3 class="tutorial">插入源代码<a name="insert"></a></h3> | |
| <ol> | |
| <li>在 "Flow"（流）视图中，右键单击 <tt>form</tt> 组件的 "itemCommand"，然后从弹出式菜单中选择 "Go to source"（转至源）。<tt></tt></li> | |
| <li>在 <tt>switchDisplayable</tt> 方法（显示的内容为 <tt>// write pre-action user code here</tt>）之前插入以下代码： | |
| <pre class="examplecode"> | |
| 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(""); | |
| } </pre> | |
| </li> | |
| <li>切换至 "Flow"（流）视图，右键单击 <tt>textBox</tt> 组件的 "okCommand"，然后从弹出式菜单中选择 "Go to Source"（转至源）。<tt></tt></li> | |
| <li>在 <tt>switchDisplayable</tt> 方法（显示的内容为 <tt>// write pre-action user code here</tt>）之前插入以下代码： | |
| <pre class="examplecode"> | |
| 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(); | |
| </pre></li> | |
| <li>按 Ctrl+S 组合键以保存所做的编辑。</li> | |
| </ol> | |
| <h3 class="tutorial">运行项目<a name="run"></a></h3> | |
| <p>按 F6 键以运行主项目。此外，也可以选择 "Run"（运行）> "Run Main Project"（运行主项目）。<tt></tt><tt></tt></p> | |
| </div> | |
| <p class="align-center"><a href="#top">返回页首</a></p> | |
| <h2>TableItem 和 SimpleTableModel 组件的 Javadoc</h2> | |
| <P>NetBeans IDE 为 <tt>TableItem</tt> 组件和 <tt>TableModel</tt> 组件以及可在 VMD 中使用的其他组件提供了 API Javadoc。要阅读 <tt>TableItem</tt> 或 <tt>TableModel</tt> 组件的 Javadoc，请执行以下步骤：</P> | |
| <OL> | |
| <li>将光标放在源代码中的 <tt>TableItem</tt> 或 <tt>TableModel</tt> 组件上，然后按 Ctr-Shift-空格组合键（或选择 "Source"（源）> "Show Documentation"（显示文档））。<tt></tt><tt></tt><br> | |
| 此时将在弹出式窗口中显示该元素的 Javadoc。 </li> | |
| <li>在弹出式窗口中单击 "Show documentation in external web browser"（在外部 Web 浏览器中显示文档）图标 (<img src="../../../images_www/articles/71/mobility/smscomposer/show-doc-button.png" alt=""Show documentation in external web browser"（在外部 Web 浏览器中显示文档）">)，以便在浏览器中查看有关 <tt>TableItem</tt> 或 <tt>TableModel</tt> 组件的详细信息。</li> | |
| </OL> | |
| <p class="align-center"><a href="#top">返回页首</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=VMD%20Custom%20Components:%20Using%20Table%20Items">请将您的反馈发送给我们</a> </div><br style="clear:both;" > | |
| <h2><a name="nextsteps"></a>另请参见</h2> | |
| <ul> | |
| <li><a href="smscomposer.html">可视 Mobile 设计器定制组件：创建 SMS 编写器应用程序</a></li> | |
| <li><a href="filebrowser.html">可视 Mobile 设计器定制组件：创建移动设备文件浏览器</a></li> | |
| <li><a href="pimbrowser.html">可视 Mobile 设计器定制组件：创建个人信息管理器应用程序</a></li> | |
| <li><a href="loginscreen.html">可视 Mobile 设计器定制组件：创建 Mobile 登录屏幕</a></li> | |
| <li><a href="waitscreen.html">可视 Mobile 设计器定制组件：为 Mobile 应用程序创建等待屏幕</a></li> | |
| <li><a href="splashscreen.html">可视 Mobile 设计器定制组件：在 Java ME 应用程序中使用闪屏</a></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">返回页首</a></p> | |
| </body> | |
| </html> |