面向BREW平台的可视化UI设计工具开发

董宗然，孙 斌，张盈谦，杨 光，陈秀寓，董悦丽

（大连东软信息学院 计算机科学与技术系，辽宁 大连116023）

0 引 言

BREW （binary runtime environment for wireless）技术是美国高通 （QUALCOMM）公司为CDMA业务提供的一种无线移动网络中的端到端的解决方案。BREW主要应用在移动通信领域，类似一个开放免费的PC操作系统，其它厂商和个人开发者可以在这个平台上设计各项应用［1－2］。应用的数目和质量决定了平台受欢迎的程度，而应用开发工具链中UI设计工具的品质直接影响了应用开发的难度和效率。

BREW应用主要基于C语言进行开发，深受广大应用开发者的喜爱。但应用界面 （user interface，UI）主要依赖程序员直接编写程序代码来创建和设置属性，大大降低了开发的效率。虽然近年来高通先后推出了功能更强大的UI工具包BUIW （BREW UI widget）和新一代移动操作系统Brew MP （brew mobile platform），但是在 UI设计方面却一直没有先进的可视化设计工具出现。与此同时其它智能手机系统，如IOS，Android，Symbian，MeeGo等平台上的应用开发却有着方便易用的可视化UI设计工具辅助［3－5］。

本文将探讨BREW界面设计工具的设计流程，针对重要的技术点给出分析或实现方法，并开发一款软件原型，通过操作实验说明工具在快速构建BREW应用UI过程中可行性和高效性。为了更好的满足开发者设计复杂UI的需求，也为了更好的适应Brew MP新平台，本方案的UI控件 （Widget）将以BUIW为参考标准［6］。

1 软件工作流程

BREW应用界面设计的传统模式是在独立的图形软件或是稿纸上设计应用的UI原型，程序员开发时再编写UI代码来实现。为了提高程序的开发效率，本文将开发支持控件拖拽、拉伸等人性化操作的可视化界面设计工具，并提供从UI设计结果到最终BREW UI代码框架的自动转换，根据UI代码框架可以快速构建BREW应用。软件的工作流程如图1所示。

图1 软件工作流程

2 XML界面文件定义

软件提供将UI设计结果保存成文件的功能，以便软件再次打开保存结果进行二次开发。XML（extensible markup language）即可扩展标记语言，它是Internet环境中跨平台的一种简单的数据存储语言，是当前处理结构化文档信息的有力工具［7］。XML主要用来存储数据，重在数据本身。XML作为一种标准的数据存储和交换形式，应用程序可以方便的生成XML格式输出数据，也可以方便的将其加载到程序环境中，并利用丰富的XML解析工具 （类库等）分析它［8］。此外对于具有丰富 UI开发经验的程序员也可以使用文本工具直接编辑XML界面文件进行设计。基于XML的以上优势，本文将其作为图形界面的存储格式。

BREW应用的界面是由容器和控件组成的。控件本身就可以是一个容器，这就决定了容器内的成员必然是树型结构，是一种嵌套关系。一般来讲父节点是容器，叶节点是控件，如图2所示。

XML正适合描述这种树形嵌套关系，同时可以将容器和控件的属性以 “名—值”对的形式在每个XML节点中进行设置。BREW界面的等价XML文件格式描述如下。

＜？xml version＝"1.0"encoding＝"utf－8"？＞

＜rootcontainer

brew：rcproperty1＝"rcvalue1"

brew：rcproperty2＝"rcvalue2"

……

图2 容器、控件关系

brew：rcpropertyN1＝"rcvalueN1"

xmlns：brew＝"http：／／schemas.brew.com／apk／res／brew"＞

＜container1

brew：c1property1＝"c1value1"

brew：c1property2＝"c1value2"

……

brew：c1propertyN2＝"c1valueN2"＞

＜widget1

brew：w1property1＝"w1value1"

brew：w1property2＝"w1value2"

……

brew：w1propertyN3＝"w1valueN3"＞

＜／widget1＞

＜container2

brew：c2property1＝"c2value1"

brew：c2property2＝"c2value2"

……

brew：c2propertyN4＝"c2valueN4"＞

＜widget6

brew：w6property1＝"w6value1"

brew：w6property2＝"w6value2"

……

brew：w6propertyN5＝"w6valueN5"＞

＜／widget6＞

＜／container2＞

……

＜／container1＞

＜／rootcontainer＞

以上XML文件描述了图2中根容器、容器1、控件1、容器2、控件6等的相互关系，可以看出XML文件形式虽然简单，但完全适合这种树形关系的表达。

3 界面可视化设计模块

可视化UI设计工具要求给用户带来方便、快捷的使用体验，要支持控件的拖拽、缩放、属性修改后的同步显示等功能。目前Google的Android平台发展迅猛，但Android SDK中自带的可视化界面设计工具仍然存在一些不足，因此针对Android平台的第三方UI设计工具Droid－Draw深受开发者得喜爱和推崇。DroidDraw是一款遵循GNU GPL v2许可的开源项目［9］，研究发现 DroidDraw项目的设计具有很好的通用性和扩展性。本文在DroidDraw基础上针对Brew的BUIW进行修改和扩展，开发一款名为BrewDraw的UI设计工具，同样本软件也将遵循GNU GPL v2相关许可，并承诺开源。

