面向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界面文件進行設計?；赬ML的以上優勢，本文將其作為圖形界面的存儲格式。

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.］