董宗然，孫 斌，張盈謙，楊 光，陳秀寓，董悅麗

（大連東軟信息學(xué)院 計(jì)算機(jī)科學(xué)與技術(shù)系，遼寧 大連116023）

0 引 言

BREW （binary runtime environment for wireless）技術(shù)是美國高通 （QUALCOMM）公司為CDMA業(yè)務(wù)提供的一種無線移動(dòng)網(wǎng)絡(luò)中的端到端的解決方案。BREW主要應(yīng)用在移動(dòng)通信領(lǐng)域，類似一個(gè)開放免費(fèi)的PC操作系統(tǒng)，其它廠商和個(gè)人開發(fā)者可以在這個(gè)平臺(tái)上設(shè)計(jì)各項(xiàng)應(yīng)用［1－2］。應(yīng)用的數(shù)目和質(zhì)量決定了平臺(tái)受歡迎的程度，而應(yīng)用開發(fā)工具鏈中UI設(shè)計(jì)工具的品質(zhì)直接影響了應(yīng)用開發(fā)的難度和效率。

BREW應(yīng)用主要基于C語言進(jìn)行開發(fā)，深受廣大應(yīng)用開發(fā)者的喜愛。但應(yīng)用界面 （user interface，UI）主要依賴程序員直接編寫程序代碼來創(chuàng)建和設(shè)置屬性，大大降低了開發(fā)的效率。雖然近年來高通先后推出了功能更強(qiáng)大的UI工具包BUIW （BREW UI widget）和新一代移動(dòng)操作系統(tǒng)Brew MP （brew mobile platform），但是在 UI設(shè)計(jì)方面卻一直沒有先進(jìn)的可視化設(shè)計(jì)工具出現(xiàn)。與此同時(shí)其它智能手機(jī)系統(tǒng)，如IOS，Android，Symbian，MeeGo等平臺(tái)上的應(yīng)用開發(fā)卻有著方便易用的可視化UI設(shè)計(jì)工具輔助［3－5］。

本文將探討B(tài)REW界面設(shè)計(jì)工具的設(shè)計(jì)流程，針對(duì)重要的技術(shù)點(diǎn)給出分析或?qū)崿F(xiàn)方法，并開發(fā)一款軟件原型，通過操作實(shí)驗(yàn)說明工具在快速構(gòu)建BREW應(yīng)用UI過程中可行性和高效性。為了更好的滿足開發(fā)者設(shè)計(jì)復(fù)雜UI的需求，也為了更好的適應(yīng)Brew MP新平臺(tái)，本方案的UI控件 （Widget）將以BUIW為參考標(biāo)準(zhǔn)［6］。

1 軟件工作流程

BREW應(yīng)用界面設(shè)計(jì)的傳統(tǒng)模式是在獨(dú)立的圖形軟件或是稿紙上設(shè)計(jì)應(yīng)用的UI原型，程序員開發(fā)時(shí)再編寫UI代碼來實(shí)現(xiàn)。為了提高程序的開發(fā)效率，本文將開發(fā)支持控件拖拽、拉伸等人性化操作的可視化界面設(shè)計(jì)工具，并提供從UI設(shè)計(jì)結(jié)果到最終BREW UI代碼框架的自動(dòng)轉(zhuǎn)換，根據(jù)UI代碼框架可以快速構(gòu)建BREW應(yīng)用。軟件的工作流程如圖1所示。

圖1 軟件工作流程

2 XML界面文件定義

軟件提供將UI設(shè)計(jì)結(jié)果保存成文件的功能，以便軟件再次打開保存結(jié)果進(jìn)行二次開發(fā)。XML（extensible markup language）即可擴(kuò)展標(biāo)記語言，它是Internet環(huán)境中跨平臺(tái)的一種簡(jiǎn)單的數(shù)據(jù)存儲(chǔ)語言，是當(dāng)前處理結(jié)構(gòu)化文檔信息的有力工具［7］。XML主要用來存儲(chǔ)數(shù)據(jù)，重在數(shù)據(jù)本身。XML作為一種標(biāo)準(zhǔn)的數(shù)據(jù)存儲(chǔ)和交換形式，應(yīng)用程序可以方便的生成XML格式輸出數(shù)據(jù)，也可以方便的將其加載到程序環(huán)境中，并利用豐富的XML解析工具 （類庫等）分析它［8］。此外對(duì)于具有豐富 UI開發(fā)經(jīng)驗(yàn)的程序員也可以使用文本工具直接編輯XML界面文件進(jìn)行設(shè)計(jì)?；赬ML的以上優(yōu)勢(shì)，本文將其作為圖形界面的存儲(chǔ)格式。