BUIW的UI框架基于MVC模式设计，其中显示和控制由Widget负责，数据存储由Model负责，如图3所示。

图3 BUIW框架

可视化设计模块的核心思想是采用面向对象技术对各种容器、控件、模型进行封装，并分清其继承关系，以此为基础方便修改和扩展。容器、控件、模型的类关系如图4所示。

图4 容器、控件、模型类关系

4 界面框架代码生成模块

由于BREW技术起源较早，受限于当时的架构设计，BREW界面的创建方式是基于C的程序语句，这与Android等新兴平台可以基于XML文件直接生成界面的方式相比稍显落后。为了能够与BREW编程方式无缝融合，所以需要开发一个能将XML界面文件转换到C语言框架代码的模块。对于XML文件的解析可以使用开发类库中的已有工具类。

此部分的重点工作是根据BREW开发的API文档构建一个规则库，将不同控件 （或容器）的创建方法、不同属性的设置方法对应的API接口函数分类整理，根据传来的控件 （或容器）类型，属性名和属性值即可得到对应的C程序设置代码。为了便于代码的复用，将C代码写入与XML界面对应的.c和.h框架文件中，在框架文件中将代码整理成便于调用、满足语法要求的函数，并添加对应的变量定义和头文件引用等。

解析XML界面文件的实现基于SAX （simple API for XML）方式，逐行顺序扫描XML文档，在扫描到XML标签元素 （包括起始标签、结束标签）时会自动回调相应的事件处理函数，我们可以将针对标签元素的处理放在此函数中［10］。这种方式很好的支持了容器间的嵌套，又避免了递归编程，简单高效。主要算法过程描述如下。

算法实现中需要创建一个容器栈ContainerStack，该栈的作用是按层次保存界面上的容器，栈最底层的容器是根容器，容器中可以放子容器和控件，所有的控件都要放在容器中。在生成代码时每个控件在创建和设置属性后都要将其插入所依附的容器，每个容器在构建完其中的控件之后也要将其插入上层容器。

SAX解析XML文件，遇到元素起始标签时的回调函数StartElement。

Function StartElement

（1）判断标签元素的类型；

（2）如果是容器起始标签，将容器压入栈Container－Stack，读取容器属性，查找规则库中对应的BREW API函数，生成创建容器和设置容器属性的代码；

（3）如果是控件起始标签，读取控件属性，查找规则库中对应的BREW API函数，生成创建控件和设置控件属性的代码；

End

SAX解析XML文件，遇到元素结束标签时的回调函数EndElement。

Function EndElement

（1）判断标签元素的类型；

（2）如果是容器结尾标签，将容器栈ContainerStack栈顶容器元素出栈，将该出栈容器插入到ContainerStack当前的栈顶容器中；

（3）如果是控件结尾标签，将该控件插入Container－Stack栈顶容器；

End

5 实验与分析

实验以一个BREW UI实例的设计过程来说明软件工具的使用及效果。为了简化用户操作，将可视化设计和代码生成工具集成到Visual Studio环境中，可通过工具菜单方便启动，快捷菜单项如图5所示。

图5 软件工具与Visual Studio菜单集成

图6 可视化UI设计效果

UI的设计过程需要经常修改或者中断，为了便于UI的二次设计，可视化UI设计工具可将图形结果保存为XML文件，方便基于此结果继续工作。这里将上述图形设计结果保存为FirstPage.xml。

点击快捷菜单BREW Code Generator，启动BREW UI代码转化工具，将FirtPage.xml作为输入，如图7所示。

接下来选择生成代码将保存的位置和文件名，并根据要使用此UI的工程设定代码中项目名参数的值，如图8所示。

点击生成按钮，即可生成与原UI等效的BREW程序文件FirtPage.c和 FirstPage.h，FirtPage.c中部分框架代码说明如下。

／／头文件包含定义

＃include"PageFirst.h"

……

／／UI创建方法，供其它程序文件调用

AEEResult PageFirst＿Create （CMyButton＊ pMe，IWidget＊＊ppWidget）

｛

／／辅助变量声明

AEEResult nErr；

WidgetPos dwpos；

WExtent we；

IXYContainer＊pCont；

IWidget＊pWgt；

／／控件指针声明

IWidget＊piwTitle；

……

／／创建控件依附容器

WidgetUtils＿CreateContainerGetWidget（

pMe－＞pIShell，AEECLSID＿XYCONTAINER，

CAST （IContainer＊＊，＆pCont），＆pWgt）；

／／创建piwTitle控件

ISHELL ＿CreateInstance （pMe－ ＞pIShell，AEECLSID＿STATICWIDGET，（void＊＊）＆piwTitle）；

／／设置piwTitle属性

（void）IWIDGET＿SetText（piwTitle，L"Hello，

Widget App"，TRUE）；

