BlackBerry高级UI设计

来源：互联网发布：mac点击鼠标右键编辑：程序博客网时间：2024/05/07 02:03

作者: 王志刚

概论

这篇文档讲述的是如何在 BlackBerry 设备上应用的 UI 效果，文档的介绍的内容包括如下部分:

1. 基于 MIDP 的 UI

2. 基于 3rd-party 的 UI library 的应用

3. 基于 BlackBerry UI 组件的应用

4. 基于 SVG(JSR 226)的 UI 设计

5. 基于 Widget 的 UI 设计

本文的组成部分是以以一个传统移动应用的九宫格程序的 UI 设计和实现为范例，讨论并着重介绍了在 BlackBerry 平台上设计 UI 需要考虑和借用的技术，更好的包装 BlackBerry 的应用

通过对 UI 应用的讨论，本文也涉及到了在 BlackBerry 应用开发中如何和第三方应用 Library 集成， BlackBerry 上的网络应用开发等等方面的知识，文中涉及到的参考文档，都可以从 RIM 中国开发论坛上下载得到。

在阅读和参考本篇文档时，读者应该对 BlackBerry 上的基本开工具和开发过程有些了解，如果想参阅这些内容，可以参阅 BlackBerry 中国。

1 基于 MIDP 的 UI 设计

上面的图是整个 MIDP 中的 LCDUI 包的组成结构，这个包包括完整的 MIDLP 高级和低级 UI 库。

1.1 MIDP 高级 UI

我们在这一节要介绍 LCDUI 库的具体组成类图。Screen 类系属于高级图形用户界面组件，Canvas 是低级图形用户界面组件，在同一时刻，只能有唯一一个 Screen 或者 Canvas 类的子类显示在屏幕上。

使用高级界面，但是九宫格这样的屏幕铺放应用的实现是想不到好的办法，本身没有合适的控件可以

完成这个任务。一种可能的办法是通过定制高级 UI 组件里面的元素，比如 CustomItem, 用他来绘制定宫格。本例就是使用 CustomItem 来实现了一个九宫格效果，效果如下图所示

源代码如下所示:

public class GridItem extends CustomItem {

private Image image;

public MyItem(Image image, String title,int width,int height)

{

this.image = image;

}

public void paint(Graphics g, int w, int h)

{

g.drawImage(this.image, w/2, 0, Graphics.HCENTER | Graphics.TOP);

g.drawString(this.title, w/2, h - g.getFont().getHeight(), Graphics.HCENTER | Graphics.TOP);

}

通过对 Form 的定制 item 设置背景图片，找到一个 work around 的办法，放置我们的九宫格图标，剩下的就是对 Form 主程序的设置了

Form f = new Form("CustomItem");

int tempWidth = f.getWidth() / 4;

int tempHeight = 60;

for(int i = 0; i < 9;i++)

{

String imgSrc = "/img/" + i + ".png";

try

{

Image img = Image.createImage(imgSrc);

MyItem mi = new MyItem(img,String.valueOf(i) + " item",tempWidth,tempHeight);

mi.setLayout( Item.LAYOUT_CENTER );

f.append( mi );

}

catch(IOException ioe)

{

ioe.printStackTrace();

}

display.setCurrent( f );

1.2 MIDP 低级 UI

与高级 UI 相比，低级 UI 就自由很多，任何时候我们可以调用 repaint()产生重绘事件，调用完了

repaint()会立刻返回，调用 paint()回调函数则是由另一个专门的线程来完成。

相对于高级 UI 提供的丰富的组件，低级 UI 能够对

我们从 javax.microedition.lcdui.Canvas 开始了解我们的低级 UI，我们要用到低级 UI 必须要继承

Canvas 这个抽象类，在 Canvas 的核心是 paint()这个方法，这个方法做是负责绘制屏幕上的画面，每当屏幕需要重新绘制时，就会产生重绘事件时，系统就会自动调用 paint(),并传入一个 Graphics 对象。

任何时候我们都可以通过调用 reapaint()方法来产生重绘事件，它有两个方法，一个需要四个参数，分别用来指示起始坐标（X,Y）,长宽，另一个则不需要任何参数，代表整个画面重新绘制。

我们可以通过 getWidth()和 getHeight() 方法获得 Canvas 的当前范围大小。每当 Canvas 范围大小发生变化时，就会自动调用 Canvas 类的 sizeChanged（）方法。

下面是通用的用低级 CANVAS API 绘制九宫格程序的源码:

public class MenuCanvas extends Canvas implements CommandListener {

private String[] menuName = new String[] { "login", "picture", "wap",

"phone", "call", "goto", "fuck", "music", "video" };

private int canvaWidth = -1, canvaHeight = -1;

private int maxHeight = -1, imgWidth = -1, imgHeight = -1;

private int focus = 0;

private int fontHeight = -1;

private Image menuImg[] = new Image[9];

private Command exit;

public MenuCanvas() {

exit = new Command("Exit", Command.EXIT, 1);

addCommand(exit);

setCommandListener(this); canvaWidth = getWidth(); canvaHeight = getHeight(); try {

for (int i = 0; i < menuImg.length; i++) {

menuImg[i] = Image.createImage(28, 28); Graphics g = menuImg[i].getGraphics(); g.translate(-28 * i, 0);

}

} catch (Exception e) {

System.out.println(e.toString());

}

imgWidth = menuImg[0].getWidth();

imgHeight = menuImg[0].getHeight();

fontHeight = Font.getDefaultFont().getHeight();

maxHeight = imgHeight + fontHeight;

}

public void paint(Graphics g) {

int color = g.getColor();

g.setColor(0xFFFFFF);

g.fillRect(0, 0, canvaWidth, canvaHeight);

int cellWidth = canvaWidth / 3; int cellHeight = canvaHeight / 3; g.setColor(color);

for (int i = 0; i < menuImg.length; i++) {

g.drawImage(menuImg[i], cellWidth * (i % 3)

+ (cellWidth - imgWidth) / 2, cellHeight * (i / 3)

+ (cellHeight - maxHeight) / 2, Graphics.TOP

| Graphics.LEFT);

int fontWidth = Font.getDefaultFont().stringWidth(menuName[i]);

g.drawString(menuName[i], cellWidth * (i % 3)

+ (cellWidth - fontWidth) / 2, cellHeight * (i / 3)

+ (cellHeight - maxHeight) / 2 + imgHeight + 1,

Graphics.TOP | Graphics.LEFT);

if (i == focus) {

g.drawRect(cellWidth * (i % 3) + (cellWidth - imgWidth) / 2,

cellHeight * (i / 3) + (cellHeight - maxHeight) / 2, imgWidth + 1, imgHeight + 1);

}

public void keyPressed(int key) {

int action = getKeyAction(key);

switch (action) {

case FIRE:

Alert alert = new Alert("You select:", menuName[focus],

menuImg[focus], AlertType.INFO);

alert.setTimeout(Alert.FOREVER);

break;

case UP:

focus = focus - 3;

if (focus < 0) {

focus = focus + 9;

}

break;

……

repaint();

serviceRepaints();

}

public void commandAction(Command c, Displayable dpa) {

if (c == exit) {

}

最后得到的效果图如下所示

2 基于 Third party 的 UI 库的设计

直接使用 MIDP 的 UI 组件来做应用界面和接口，很多时候需要大量的编程和设计工作。为了减轻开发者的负担，J2ME 平台上也有很多这样的 UI 设计支撑库，本节我们一 LWUIT 这个应用比较广泛的例子为例，说明如果在 BlackBerry J2ME 平台上使用 GUI Library 去设计这个九宫格程序。

2.1 基于 LWUIT 的 UI 库的设计规范

The Lightweight UI Toolkit (LWUIT) 是一个轻量级 JavaME UI 工具包。LWUIT 类似 Swing 的 MVC 架构,支持多种布局（Layouts）, 皮肤更换, 字体, 触摸屏, 动画效果, Rich 控件, 3D 集成, Painter, 模式对画框, I18N/L10N 等。

Sun 在 2008 年的 JavaOne 会议上向开发者社区推荐了 LWUIT，展示了预先发布的二进制文件库，附加工具和扩展文档，让开发者可以快速上手，现在 Sun 把整个源代码都开放出来，更方便开发者利用 LUWIT 开发 JavaME 应用。关于 LWUIT 库的使用，可以从 SUN 的官方网络拿到基本示例和说明的文档。

九宫格说白了就是几个按钮，摆的整整齐齐。既然是这样就先做个 MainForm,采用 GridLayout()布局，然后在 Form 里面做几个按钮，每一个按钮代表一个 Form。

具体步骤如下：

1.在 MainForm 中以 GridLayout 形式排列九个按钮

2.建立一个 BaseForm,添加一个 BackCommand

3.创建 9 个 Form 继承自 BaseForm。

public class MainForm extends Form implements ActionListener {

public static String currentText;

Command Option_CMD = new Command("选项", 0); Command Exit_CMD = new Command("退出", 1);

public MainForm() {

//设置窗体翻转效果

Transition in = CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 300);

setTransitionInAnimator(in);

//设置这个 currentText，是为了在点击某个按钮进入某个 Form，然后回退时，焦点仍然在这个按钮上

if (currentText == null) {

currentText = "我的空间";九宫格说白了就是几个按钮，摆的整整齐齐。既然是这样就先做个

MainForm,采用 GridLayout()布局，然后在 Form 里面做几个按钮，每一个按钮代表一个 Form。

setLayout(new BorderLayout());

getTitleComponent().setVisible(false);

try {

String[] texts = new String[]{

"menu1",

"menu2",

"menu3",

"menu4",

"menu5",

"mene6",

"menu7",

"menu8",

“menu9”};

下面是基于 LCDUI 页面布局的主要框架代码

Container buttonContainer = new Container(new GridLayout(3, 3));

for (int i = 0; i < texts.length; i++) {

Image unsel_img = r2.getImage(imgNames[i] + ".png");

final Button b = new Button(texts[i], unsel_img);

//setRolloverIcon 当按钮被选中时

b.setRolloverIcon(r2.getImage(imgNames[i] + "_sel.png")); b.setAlignment(Label.CENTER); b.setTextPosition(Label.BOTTOM); b.setUIID("DemoButton"); buttonContainer.addComponent(b);

}

addComponent(BorderLayout.CENTER, buttonContainer);

addCommand(Option_CMD); addCommand(Exit_CMD); addCommandListener(this); show();

} catch (IOException ex) {

ex.printStackTrace();

}

最后 LWUIT 实现的效果，和我们基于MIDP高级UI的效果比较相像。这里需要注意是，在BlackBerry 上使用第三方jar库的时候，需要把相应的JAR库转成BlackBerry上可以运行的cod文件。

为什么要讨论3rd-party的UI library，也是为了突出BlackBerry自己的UI Library的效果，在KVM平台上的应用UI设计，BlackBerry的UI Library是独树一帜的。

3 基于 BlackBerry 的 UI 组件的设计

使用过类似LWUIT的布局组件，再使用BlackBerry原生的UI组件来设计UI就会发现这个非常熟悉。

Blackberry的UI组件功能更多，使用更加灵活也更加便捷，关于BlackBerry的UI基本组件的应用介绍，可以参阅BlackBerry基本UI设计或<<BlackBerry用户界面开发实例>>

了解基本UI的设计方法之后，通过BlackBerry的UI布局组件，可以设置铺放UI组件到BlackBerry 屏幕的效果，可以得到一个完成的基于BlackBerry UI组件和屏幕布局实现的九宫格程序的介绍。这里就不详细叙述了。

4 基于 SVG 的 UI 设计

4.1 什么是 SVG

SVG是可扩展2D矢量图编程的规范，它是W3C支持的一种标准，我们这个九宫格的主程序UI可以用 SVG实现相当的动画效果

在过去十年中，图像图形技术曾经使出版印刷行业发生了一场深刻的技术革命，使古老的印刷术融入了高速发展的信息产业。随着 Internet 技术的普及和发展，图像图形技术作为 Web 浏览技术的基础，更将为建立一个全新的互联网行业，发挥至关重要的作用。然而，目前的 Internet 技术在图形图像方面，应该说还处在年轻阶段，从浏览器的核心技术来看，其对于图形图像的支持还仅仅局限于对图像的简单显示，随着应用的逐渐深入，图像技术自身的一些缺点，如文件较大、在不同设备上显示效果不同等问题日益突出，从某种程度上讲也限制了 Web 浏览技术的进一步发展。

为此，众多业内人士针对 Web 浏览器图像图形功能支持较弱这一缺点提出了改进措施。近年来，各大软件厂商和组织纷纷推出自己的矢量图形规范，主要代表有 Adobe Systems Inc.制定的 PGML（Precision Graphics Markup Language）、CCLRC 提出的 Web Schematics、Autodesk, Inc 和微软等提出的 VML（Vector Markup Language）。此外，一些公司开始制作自己的 plug-in 来支持矢量图形的浏览，但这些插件都由于缺乏跨平台的支持，以及没有较好的配套编辑工具，而未能得到网上的广泛应用。正是在这种情况下，为统一标准，结束目前的混乱局面，W3C 组织于 1998

年 8 月专门成立了 SVG 工作组致力于图形标准的制定工作，并于 1999 年 2 月 11 日发布了第一个讨论草案，后几经修订于最近发布了最终草案。

SVG 是一种基于 XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言，其全称是可升级矢量图形规范（Scalable Vector Graphics）。其中，"可扩展"（scalable）在图形图像技术上指的是它不局限于一个固定的分辨率和大小，譬如可以在不同分辨率的屏幕上以相同的大小显示，也可以在同一个网页中以不同的大小或观全局或观细节；而在网络技术上指的是这一规范能够与其它规范相融合，从而满足更广泛的用户需求，适合于更广泛的应用方式。"矢量"（vector）是指规范中描述了直线、曲线、形状等几何图形，而无须象 PNG、JPEG 等图像格式那样逐象素进行描述，这使得集成了 SVG 的 XML 文档更小，下载速度也大大提高。"图形"（graphics）是指它提供了对

矢量和矢量/栅格混合图形的描述，填补了大多数基于 XML 的置标语言规范对复杂图形描述的空白。

SVG 规范定义了 SVG 的特征、语法和显示效果，包括模块化的 XML 命名空间（namespace）和

SVG 文档对象模型(DOM)。在以前的草案中，仅为 SVG 定义了一个 DTD，这个 DTD 支持样式单的引用。但这样一来，SVG 就不再是一个自定义的全包容的语言规范，而需要浏览工具额外具有对样式单文件的处理能力。出于这种考虑，在新近出台的 SVG 的第八个草案中，为 SVG 提供了两种不同的形式，即样式化 SVG 和交换型 SVG，它们各自有不同的 DTD 及 MIME 类型。样式化 SVG 允许对图形对象进行样式添加，它可以通过引用外部样式文件、在文件头中预先进行样式声明和通过属性为元素定义样式三种方式使用样式单，是 SVG 用于网络环境的推荐存储格式。而交换型

SVG 取消了对样式单的支持，完全使用元素属性描述各个图形对象的显示效果。在未来的网络传输中，交换型 SVG 将会充当现在印刷业广泛使用的图形格式--EPS 格式的网络版。并且，由于所有显示信息都封装到 XML 的属性中，交换型 SVG 还可以作为 XSLT 转换后所得到的结果文件格式，广泛应用于 XML 文档显示效果的描述中。

4.2 Mobile 上的 svg

J2ME 是 Java 2 技术架构内三大重要分支之一，其目的在提供诸如手机、PDA 等消费性电子产品或嵌入式系统开发应用程式的平台。简单来说，只要手机厂商在其作业平台上提供可以执行 J2ME

的 JAVA 虚拟机器(KVM)，则利用 J2ME 所开发出来的应用程式便能在该手机上直接执行。J2ME 最主要的用意是希望能把手机厂商与软体厂商连结起来，弥补在消费性电子产品或嵌入式系统上开发应用程式的缺口。由于现阶段手机大厂皆采纳了 J2ME 平台，包括 Nokia、Motorola、Sony

Ericsson 与 Siemens 等，因此在支持 J2ME 平台的手机逐渐普及之下，软体厂商也顺理成章的提高了在手机上开发应用程式的意愿。

有鉴于此，负责制订 Java Profile 规格的 JCP 组织，也于 2004 年公布了一个可于行动平台上绘

制 2D 矢量图形功能的套件(Package)-Scalable 2D Vector Graphics API。因其 JSR(Java Specification Request)标号订为 226，故我们 JSR 226 称之。JSR 226 是由 Nokia 这家手机大厂主导制订的，其他的专家群(Expert Group)成员包括 SonyEricsson、Motorola、Siemens、Sun Microsystems、TinyLine、 IBM、Texas Instruments、Symbian...等等。

在 J2ME 开发环境上，JSR 226 规格定义了可缩放 2D 矢量图形的应用程式界面，并且必须支

持 SVG Tiny Profile，并相容于 SVG-T 1.1。其执行平台和 OpenVG 相差不多，皆适用于记忆体容量、屏幕大小及计算效能有限的行动装置上。但有别于 OpenVG 规格的是，JSR 226 是一套较为高阶的矢量绘图标准。此规格提供了可用来绘制 Scalable 2D vector images 的 API 套件，其中包含了 SVG 格式的影像档。

由于 JSR 226 必须支持 SVG Tiny Profile 特性的关係，JSR 226 应该具备具有延伸机制的能力。随着 SVG profiles 未来可能的发展，才能达到完全支持的效果。此外，JSR 226 若能透过 OpenVG 函式库来加以实作，并且充分利用矢量图形硬体加速的功能，对于 JSR 226 效能的展现绝对有正面的助益。最后说明 JSR 226 这套程式界面的应用，主要项目包括地图视觉化、可缩放的图示

(icon)、及其他必须符合自由缩放需求的进阶应用。

4.3 RIM 上的 svg

借助于 SVG 实现九宫格布局，我们对 UI 的设计和修改就非常方便。我们这部分 SVG 的例子，希望达到的效果是使用 SVG 原始文件来布局我们的九宫格 UI，同时，应用 RIM 对 JSR226 的支持，

来对用户界面事件做出响应。通过这个方式，我们可以熟悉和了解在 BlackBerry 应用 SVG 开发的过程和方法。

根据最新的 BlackBerry 的 Browser 技术规范，svgtiny1.2 已经在 BlackBerry 上得到了支持。所以

BlackBerry 上 SVG 的开发的支持通过 HTML 方式集成，也可以采用 Java 本地应用的方式来集成。

步骤一

编辑原始 SVG 文件

由于 SVG 文件是一种基于 XML 格式的标签文件，所以也有很多基于 XML 编辑风格的工具来编辑原始 SVG 文件。一种选择是 Adobe 的 svgview,也有一个中国人开发的工具，叫 SVGDeveloper。

对于 SVG 的编辑，我们可以用 BlackBerry 的自己的选择 Plazmic Composer for BlackBerry Smartphones。这个工具本身是用来作为 BlackBerry 上的主题和动画制作的工具。但是它也可以用来对 SVG 文件编辑。

在第 6 章，我们也会介绍用这个工具来进行 BlackBerry 上的主题和动画制作。

在这里就以 SVGDeveloper 为例，说明一个基本的 SVG 文件的编辑已经构成开发过程，关于 SVGDevelper 的使用和安装下载，可以参考 SVGDevelper 的官方网站。下面我们使用 SVGDeveloper 编辑一个 sample.svg 文件

对于生成的 sample.svg 的源文件，如果打开，可以看到如下内容，我们分别解释如下：

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11- flat-20030114.dtd">

xmlns:xlink="http://www.w3.org/1999/xlink">

上面的是 SVG 源文件，也就是 XML 文件的文件头，描述了 SVG 的版本和 xml 的版本信息

<!— image 2 to 8 -->

上面的时 xml 文件中的 image 部分，也就是我们在 svg 文件中引入图标文件的内容。菜单图标 2

到 8 被省略掉了。

menu1</text>

<!— munu text 2 to 8 -->

<text x="77" y="129" space="preserve" font-family="Tahoma" font-size="12" fill="#000000"

stroke="none" stroke-opacity="0" transform="matrix(2.49,0,-

0.06700001,0.9999999,165.3164,175.9896)" xmlns="http://www.w3.org/2000/svg">

menu9</text>

上面的时 xml 文件中的菜单项的文字描述部分，也就是我们在 svg 文件中引入菜单描述的内容。菜单文字 2 到 8 被省略掉了。

<!— mune underline 2 to 8 -->

</svg>

上面的是 xml 文件中的菜单项下面的高亮的下划线部分，也就是我们在 svg 文件中引入菜单突出的内容。下划线 2 到 8 被省略掉了。

步骤二

对于 SVG 的原始文件的操作，我们可以直接选择基于浏览器上操作，比如 DOM 和 Javascript 方式，通过 Widget 技术或者浏览器应用直接操作。还有一种选择是使用 J2ME API 来对 SVG 文件进行操作。在本文中，我们选择使用 J2ME API 来对 SVG 原始文件进行操作，达到的效果是，当用户选择

中 SVG 图标是，响应的图标会出现。

建立 Java 应用，添加一个基本的基于 canvas 应用的的 java 文件中，这个应用需要考虑如下内容:

由于我们是一个九宫格的 UI 应用程序，需要考虑的就是对用户键盘输入的响应，这里有两种方式可以响应获取到键盘或者滚轮之类的手机用户输入时间，一种方式是通过 canvas 的响应接口，正如前面几种 UI 设计的方法中应用的那样。另外一种方式是通过 SVG 元素本身提供实现的事件响应接口来捕获获取用户输入事件。

org.w3c.dom.events 取用户输入事件提供的事件类型包括如下几种类型

click 点击

DOMActivate 和 click 类似 DOMFocusIn 获取焦点 DOMFocusOut 焦点移出相应的处理示例逻辑如下所示

EventListener listen1 = new MyEventListener();

// Listen to click events, during the bubbling phase

SVGElement myRect = (SVGElement)document.getElementById();

myRect.addEventListener("click", listen1, false);

由于本例中 item 的个数比较多，就不一一实现这样的方法了，采用 canvas 获取滚轮移动然后动态显示下划线的方式就可以了。在地 5 章，我们会继续讨论 dom 事件响应的编程方法。

在 JSR226 基于 SVG 的开发过程中，需要引入的主要的包括如下几个：

import javax.microedition.m2g.*;

import org.w3c.dom.*;

import org.w3c.dom.svg.*;

正如名字所示，这几个 package 的具体作用就不详述了。SVG 的元素可以应用到 MIDP 的高级 UI 组件上，也可以应用到 MIDP 的低级 UI 组件上。这里我们还是以 Canvas 为例说明 SVG 在 BlackBerryUI 上的使用。

class MySVGCanvas extends Canvas

{

private SVGImage _image;

private ScalableGraphics _sg;

MySVGCanvas(SVGImage image) throws IOException

{

_image = image;

_sg = ScalableGraphics.createInstance();

}

public void paint(Graphics g)

{

if( _image == null )

{

return;

}

// Bind target Graphics target to render to.

_sg.bindTarget(g);

Document document = _image.getDocument(); For (int i=1; i<=9;i++)

{

SVGElement menuline = (SVGElement) document.getElementById(“menuline” + i);

if (i == focus)

menuline. setTrait ("visibility",”visible”);

else

menuline. setTrait ("visibility",”hidden”);

}

// Set our viewport dimensions.

_image.setViewportWidth(_canvasWidth);

_image.setViewportHeight(_canvasHeight);

// Render the svg image (model) and x/y=0/0

_sg.render(0, 0, _image);

// Release bindings on Graphics

_sg.releaseTarget();

}

public void keyPressed(int key) {

int action = getKeyAction(key);

switch (action) {

case FIRE:

Alert alert = new Alert("You select:", menuName[focus], menuImg[focus], AlertType.INFO);

alert.setTimeout(Alert.FOREVER);

break;

case UP:

focus = focus - 3;

if (focus < 0) {

focus = focus + 9;

}

break;

……

repaint();

serviceRepaints();

}

在 midlet 主程序中加入如下初始化逻辑

private static final String SVG_URL = "/sample.svg"; SVGImage image = loadSVGImage(SVG_URL);

Canvas canvas = new MySVGCanvas(image);

步骤三

编译打包，把 Java 工程生成相应的 cod 文件，下载到真机或者模拟器上，可以观察到我们的 SVG

技术 base 的九宫格程序的 UI 效果了。

5 基于 BlackBerry Widget 的 UI 设计

对于九宫格的一种有趣的解决方案是用 Widget 设计一个纯 UI 或者所有的 UI 工作都借用 Widget

技术，通过 Widget 扩展或者 BB 提供的应用通信和交互，让 Widget 和后台的 Java 应用进行通信。

在本应用中，我们通过采 HTML 中加载 SVG 的方式，在一个 Widget 应用中放入我们的九宫格程序。在实际应用中，没有必要采用这样方式，可以直接通过 HTML 页面嵌入 IMAGE 文件的方式实现。

开发步骤，第一步:

Svg 是 Adobe 倡议的 xml 基于的文档规范，后来也被列入 W3C 的标准之中，所以 SVG 页面中的事件响应的脚本写法很多，包括的写法有 SMIL 方式、Attributes 方式、JavaScript+SMIL 方式、 EventListener 方式)，根据不同的需要让大家有更多的选择。我们这里以 javascript 的 eventlistener 方式来编写我们的九宫格的菜单编写方法。

在我们第 4 章的 svg 文档中，加入如下脚本内容

<![CDATA[

var svgns = "http://www.w3.org/2000/svg";

function makeShape() {

var svgDoc;

var varmenuimg1 = window.document.getElementById("menuimg1");

var varmenuline;

//varmenuline.setAttributeNS(null, "visibility", "hidden");

var i = 1;

for (i=1; i<10; i++)

{

varmenuline = window.document.getElementById("menuline" + i);

varmenuline.setAttributeNS(null, "visibility", "hidden");

}

varmenuimg1.addEventListener("click", changeVisible, false);

}

function changeVisible(evt) {

var varmenuline1_i = window.document.getElementById("menuline4");

varmenuline1_i.setAttributeNS(null, "visibility", "visible");

}

makeShape();

]]>

</script>

由于这里采用的 html 的方式结合 svg，所以我们可以先在 PC 的浏览器中调试观察这个 svg 的效果。到浏览器下载了 Adobe 的 svg viewer 插件后，可以用浏览器直接打开这个 svg 文件进行查看调试

看鼠标点击的实际效果。也可以打开包含这个 svg 的 html 文件。

上面的时打开页面时候的效果，然后点击 menu1 的图标，下面的下划线会出现如下

完成这里的工作之后，可以对这个页面进行大小的适配，让它满足我们的真实手机的大小效果，到这里关于 svg 的页面的开发工作都已经完成。

最后参考 widget 开发基本篇，将我们的 html 文件转成 BlackBerry 上的 cod 文件，然后根据

widget 开发提高篇，在我们的页面菜单的响应事件中加入对具体 Java 应用调用的工作，到这里一个结合了 Widget/SVG/Java 应用的九宫格应用界面的算完成了。

BlackBerry SDK下载

BlackBerry Java Plug-in for Eclipse v1.1

Java Plug-in for Eclipse Update Site

BlackBerry Web Plug-in v2.0

BlackBerry Widget SDK v1.0

BlackBerry Theme Studio v5.0

Plazmic Content Developer’s Kit v4.7

BlackBerry smartphone simulators