BREW應(yīng)用的界面是由容器和控件組成的?？丶旧砭涂梢允且粋€(gè)容器，這就決定了容器內(nèi)的成員必然是樹型結(jié)構(gòu)，是一種嵌套關(guān)系。一般來講父節(jié)點(diǎn)是容器，葉節(jié)點(diǎn)是控件，如圖2所示。

XML正適合描述這種樹形嵌套關(guān)系，同時(shí)可以將容器和控件的屬性以 “名—值”對(duì)的形式在每個(gè)XML節(jié)點(diǎn)中進(jìn)行設(shè)置。BREW界面的等價(jià)XML文件格式描述如下。

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

＜rootcontainer

brew：rcproperty1＝"rcvalue1"

brew：rcproperty2＝"rcvalue2"

……

圖2 容器、控件關(guān)系

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等的相互關(guān)系，可以看出XML文件形式雖然簡(jiǎn)單，但完全適合這種樹形關(guān)系的表達(dá)。

3 界面可視化設(shè)計(jì)模塊

可視化UI設(shè)計(jì)工具要求給用戶帶來方便、快捷的使用體驗(yàn)，要支持控件的拖拽、縮放、屬性修改后的同步顯示等功能。目前Google的Android平臺(tái)發(fā)展迅猛，但Android SDK中自帶的可視化界面設(shè)計(jì)工具仍然存在一些不足，因此針對(duì)Android平臺(tái)的第三方UI設(shè)計(jì)工具Droid－Draw深受開發(fā)者得喜愛和推崇。DroidDraw是一款遵循GNU GPL v2許可的開源項(xiàng)目［9］，研究發(fā)現(xiàn) DroidDraw項(xiàng)目的設(shè)計(jì)具有很好的通用性和擴(kuò)展性。本文在DroidDraw基礎(chǔ)上針對(duì)Brew的BUIW進(jìn)行修改和擴(kuò)展，開發(fā)一款名為BrewDraw的UI設(shè)計(jì)工具，同樣本軟件也將遵循GNU GPL v2相關(guān)許可，并承諾開源。

BUIW的UI框架基于MVC模式設(shè)計(jì)，其中顯示和控制由Widget負(fù)責(zé)，數(shù)據(jù)存儲(chǔ)由Model負(fù)責(zé)，如圖3所示。

圖3 BUIW框架

可視化設(shè)計(jì)模塊的核心思想是采用面向?qū)ο蠹夹g(shù)對(duì)各種容器、控件、模型進(jìn)行封裝，并分清其繼承關(guān)系，以此為基礎(chǔ)方便修改和擴(kuò)展。容器、控件、模型的類關(guān)系如圖4所示。

圖4 容器、控件、模型類關(guān)系

4 界面框架代碼生成模塊

由于BREW技術(shù)起源較早，受限于當(dāng)時(shí)的架構(gòu)設(shè)計(jì)，BREW界面的創(chuàng)建方式是基于C的程序語句，這與Android等新興平臺(tái)可以基于XML文件直接生成界面的方式相比稍顯落后。為了能夠與BREW編程方式無縫融合，所以需要開發(fā)一個(gè)能將XML界面文件轉(zhuǎn)換到C語言框架代碼的模塊。對(duì)于XML文件的解析可以使用開發(fā)類庫中的已有工具類。

