應(yīng)用于Ｔｅｍｐｌａｔｅ框架的ＳＶＧ Ｔｉｎｙ創(chuàng)作工具的設(shè)計與實現(xiàn)

摘要：通過對Template框架的研究，對在該框架中引入SVG Tiny技術(shù)進行了研究，并為該框架設(shè)計和實現(xiàn)了SVG Tiny創(chuàng)作工具。

關(guān)鍵詞：SVG；SVG Tiny；Template框架；Spring；控制反轉(zhuǎn)

中圖分類號：TP311文獻標(biāo)識碼：A文章編號：1009-3044(2008)35-2174-02

Design and Implementation of SVG Tiny Creation Tool for Template Framework

LU Tao

(College of Software Engineering， Southeast University， Nanjing 210096， China)

Abstract: Studied the introduction of SVG Tiny technology into Template framework through the framework research designed and implemented SVG creation tool for the Template framework.

Key words: SVG; SVG Tiny; template framework; spring; inversion of control

1 引言

可縮放向量圖形（Scalable Vector Graphics，SVG）是基于可擴展標(biāo)記語言（XML）發(fā)展而來，是用于描述二維向量圖形的一種圖形格式，它由W3C制定，是一個開放的標(biāo)準(zhǔn)。SVG Tiny又稱SVGT，是英語“Scalable Vector Graphics， Tiny Profile”的簡寫，可以翻譯為“可縮放的向量圖形標(biāo)準(zhǔn)的微型簡化版本”。它是SVG的一個子集，主要目標(biāo)是為手機等低端移動設(shè)備提供向量圖形顯示格式，也可用于PC等終端上[1]。

Template框架技術(shù)是一種能讓各種數(shù)字家電快捷地利用網(wǎng)上內(nèi)容服務(wù)的技術(shù)，目前國外諸多品牌的液晶電視和手機即采用這樣的技術(shù)實現(xiàn)家電上網(wǎng)功能[2]。本文主要針對SVG Tiny應(yīng)用于Template框架技術(shù)進行相關(guān)的研究，提出了SVG Tiny在該框架下應(yīng)用的發(fā)展優(yōu)勢，通過設(shè)計和實現(xiàn)SVG Tiny創(chuàng)作工具，提高了框架開發(fā)和維護效率，并且在手機平臺上進行相應(yīng)的測試。

2 技術(shù)介紹

2.1 SVG

數(shù)字圖像，是二維圖像用有限數(shù)字數(shù)值像素的表示，包括光柵圖像和矢量圖像。

在光柵圖像（如GIF或JPEG圖像）中，文件包含圖像中每個像素的顏色值。瀏覽器讀取這些值并做出相應(yīng)行動。而矢量圖形是點、直線或者多邊形等基于數(shù)學(xué)方程的幾何圖元表示圖像。SVG相對于其他矢量圖形，還具有很多優(yōu)點：嚴格遵從XML語法，可以使用DOM接口方便地操作SVG圖形對象；可以與現(xiàn)有的成熟技術(shù)相結(jié)合，例如JavaScript，TinyScript；基于文本格式，具有大量的事件驅(qū)動等等[3]。

這些特性與優(yōu)點已經(jīng)使SVG在諸如Web GIS、實時監(jiān)控、醫(yī)療可視化等領(lǐng)域得到了廣泛的應(yīng)用。

2.2 Template框架

Template是一種能讓各類數(shù)字家電快捷地利用網(wǎng)上服務(wù)內(nèi)容的技術(shù)，該框架主要可以分成服務(wù)器端和客戶端，如圖1所示。

服務(wù)器端是一個基于Java的Web應(yīng)用，類似于Spring框架，采用了組件容器的概念，使用了IoC（控制反轉(zhuǎn)）技術(shù)[4]，將業(yè)務(wù)邏輯處理工作抽象后，劃分成一個個的活動（Step），每個Step的工作由一個連接器來承擔(dān)。用XML文件來定義活動之間的依賴關(guān)系，由容器在運行期間讀取XML文件動態(tài)注入各個連接器之間的依賴關(guān)系。

客戶端主要是一個SVG的瀏覽器，這里使用的是SVG Tiny規(guī)范，其顯示引擎比一般的SVG瀏覽器簡單。客戶端和服務(wù)器端數(shù)據(jù)傳輸采用的是HTTP協(xié)議上綁定CPM協(xié)議。CPM是一種十分簡單的二進制格式的多文件傳輸協(xié)議。客戶端也從服務(wù)器端取到一個二進制格式的元模板文件MTD文件，它是客戶端的元模板文件，在服務(wù)器端有相應(yīng)的轉(zhuǎn)換組件把XML形式轉(zhuǎn)化為二進制格式。

2.3 Template中的SVG Tiny

Template技術(shù)針對同一數(shù)據(jù)源的內(nèi)容，因數(shù)據(jù)源、版面描述、服務(wù)流程描述之間相互獨立，故能讓顯示執(zhí)行引擎可以快捷地迎合不同畫面尺寸的終端以及操作特征來顯示數(shù)據(jù)源的內(nèi)容，具體過程如圖2所示。