IWIDGET＿GetPreferredExtent（piwTitle，＆we）；

we.width＝100；

we.height＝15；

IWIDGET＿SetExtent（piwTitle，＆we）；

dwpos.x＝0；

dwpos.y＝0；

dwpos.bVisible＝ TRUE；

／／将piwTitle插入容器

（void）IXYCONTAINER ＿Insert （pCont，piwTitle，WIDGET＿ZNORMAL，＆dwpos）；

／／处理其它控件，略

……

return nErr；

｝

／／UI事件处理函数

boolean PageFirst＿HandlerEvent（

CMyButton ＊pMe，AEEEvent evt，uint16wParam，uint32dwParam）

｛

……

switch（evt）

｛

／／处理不同事件，略

case EVT＿KEY：

……

｝

return false；

｝

在得到UI界面的.c和.h程序文件之后就可以快速构建BREW应用了。首先将UI界面对应的.c和.h文件添加到工程，然后在需要启动UI的程序文件头部添加.h文件包含，最后在适当的位置调用UI程序文件中的界面创建函数和事件处理函数，如图9所示。

图9 基于UI框架代码构建应用

点击运行，在模拟器中查看UI实际效果，如图10所示。实际UI效果与图6可视化设计工具中一致。

图10 实际UI运行效果

从以上实验过程可以看出，基于本文的工具软件可以方便的进行BREW UI设计，并且自动生成对应的BREW UI框架代码。只需要做简单的设置和少量调用代码的键入便可得到可运行的BREW程序。而传统开放方式，BREW开发者需要键入大量的UI代码，图10中的UI生成代码就达200多行，在添加控件或属性调整时要反复查看UI在模拟器或真机中的运行效果。初步实测统计，本文方式将提高BREW程序员UI开发效率至少3倍以上。

6 结束语

本文面向BREW移动平台，创新性的开发了一款可视化的应用界面设计工具，为程序开发人员提供了便捷的BREW应用UI设计和代码生成手段，与传统的BREW UI开发方式相比，大幅提高了开发效率。同时对促进BREW及BREW MP平台工具链技术升级有一定的启发作用。

后续工作展望：①为BUIW中更多的容器、控件进行可视化扩展，加强可视化工具的实用功能；②完善数据模型支持，以配合控件种类的扩展；③继续加强与北京天翼博路公司、美国高通公司的校企合作，得到深入的技术支持。

［1］WANG Xiao－chuan，CAO Hong－wei，LIN Tao，et al.Introduction to BREW programming ［M］.Beijing：Beijing University of Technology Press，2010：1－7 （in Chinese）.［王小川，曹洪伟，林涛，等.BREW编程实例入门 ［M］.北京：北京理工大学出版社，2010：1－7.］

［2］WANG Chao，ZHENG Pei－yuan，PIAO Jia－jun，et al.Design of mobile surveillance client based on BREW mobile phones［J］.Computer Engineering and Design，2010，31 （7）：1401－1404（in Chinese）.［王超，郑培元，卜佳俊，等.基于BREW手机的移动监控客户端设计 ［J］.计算机工程与设计，2010，31 （7）：1401－1404.］

［3］LI He，YIN Qiang－guo，JIANG Liang.Development and application of BREW technology ［M］.Beijing：Mechanical Industry Press，2006：6－11 （in Chinese）.［李贺，尹强国，蒋亮.BREW技术开发与应用 ［M］.北京：机械工业出版社，2006：6－11.］

［4］Brendan D Burns.About DroidDraw ［EB／OL］.［2011－08－12］.http：／／www.droiddraw.org／.

［5］CAI Zhi－ming，LU Chuan－fu，LI Li－xia，et al.Proficient in Qt4programming ［M］.Beijing：Electronic Industry Press，2008：35－45 （in Chinese）.［蔡志明，卢传富，李立夏，等.精通Qt4编程 ［M］.北京：电子工业出版社，2008：35－45.］

［6］Qualcomm.How to get BUIW ［EB／OL］.［2011－08－12.］https：／／brewx.qualcomm.com／brew／sdk／download.jsp？page＝dx／en／brew31／ex／tl／uiwidgets.

［7］W3School.XML Tutorials ［EB／OL］.［2011－08－13.］http：／／www.w3school.com.cn／xml／index.asp.

［8］FENG Jin，DING Bo，SHI Dian－xi.Research on the XML parsing technology ［J］.Computer Engineering and Science，2009，31 （2）：120－124 （in Chinese）.［冯进，丁博，史殿习，等.XML解析技术研究 ［J］.计算机工程与科学，2009，31（2）：120－124.］

［9］Free Software Foundation.GNU OperatingSystem ［EB／OL］.［2011－08－11］.http：／／www.gnu.org／licenses／gpl－2.0.html.

［10］Pedestrian.SAX parsing XML instruction ［EB／OL］.［2011－08－13］.http：／／www.iteye.com／wiki／topic／401377 （in Chinese）.［Pedestrian.SAX解 析 XML 详 解 ［EB／OL］.［2011－08－13］.http：／／www.iteye.com／wiki／topic／401377.］