此部分的重點(diǎn)工作是根據(jù)BREW開發(fā)的API文檔構(gòu)建一個(gè)規(guī)則庫，將不同控件 （或容器）的創(chuàng)建方法、不同屬性的設(shè)置方法對(duì)應(yīng)的API接口函數(shù)分類整理，根據(jù)傳來的控件 （或容器）類型，屬性名和屬性值即可得到對(duì)應(yīng)的C程序設(shè)置代碼。為了便于代碼的復(fù)用，將C代碼寫入與XML界面對(duì)應(yīng)的.c和.h框架文件中，在框架文件中將代碼整理成便于調(diào)用、滿足語法要求的函數(shù)，并添加對(duì)應(yīng)的變量定義和頭文件引用等。

解析XML界面文件的實(shí)現(xiàn)基于SAX （simple API for XML）方式，逐行順序掃描XML文檔，在掃描到XML標(biāo)簽元素 （包括起始標(biāo)簽、結(jié)束標(biāo)簽）時(shí)會(huì)自動(dòng)回調(diào)相應(yīng)的事件處理函數(shù)，我們可以將針對(duì)標(biāo)簽元素的處理放在此函數(shù)中［10］。這種方式很好的支持了容器間的嵌套，又避免了遞歸編程，簡(jiǎn)單高效。主要算法過程描述如下。

算法實(shí)現(xiàn)中需要?jiǎng)?chuàng)建一個(gè)容器棧ContainerStack，該棧的作用是按層次保存界面上的容器，棧最底層的容器是根容器，容器中可以放子容器和控件，所有的控件都要放在容器中。在生成代碼時(shí)每個(gè)控件在創(chuàng)建和設(shè)置屬性后都要將其插入所依附的容器，每個(gè)容器在構(gòu)建完其中的控件之后也要將其插入上層容器。

SAX解析XML文件，遇到元素起始標(biāo)簽時(shí)的回調(diào)函數(shù)StartElement。

Function StartElement

（1）判斷標(biāo)簽元素的類型；

（2）如果是容器起始標(biāo)簽，將容器壓入棧Container－Stack，讀取容器屬性，查找規(guī)則庫中對(duì)應(yīng)的BREW API函數(shù)，生成創(chuàng)建容器和設(shè)置容器屬性的代碼；

（3）如果是控件起始標(biāo)簽，讀取控件屬性，查找規(guī)則庫中對(duì)應(yīng)的BREW API函數(shù)，生成創(chuàng)建控件和設(shè)置控件屬性的代碼；

End

SAX解析XML文件，遇到元素結(jié)束標(biāo)簽時(shí)的回調(diào)函數(shù)EndElement。

Function EndElement

（1）判斷標(biāo)簽元素的類型；

（2）如果是容器結(jié)尾標(biāo)簽，將容器棧ContainerStack棧頂容器元素出棧，將該出棧容器插入到ContainerStack當(dāng)前的棧頂容器中；

（3）如果是控件結(jié)尾標(biāo)簽，將該控件插入Container－Stack棧頂容器；

End

5 實(shí)驗(yàn)與分析

實(shí)驗(yàn)以一個(gè)BREW UI實(shí)例的設(shè)計(jì)過程來說明軟件工具的使用及效果。為了簡(jiǎn)化用戶操作，將可視化設(shè)計(jì)和代碼生成工具集成到Visual Studio環(huán)境中，可通過工具菜單方便啟動(dòng)，快捷菜單項(xiàng)如圖5所示。

圖5 軟件工具與Visual Studio菜單集成

圖6 可視化UI設(shè)計(jì)效果

UI的設(shè)計(jì)過程需要經(jīng)常修改或者中斷，為了便于UI的二次設(shè)計(jì)，可視化UI設(shè)計(jì)工具可將圖形結(jié)果保存為XML文件，方便基于此結(jié)果繼續(xù)工作。這里將上述圖形設(shè)計(jì)結(jié)果保存為FirstPage.xml。

點(diǎn)擊快捷菜單BREW Code Generator，啟動(dòng)BREW UI代碼轉(zhuǎn)化工具，將FirtPage.xml作為輸入，如圖7所示。

接下來選擇生成代碼將保存的位置和文件名，并根據(jù)要使用此UI的工程設(shè)定代碼中項(xiàng)目名參數(shù)的值，如圖8所示。

點(diǎn)擊生成按鈕，即可生成與原UI等效的BREW程序文件FirtPage.c和 FirstPage.h，F(xiàn)irtPage.c中部分框架代碼說明如下。

