• 沒有找到結果。

系統實作

在文檔中 風格化使用者介面 (頁 27-36)

4-1 概述

本篇是以 Java 語言來實作,主要是利用 Java 語言跨平台的特性,開發出 一套可在任何支援 JVM 平台上執行,而不需做修改的程式。另外,考量到本篇 應用在 kaffe 這個開放原始碼計劃的 JVM 上所支援的功能及在手機嵌入式系 統環境上硬體的限制,本篇實作採用 Java Abstract Window Toolkit (AWT) 的 類別函式庫而不是 Java Swing 的類別函式庫。 Configuration 及 Profile 定義的範圍,因而造成許多限制。另外,由於 kaffe 是一個開放原始碼的計劃,將 kaffe 移植到嵌入式的環境中可以把不需要的功 能加以移除,使得資源能更有效的利用。

4-2 使用者管理員 (UIM) 實作

UIM 的實作主要包含三個部份:各種畫面的類別建構子 (constructor) 及 相關的類別方法函式 (method),介面描述語的剖析器 (parser),及鍵按處理程 式 (key listener)。

在第三章系統設計中提到,由於手機是一個特定目的的應用環境,所以我們

將可能運用範圍的畫面分為三種:第一種是圖片的畫面,畫面最主要是顯示各種 圖形;第二種是文字的畫面,畫面最主要是呈現各種跟文字相關的訊息;第三種 是有選項的畫面,畫面最主要是有多個選項讓使用者來選取。我們分別將這幾種 定義成相關的類別 ImagePanel,ListPanel 及 TextPanel,這些類別的主體就是 Java AWT 的元件。實作時,這三種類別各自繼承 AWT 的 Panel 元件,在 ListPanel 內定義 AWT 的 List 元件,在 TextPanel 內定義 AWT 的 TextArea 元件,及在 ImagePanel 內定義 Image 的元件。顯示出的畫面如圖 13。

ListPanel TextPanel ImagePanel 圖 13:三種類別的畫面

另外還定義了繼承 Java Canvas 的 Icon 類別,作為在選單畫面中的選項的小 圖示,如圖 14。

圖 14:包含 9 個 Icon 類別的畫面

在類別方法函式部份,最主要的就是如何在整個樹狀結構的連結中找出相對

應的畫面。我們利用 Java AWT 元件中繼承自 Component 的類別方法函式 setName() 和 getName(),設定及取得定義出的物件名稱。再利用 Java LayoutManger 將指定的物件顯示出來。

介面描述語的剖析器部份,程式載入介面描述檔後,剖析器根據介面描述語 法定義的相關標籤,呼叫相關的建構子建構出相關的類別,並依據標籤語法定義 的參數意義,建構出整個樹狀結構。例如:

<menu name="PhoneMenu" type="LIST_PANEL" listItems="3" previous="MainMenu">

剖析器即根據 LIST_PANEL 型態,呼叫 ListPanel 的建構子,並設定相關的類 別方法函式,建構出名為 PhoneMenu,前一個畫面為 MainMenu 且包含 3 個選 項的畫面。

手機目前是一個以按鈕操作的使用環境,所以我們利用 Java AWT 所提供的 KeyListener 來擷取任何對鍵盤按鈕的動作。其中最主要的就是 AWT 元件在事 件驅動或是事件轉移時,由於在我們定義的類別物件中的主體是各類別的 AWT 元件,如 ListPanel 中的 List,而不是 ListPanel 本身,所以 UIM 在處理事 件轉移時必需將元件的焦點設定為各類別的 AWT 元件。

UIM 程式的整個執行流程如圖 15 所示。

圖 15:UIM 執行流程

目前整個系統的模擬環境平台是將 kaffe 安裝在 Linux 。圖 16 為程式執 行在主選單畫面的情形。

圖 16:程式執行的情形

4-3 介面描述語編輯器實作

本篇提出的介面描述語法是利用 XML 的標籤 (tag) 方式,基本上這是一個 文字檔,所以可以利用任何文字編輯器來編輯。但是由於一些標籤定義上的參數

過於繁瑣,在編輯上可能產生錯誤或是不便,所以我們另外實作了關於本篇定義 的介面描述語法的編輯器。

介面描述檔和程式本身的執行是獨立分開,不受限於 kaffe 支援的功能,

