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">

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

<!— image 2 to 8 -->

上面的時xml文件中的image部分，也就是我們在svg文件中引入圖標文件的內容。菜單圖標2到8被省略掉了。

menu1</text>

<!— munu text 2 to 8 -->

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效果了。

BlackBerryUI設計大全(五)

4基於SVG的UI設計

4.1 什麼是SVG

4.2 Mobile上的svg

4.3 RIM上的svg

blackberry上的ajax

黑莓開發者的第一個BlackBerry應用開發--創建主程序

黑莓開發常見問題之二

blackberry觸摸屏設備編程(一)

黑莓sdk下載地址

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結