／／頭文件包含定義

＃include"PageFirst.h"

……

／／UI創(chuàng)建方法，供其它程序文件調(diào)用

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

｛

／／輔助變量聲明

AEEResult nErr；

WidgetPos dwpos；

WExtent we；

IXYContainer＊pCont；

IWidget＊pWgt；

／／控件指針聲明

IWidget＊piwTitle；

……

／／創(chuàng)建控件依附容器

WidgetUtils＿CreateContainerGetWidget（

pMe－＞pIShell，AEECLSID＿XYCONTAINER，

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

／／創(chuàng)建piwTitle控件

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

／／設(shè)置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事件處理函數(shù)

boolean PageFirst＿HandlerEvent（

CMyButton ＊pMe，AEEEvent evt，uint16wParam，uint32dwParam）

｛

……

switch（evt）

｛

／／處理不同事件，略

case EVT＿KEY：

……

｝

return false；

｝

在得到UI界面的.c和.h程序文件之后就可以快速構(gòu)建BREW應(yīng)用了。首先將UI界面對(duì)應(yīng)的.c和.h文件添加到工程，然后在需要啟動(dòng)UI的程序文件頭部添加.h文件包含，最后在適當(dāng)?shù)奈恢谜{(diào)用UI程序文件中的界面創(chuàng)建函數(shù)和事件處理函數(shù)，如圖9所示。

圖9 基于UI框架代碼構(gòu)建應(yīng)用

點(diǎn)擊運(yùn)行，在模擬器中查看UI實(shí)際效果，如圖10所示。實(shí)際UI效果與圖6可視化設(shè)計(jì)工具中一致。

圖10 實(shí)際UI運(yùn)行效果

從以上實(shí)驗(yàn)過程可以看出，基于本文的工具軟件可以方便的進(jìn)行BREW UI設(shè)計(jì)，并且自動(dòng)生成對(duì)應(yīng)的BREW UI框架代碼。只需要做簡(jiǎn)單的設(shè)置和少量調(diào)用代碼的鍵入便可得到可運(yùn)行的BREW程序。而傳統(tǒng)開放方式，BREW開發(fā)者需要鍵入大量的UI代碼，圖10中的UI生成代碼就達(dá)200多行，在添加控件或?qū)傩哉{(diào)整時(shí)要反復(fù)查看UI在模擬器或真機(jī)中的運(yùn)行效果。初步實(shí)測(cè)統(tǒng)計(jì)，本文方式將提高BREW程序員UI開發(fā)效率至少3倍以上。

6 結(jié)束語

本文面向BREW移動(dòng)平臺(tái)，創(chuàng)新性的開發(fā)了一款可視化的應(yīng)用界面設(shè)計(jì)工具，為程序開發(fā)人員提供了便捷的BREW應(yīng)用UI設(shè)計(jì)和代碼生成手段，與傳統(tǒng)的BREW UI開發(fā)方式相比，大幅提高了開發(fā)效率。同時(shí)對(duì)促進(jìn)BREW及BREW MP平臺(tái)工具鏈技術(shù)升級(jí)有一定的啟發(fā)作用。

后續(xù)工作展望：①為BUIW中更多的容器、控件進(jìn)行可視化擴(kuò)展，加強(qiáng)可視化工具的實(shí)用功能；②完善數(shù)據(jù)模型支持，以配合控件種類的擴(kuò)展；③繼續(xù)加強(qiáng)與北京天翼博路公司、美國高通公司的校企合作，得到深入的技術(shù)支持。

［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編程實(shí)例入門 ［M］.北京：北京理工大學(xué)出版社，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ī)的移動(dòng)監(jiān)控客戶端設(shè)計(jì) ［J］.計(jì)算機(jī)工程與設(shè)計(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）.［李賀，尹強(qiáng)國，蔣亮.BREW技術(shù)開發(fā)與應(yīng)用 ［M］.北京：機(jī)械工業(yè)出版社，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］.北京：電子工業(yè)出版社，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）.［馮進(jìn)，丁博，史殿習(xí)，等.XML解析技術(shù)研究 ［J］.計(jì)算機(jī)工程與科學(xué)，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.］