所以我們利用 Java 提供功能較強大的 Swing 類別函式庫來實作。在第三章系 統設計-介面描語設計的部份中,我們提到整個介面描述語是以樹狀結構將所有 的畫面連結起來,所以我們利用 Java Swing 提供的 JTree 類別來實作介描述 語編輯器。JTree 的相關類別中,提供了 insertNodeInto() 、removeNodeFrom() 等類別方法函式讓程式開發者可以方便的在設定的 JTree 中增加或移除任何節 點。

在實作上,對於任何要增加節點的動作,我們提供了在介面描語上所定義的 畫面型態,而根據不同的畫面型態在增加的節點上會顯示出不同型態所需要的必 要參數,讓使用者變更設定。最後,則根據使用者所設定的各個節點型態及相關 的參數設定,輸出成所設計的介面描述檔。圖 17 顯示出介面描述編輯器的執行 情形。

圖 17:介面描述編輯器的執行

4-4 範例

在本節中,我們呈現出幾種不同風格顯示的手機操作環境。強調出只需透過 不同的介面描述檔,就能讓手機的操作環境呈現出不一樣的感覺,甚至透過 JVM 跨平台的特性,也能讓不同的手機硬體平台呈現出相同類似的操作介面,表達出 本篇所提的概念。

相較於目前的手機設計所能變換的只是背景顏色或是背景圖片,本篇所提出 的方法可以改變介面的呈現方式為純文字選項或是圖形選項,也可以將手機選項 的小圖示更改成不同的樣式,這樣的做法所表現出的就是讓使用者能自由的將手 機的操作環境更改成自己喜歡的風格樣式,達到徹底的個人風格化,而不只是受 限於手機廠商所設計成的樣子。

法呈現出圖形化的介面,假設現在有的使用者對於目前以圖形化顯示的手機感到 過於雜亂,只想以簡單的介面來使用手機,就可以將整個操作環境變更成這樣的 純文字風格,又可以使用現在手機所有硬體支援的功能。

圖 18:純文字風格的手機操作環境

範例 2 呈現的是目前手機常見的圖形化操作環境。手機中的主選單是以各種 小圖示來做為各個選項的呈現,讓使用者選取;而在子選單中另外以條列式方式 來顯示。

圖 19:目前手機常見的圖形化操作環境

範例 3 希望呈現的是手機的造型設計和內容風格一致的樣式。假設我們有一

款外型線條分明、外觀樣式簡單的手機造型,搭配著內容風格是以簡單線條為主 的圖式選項,呈現出“內”“外”一致的感覺。甚至可將內容的顯示文字替代成 與風格相符的有意義文字而不是傳統手機上使用的”電話簿””訊息選單”等 等,讓整個手機呈現出完全的個人化風格。

圖 20:風格一致的手機設計

圖 21 展示的是 siemens Xelibri 系列,幾款造型較為特殊的手機。像這樣 新穎的外觀設計樣式,改變傳統原來使用者對手機的想像,若只是以傳統手機的 內容方式來做為搭配,實際上對追求個人化與眾不同風格的使用者來說,效果上 就無法突顯。若能改以相配外觀造型的使用者操作介面,甚到能讓使用者自己設 計需要的介面環境,這樣就更符合使用者的需求。

圖 21:幾款 siemens Xelibri 系列手機 (來源:www.xelibri.com)

境中,對於代表選項的小圖示最為醒目,但除了這些小圖示之外,文字性的描述 也十分重要。對於一個我們所認定的風格化設計內容需要包括小圖示的顯示搭配 著相對應的文字性描述。舉一個慣用的例子來說明:在現在的手機上,對於一個

電話的圖示 ,常代表著與電話相關的文字描述,如”電話簿”或是”通話 紀錄”等。任何人一看到這樣的圖示選項,大概都不會會錯意,我們稱這種為電 信風格。而相較於這種原來在手機上使用的電信風格,如果我們嘗試著發展另一 種在手機環境上的風格介面,除了必需考慮到相對應的意義之外,還需要顧及到 這樣的描述所代表的後設語言是否充份的表達出原來的意思。圖 22 的範例呈現 的是我們嘗試發展的音樂風格選單。舉例來說,相對於一般在手機上使用 ”通 話記錄”來表示,我們以”時間表” 來代表同樣的概念。

圖 22:音樂風格選單範例

在文檔中 風格化使用者介面 (頁 27-36)

相關文件