为 Java ME 设备创建支持触摸的 SVG UI
本教程将向您说明如何使用 SVG UI 小部件为基于 Java ME 的触摸屏设备开发富 UI。随着基于 Java ME 的触摸屏设备（如 Samsung Omnia 和 Instinct、Nokia 5800 Xpress Music 或 Blackbery Storm）数量的快速增长，为这些设备开发应用程序成为任何专业 Mobile 应用程序开发者所必需具备的技能。本教程中创建的应用程序可以在大多数支持用于 J2ME 的 SVG API (JSR226) 的设备上运行，因为非触摸屏设备也支持富 SVG UI 小部件。
注意：如果使用的是 NetBeans IDE 6.8，请参阅在 NetBeans IDE 6.8 中为 Java ME 设备创建支持触摸的 SVG UI 教程。
目录
要求
要学完本教程，您需要具备以下软件和资源：
为确保启用 Java ME 功能，我们建议执行 "Custom Installation"（定制安装），并在 IDE 安装过程中取消选中 "Features on Demand"（按需启用功能）组件。
设置项目环境
除了上面列出的必需软件以外，您还应在计算机上执行以下安装：
- 应将
ContactBrowser.zip 文件解压缩到 NetBeans 项目文件夹中。
- 应下载 SVG 片段插件并将其安装到 NetBeans 中：
- 在 IDE 中转至 "Tools"（工具）> "Plugins"（插件）。单击 "Downloaded"（已下载）标签，然后单击 "Add Plugins"（添加插件）。
- 导航至包含 svg-snippets.nbm 文件的本地文件夹，选择该文件，然后单击 "Install"（安装）。
- 单击 "Install"（安装），IDE 将指导您完成该插件的安装。安装该插件后，必须重新启动 IDE。
- 重新启动 IDE 后，转至 "Tools"（工具）> "Options"（选项）。在 "Options"（选项）对话框窗口中选择 "Miscellaneous"（其他），然后单击 "SVG" 标签。
- 在 "SVG Rich Components Snippets"（SVG 富组件片段）部分中打开 "Snippets"（片段）下拉菜单，然后选择 "J1 HOL SVG Snippets"。单击 "OK"（确定）。
返回页首
在 SVG 构成器中创建 UI
我们将生成一个基于 SVG 的基本应用程序 UI。该应用程序非常简单，但它足以向您说明如何创建新的 Java ME 应用程序，如何将 SVG 图像从 SVG 构成器导入到 Visual MIDlet 中，以及如何在 MIDP 设备仿真器上运行项目。
背景信息
SVG：JSR-226 指定了用于以 XML 呈现可缩放二维矢量图形的 API。矢量图形仅包含每个像素的绘制说明，而不像 GIF 和 JPG 格式那样对每个像素的内容进行编码。因此，矢量图像具备以下几个优点：
- 可缩放，在不同大小和分辨率的显示器上图像质量保持不变。您还可以拉伸、翻转或反转图像，而图像质量不会受损。
- 支持脚本和动画，非常适合数据驱动的交互式图形。
- 紧凑。矢量图像最多可比 GIF 或 JPEG 格式的相同图像小十倍。这一重要优点使其可为资源有限的手持设备创建富图形应用程序。
- 用户可以与图像内容进行交互。
- 可搜索，用户可以在图像中搜索文本。例如，用户可以在地图中搜索特定的街道名称，或在餐馆菜单列表中搜索喜欢的菜肴。
一部分功能完备的 SVG 专用于移动设备，它们被称为 SVG-Tiny，并且 JSR-226 将 SVG-Tiny 配置文件版本 1.1 定为 J2ME 矢量图形的正式文件格式。
SVG 小部件及其功能简介
通过使用 NetBeans 中的 SVG 构成器和 SVG 窗体富 UI 组件，可以更加容易地创建用户界面。
下面对 SVG 构成器组件面板中提供的 SVG UI 片段进行了概述：
- SVG "List"（列表）- 允许开发者创建一个 UI 所需的 UI 元素列表。
- SVG "Radio Button"“单选按钮”- 在 SVG 片段中，用户可通过此按钮选择性别。
- SVG "Combo Box"（组合框）- 用于显示下拉列表菜单的 UI 组件。
- SVG "Text"（文本）- 一个可以显示文本（如人名、产品 ID 等）的字段。
- SVG "Button"（按钮）- 用于提供 "Next"、"Previous"、"OK" 和其他 UI 功能的按钮。
- SVG "Spinner" - 使用户能够通过 "Up"（向上）和 "Down"（向下）按钮滚动变量。
- SVG "Slider"（滑块）- 允许用户调整变量特性。例如，从亮到暗，或在 0-100% 之间进行调整。
- SVG "Label"（标签）- 使用户对文本字段或其他 UI 组件添加标签。
以上内容仅仅是对 SVG UI 富组件的一个简要介绍。有关更多详细信息，请参见 NetBeans 可视 Mobile 设计器 Wiki 页。
创建 SVG UI 的步骤
为快速开始创建，我们将打开已准备好的 ContactBrowser 项目，将其用作创建项目的基础。
- 在 NetBeans IDE 中打开准备好的 ContactBrowser Java ME 项目。
ContactBrowser 项目概览
- 在 SVG 构成器中打开
employeeList.svg 图像，然后将两个 SVG 按钮和一个 SVG "List"（列表）窗体组件从组件面板拖放至 "Preview"（预览）画布中，如下所示。我们将在该教程后面重命名这两个按钮。
下面显示了添加下列组件后所完成的窗体：
- 在 "Preview"（预览）窗口中，单击左上方 "OK" 按钮中的文本，然后将其拖至左侧，如以下屏幕快照所示。这样做的目的是为了在 UI 按钮中正确显示 "Select" 一词。
- 我们的 SVG UI 还需要一个 SVG 文件 (
employeeForm.svg)，因此将打开该文件，然后将按钮、文本字段、标签和单选按钮从组件面板添加到 SVG 构成器的图像中，并对这些组件进行重命名，从而创建 UI。完成后，图像应如下所示。
- 添加的组件
- 3 个按钮
- 4 个标签
- 2 个文本字段
- 1 个单选按钮
- 1 个 Spinner
- 在 "Preview"（预览）窗口中，单击左下角 "OK" 按钮中的文本，然后将其拖至右侧，如以下屏幕快照所示。这样做的目的是为了在 UI 按钮中正确显示 "Previous" 一词。
在可视 Mobile 设计器中创建 MIDlet
SVG 富 UI 组件框架分为以下两个部分：
- 用于在 SVG 构成器或其他 SVG 编辑器中构建 UI 的 SVG 片段
- 支持 UI 功能的 Java ME 库
我们已经介绍了 SVG 构成器和 SVG 片段，下一步将说明可视 Mobile 设计器中的运行时库，这些库可帮助合并 SVG 图像和 Java ME 源代码中的应用程序逻辑。
- 要创建新的 Visual MIDlet，请选择 "File"（文件）> "New File"（新建文件），然后在 "New File"（新建文件）对话框的 "Categories"（类别）下选择 "MIDP"，并在 "File Types"（文件类型）中选择 "Visual MIDlet"。新文件应为 org.netbeans.lab.ui.svg 包的一部分。
- 在新创建的 MIDlet 中，切换至 "Flow"（流）视图。在组件面板中找到 "SVG Components"（SVG 组件）类别，然后将两个 SVG 窗体组件拖放至 "Flow"（流）视图的设计画布中，并使用右键单击上下文菜单分别将这两个窗体重命名为
employeeList 和 employeeForm。
- 下一步将连接 SVG 图像和源代码。要将 SVG UI 组件连接至源代码，我们只需将
employeeList.svg 文件从 "Project"（项目）窗口拖放至 employeeList 组件上，然后以同样的方法将 employeeForm.svg 拖放至 employeeForm 上。
- 现在，我们需要更改
svgButton 的实例名称，以使其与执行的操作相对应。请注意，该操作不会更改按钮 UI，我们将在稍后执行此更改。要更改 svgButton 的实例名称，请右键单击按钮，然后从上下文菜单中选择 "Rename"（重命名）。在 "Rename Instance Name"（重命名实例名称）对话框的 "New Name"（新名称）字段中为 svgButton 实例键入所需的操作名称。
注意：在更改 UI 组件的实例名称时，请确保新名称与 UI 按钮的功能相对应。
- 下一步，我们需要更改按钮和文本字段的缺省 SVG 标签，以使其与 ContactBrowser 应用程序显示的信息相匹配。要执行此操作，请切换至 "Screen"（屏幕）视图，并显示
employeeForm。然后，选择 "Screen"（屏幕）视图中的标签项，并编辑每个标签和按钮的“文本”属性，以使其与下面的屏幕快照类似。
- 我们还需要更改 SVG 文本字段的实例名称。右键单击 "First Name"，然后从上下文菜单中选择 "Rename"（重命名），并将其名称更改为
svgTextFieldFirstName。对 "Last Name" 字段重复此步骤，将其重命名为 svgTextFieldLastName。
- 现在，在 IDE 项目窗口的下拉菜单中从 employeeForm 切换至 employeeList，然后按照下面的屏幕快照所示重命名按钮。您可以在 "Properties"（属性）窗口的 "Text"（文本）字段中看到所做的更改。
返回页首
使用可视 Mobile 设计器创建应用程序流
现在，我们准备使用可视 Mobile 设计器的 "Flow"（流）视图创建应用程序流。
- 在 IDE 中从 "Screen"（屏幕）视图切换至 "Flow"（流）视图。
- 按照以下所示连接各个组件。首先，单击 "Mobile Device"（移动设备）元素上的“起点”并将鼠标拖至 "employeeList" 元素开始连接。重复此方法以完成其他组件连接。
在 "Source"（源）视图中，可以看到将 SVG XML UI 组件片段与 Java ME 运行时库绑定的机制。在下面的示例中，您可以了解到 SVG 按钮片段是如何与 Java ME 对象绑定的。SVG 组件是基于 XML 片段 ID 进行识别的；在此例中，该 ID 为 button_0。
运行应用程序
在添加应用程序逻辑之前，我们应在仿真器上测试联系人浏览器 UI。
在菜单中选择 "Run Main Project"（运行主项目）(F6)，将启动仿真器，之后您便可以看到 UI 并且可以对其进行测试。我们尚未实现应用程序逻辑，但可基于在可视 Mobile 设计器中所完成的工作验证 UI 是否按预期效果显示。
返回页首
在 SVG 用户界面中添加应用程序逻辑
现在，我们可以使用可视 Mobile 设计器为前一步创建的 UI 创建应用程序逻辑。我们将使用一些其他组件和方法，最后在 Java ME SDK 3.0 仿真器中运行应用程序。
背景信息
- SVG ListModel：定义方法组件，如 SVGList 用来获取列表中每个单元格的值以及计算所需的单元格数量并显示该数量的方法组件。从逻辑上讲，该模型是一个矢量，索引范围在 0 到 ListDataModel.getSize() - 1 之间。对数据模型内容或长度所做的任何更改必须报告给所有 SVGListDataListener。如果您熟悉 Swing 的 JList 模型，则 SVGListModel 应该很容易理解。
- Entry Point（入口点）组件："Entry Point"（入口点）组件用于在设计的类中表示一个方法。该方法包含由为其分配的操作“已调用项”所指定的代码。如果在应用程序屏幕之间进行切换时需要执行代码，或者在我们的示例中，如果需要在 Visual MIDlet 的 "Flow"（流）视图中显示 SVGButton 逻辑，则此方法非常有用。
创建定制 SVGList 模型
在此步骤中，我们将创建自己的 SVGListModel 实现。我们的 SVGListModel 实现是 getSvgList 方法内的一个匿名类。
- 使用 "Navigator"（导航）（如果尚未显示，请按 Ctrl+7 组合键）查找
employeeList 组件下面的 getSvgList 元素，方法是单击鼠标右键，然后从上下文菜单中选择 "Go to Source"(转至源)。
- 在
getSVGList 方法的 svgList = new SVGList(getEmployeeList(), "list_0"); 后面添加以下代码：
//Creating and adding new SVGListModel as anonymous class. Implementation of ListModel
svgList.setModel(new SVGList.ListModel() {
//Getting contact data as Vector from class EmployeeData
Vector data = EmployeeData.getData();
/**
* Method returns combination of strings: First Name + Last Name
* @return Employee name as String
*/
public Object getElementAt(int index) {
//Getting First Name String
String firstName = ((Employee) data.elementAt(index)).getFirstName();
//Getting Last Name String
String lastName = ((Employee) data.elementAt(index)).getLastName();
return firstName + " " + lastName;
}
/**
* Number of employees
* @return number of employees
*/
public int getSize() {
return data.size();
}
//not used
public void addDataListener(DataListener listener) { }
//not used
public void removeDataListener(DataListener listener) { }
});
注意：您可以在 IDE 中使用代码完成功能并自行键入代码。
"Next" 和 "Previous" 按钮逻辑
在此步骤中，我们将为 employeeForm 中包含的 SVGButton 添加逻辑。这些按钮允许应用程序用户浏览员工数据。通过单击 "Next"，用户可以跳至下一个员工联系人。通过按 "Previous" 按钮，用户应会看到上一个员工记录。在此步骤中，我们将使用之前介绍的入口点元素。
- 切换至 "Flow"（流）视图，然后从组件面板的 "Flow"（流）类别中添加两个入口点组件。右键单击这两个组件，然后将它们重命名为 nextMethod 和 previousMethod，如下所示：
- 现在，我们需要向 Visual MIDlet 中添加一个全局私有整型属性索引。让我们切换至 "Source"（源）视图，然后在 "Generated Fields" 保护块下面添加以下代码：
private int index = 0;
- 现在，我们需要添加逻辑以更新
employeeForm 中的 UI。我们在此处使用的方法将更新 employeeForm 组件中的 SVG UI 元素。在源代码编辑器中的类末尾处添加以下方法：
注意：可以使用 IDE 的代码完成功能输入代码。
//**Method is responsible for populating employee UI form with information about employees.
private void updateEmployeeFormUI() {
//Getting currently selected employee
final Employee employee = (Employee) EmployeeData.getData().elementAt(index);
//Setting First Name
getSvgTextFieldFirstName().setText(employee.getFirstName());
//Setting Last Name
getSvgTextFieldLastName().setText(employee.getLastName());
//Setting Gender
if (employee.getGender()) {
getSvgRadioButton().setSelected(false);
getSvgRadioButton1().setSelected(true);
} else {
getSvgRadioButton().setSelected(true);
getSvgRadioButton1().setSelected(false);
}
//Setting age
getSvgSpinner().getModel().setValue(new Integer(employee.getAge()));
}
现在，我们就可以开始在 nextMethod 和 previousMethod 中添加逻辑了。
- 切换至 "Flow"（流）视图，右键单击
nextMethod 入口点，然后从弹出式菜单中选择 "Go To Source"（转至源）选项。
- 在源代码编辑器中，将以下代码添加到 switchDisplayable(null, getEmployeeForm().getSvgCanvas()); 前面的 nextMethod() 方法中。此代码将显示员工数据记录队列中的下一个记录。此外，还会调用更新显示信息的 UI。
// Move to the next Employee record
if (index < EmployeeData.getData().size() - 1) {
//Update index.
index++;
}
//Update UI - employee form
updateEmployeeFormUI();
//Go back to employeeForm
- 切换至 "Flow"（流）视图，右键单击
previousMethod 入口点，然后从弹出式菜单中选择 "Go To Source"（转至源）选项。
- 在源代码编辑器中，在 switchDisplayable(null, getEmployeeForm().getSvgCanvas()); 前面的 previousMethod() 方法中添加以下代码，使数据浏览功能可以正常工作。
// Move to the previous Employee record
if (index > 0) {
//Update index
index--;
}
//Update UI
updateEmployeeFormUI();
//Go back to employeeForm
接下来，我们需要确保当 employeeForm 在基于员工列表中所做的选择而被设置为全局索引时，UI 会更新。
- 切换至 "Flow"（流）视图，右键单击
employeeList 中的 "select" 按钮，然后从弹出式菜单中选择 "Go To Source"（转至源）。
- 在源代码编辑器中，将以下代码添加到 public void actionPerformed(SVGComponent svgComponent) { 后面的
getSelect() 方法中：
//Updating global index
index = getSvgList().getSelectionModel().getSelectedIndex();
//Updating UI after selection has been made
updateEmployeeFormUI();
//Switching to the employeeForm
返回页首
在触摸屏设备仿真器中测试应用程序
现在，我们就可以在 NetBeans IDE 安装程序捆绑的 Java ME SDK 3.0 DefaultFxTouchPhone1 设备仿真器中测试应用程序了。为了启动应用程序，我们需要编辑项目属性。
- 右键单击项目节点，然后从上下文菜单中选择 "Properties"（属性）。在项目属性对话框的 "Category"（类别）下面选择 "Platform"（平台），然后从 "Emulator Platform"（仿真器平台）下拉菜单中选择 "Java Platform Micro Edition SDK 3.0"。
- 对于触摸屏设备仿真，请从 "Device"（设备）下拉菜单中选择 "DefaultFxTouchPhone1"，并选中 "CLDC-1.1" 作为设备配置（如下所示），然后单击 "OK"（确定）。
- 转至 "Run"（运行）> "Run Project"（运行项目）。此时将在仿真器中启动应用程序。可通过将鼠标指针放在 SVG 组件上，验证是否启用了触摸屏属性。可以在屏幕上移动鼠标光标以导航应用程序，就像用户用指尖点按一样。
- 在仿真器中，我们可以执行一些基本的 UI 测试，例如使用 "Previous" 或 "Next" 按钮验证 UI 元素是否能够正常工作。
小结
在本教程中，您了解了如何使用 NetBeans IDE 为 Java ME 设备创建基于 SVG 且支持触摸屏的 UI。
返回页首
另请参见
返回页首