首先用戶端向服務(wù)器發(fā)出指令，Template服務(wù)器響應(yīng)后調(diào)出MTD文件，根據(jù)MTD文件中描述的流程訪問網(wǎng)絡(luò)（或數(shù)據(jù)源），包括找出相應(yīng)的SVG模板，并得到相應(yīng)的SVG文件。之后Template服務(wù)器按MTD文件中描述的流程把SVG文件、控制用戶端顯示流程的MTD文件以及一些TXT文件和圖像文件打包壓縮成jar文件包送回用戶端，用戶端加壓縮并根據(jù)相關(guān)的設(shè)置顯示內(nèi)容。

Template的表示層用SVG Tiny來控制，這樣就給Template框架帶來了很多優(yōu)點。

SVG Tiny不依賴于物理硬件或操作系統(tǒng)平臺，無須編譯，這樣就不需要客戶端數(shù)字家電有諸如機頂盒這樣的重量級設(shè)備支持。SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內(nèi)容的前提下可以實現(xiàn)位圖格式中許多復(fù)雜的圖像顯示效果。SVG Tiny本身的動態(tài)部分是基于SMIL標(biāo)準(zhǔn)，并且集成了Tiny Script腳本語言，大大提高了與用戶的交互性。

3 SVG Tiny創(chuàng)作工具的設(shè)計

應(yīng)用Template技術(shù)實現(xiàn)的數(shù)字電視和手機終端都采用了SVG Tiny來表現(xiàn)控制界面，菜單界面，應(yīng)用程序界面等。隨著SVG Tiny創(chuàng)作工具的實現(xiàn)，不是軟件開發(fā)人員亦可以方便地設(shè)計Template的表現(xiàn)層，大大提高了Template框架的可維護性和可擴展性。該創(chuàng)作工具的設(shè)計主要解決三個方面的問題：SVG解析、圖像瀏覽以及圖形編輯功能。

SVG解析，把SVG文件中定義的圖像讀取出來，對象化后放到圖像池中。在PC上，解析器可以有很多選擇，dom4j是目前較常用的解析器，但自身較大，對于Applet或嵌入式運用不利。Template框架中使用的是在嵌入式終端引擎上通用的kXML。

圖像瀏覽，從圖像池中把對象化的圖像按照SVG Tiny規(guī)范中定義的格式顯示出來，用Graphics2D來進行繪制。顯示引擎重畫的時候從圖形池中取出一個個的圖形對象來進行重畫。圖像對象過多的時候，可能重畫速度低會導(dǎo)致屏幕出現(xiàn)閃爍。用雙緩沖的辦法來保持屏幕連續(xù)不閃爍。

圖形編輯，SVG Tiny中定義了諸多基本圖像和動態(tài)效果，需要有效的解決代碼重用問題，從而把圖形瀏覽器在終端引擎上達到復(fù)用效果，具體設(shè)計如圖3所示，借鑒了GoF的Composite設(shè)計模式[5]。

4 實現(xiàn)及測試結(jié)果

本實驗中SVG Tiny創(chuàng)作工具使用的是NetBeans開源IDE，因其優(yōu)秀的Swing開發(fā)功能，大大加快了開發(fā)的進度，實現(xiàn)之后的整體效果圖4所示。

用該創(chuàng)作工具創(chuàng)作的SVG Tiny文件，在Template框架中應(yīng)用的結(jié)果如圖5所示。

5 結(jié)論

本文討論了SVG Tiny在Template框架中應(yīng)用所帶來的優(yōu)勢，并為之設(shè)計相應(yīng)的創(chuàng)作工具。在PC上，矢量圖格式Flash已經(jīng)占據(jù)了很重要的市場份額，而在終端等嵌入式設(shè)備市場上，F(xiàn)lash格式并沒有得到太多的應(yīng)用。在Template框架中引入SVG Tiny技術(shù)及其創(chuàng)作工具，不僅提高了Template框架的可維護性、可擴展性，而且對SVG Tiny在嵌入式終端中的應(yīng)用提供了一種解決思路。

參考文獻：

[1] W3C.Scalable Vector Graphics (SVG) - XML Graphics for the Web[EB/OL].http://www.w3.org/Graphics/SVG.

[2] 路飛.網(wǎng)絡(luò)家電悄悄向我們走來[J].國外技術(shù)動態(tài)，2005(8):21-33.

[3] Eisenberg J.SVG Essentials[M].O’Reilly Media，Inc，2002:13-17.

[4] Machacek J，Ditt J，Vukotic A，et al.Pro Spring2.5[M].Apress，2008:31-72.

[5] 李英軍，馬曉星，蔡敏，等.設(shè)計模式：可復(fù)用面向?qū)ο筌浖幕A(chǔ)[M].北京:機械工業(yè)出版社，2007:497-504.