PUML 所含有的 elements

由於要滿足PUML 所必須具備的其中一個特性：element名稱，跟相對應的 各種行動執行環境中的目標程式語言的關係，必須盡量減低。所以要從另一 個角度來思考element 的名稱，這個名稱要夠抽象，必須不同於各個具體的 目標程式語言中，所使用的使用者介面元件的名稱，但也要能充分地表達出

所要表達的使用者介面元件。而這些PUML 的 element 必須也要能夠對應回 各種目標程式語言的使用者介面元件。

所以，設計 PUML 的 element 的方法是：(1)整理出各種可以在行動執行環 境中執行的程式語言(WAP、Personal Java、J2ME、CLI)的共同使用者介面 元件 (2)將這些共同的使用者介面元件加以抽象化(abstraction)，成為 PUML 的elements。

首先，我們粹取出的共同使用者介面元件有：UI container、image、label、

text field、choice group(or list)以及跟事件觸發相關的 button 或 command。再 來便是將這些共同的使用者介面元件加以抽象化，我們將這個抽象化的過程 對應到現實生活中的情況：

在很多家庭裡，冰箱門上總是貼了許許多多的便利貼(例如：3M Post-it)，或 是用磁鐵吸附了各式各樣的照片或是便條紙。也就是說，冰箱門相當於家裡 的小小公佈欄，公佈欄上說明了要做的事或是提醒某件事記得去做……等 等，造成了家人之間彼此間的互動。若是把使用者介面的描述，引進公佈欄 的 概 念 的 話 ， 將 會 是 什 麼 情 形 呢 ？ 公 佈 欄 的 那 塊 板 子 便 相 當 於 UI container ， 我 們 可 以 在 上 面 黏 貼 標 籤 (label) ， 便 條 紙 (text note) 或 照 片 (picture)，也可以釘上勾選單(check list paper)。這些黏貼上去的便條紙、照 片、勾選單所形成的，便相當於使用者介面元件的排版。如此，使用者介面 元件的抽象化便完成了。

在PUML 中，由以上抽象化過程而來的 elements 有：<board>、<picture>、

<label>、<textnote>、<listpaper>以及<item>。這些 element 代表的義意簡單 說明如下：

„ <board> Æ 相對應於公佈欄，即 UI container

„ <picture> Æ 相對應於公佈欄上的照片，即圖檔，image

„ <label> Æ 相對應於公佈欄上的標籤，即文字(唯讀)

„ <textnote> Æ 相對應於公佈欄上的便條紙，即 text filed (可編輯)

„ <listpaper> Æ 相對應於公佈欄上的勾選單，即 choice group

„ <item> Æ 相對應於勾選單上的選項，即 choice group 的 選項

除了以上基本的 elements 之外，在 PUML 中也有用來描述跟使用者介面相 關額外訊息的 elements，例如：<user-interface>、<layout>，以及在 PUML 中，所會使用到和邏輯運算相關的elements，例如：<logic-objects>、<object>。

以及跟事件觸發相關的elements，例如：<action>、<use-object>、<param>、

<change>、<nextboard>。詳細的 elements 說明請參考表 4-3。

[表 4-3 PUML 所有 elements 的說明]

Element Description

Core UI Related Elements

<user-interface> 每 一 份 PUML 文 件 的 root element (document element)，說明這是一份描 述使用者介面(user interface)的 PUML 文件。

<layout> PUML document 的 metadata，說明在 同 一 份 PUML document 中 的 所 有

<board>s 要如何做排版。用於以後做 適性化(adaptation)之用，現階段並沒有 任何作用。

<board> PUML 中核心的 element，代表最基本 的UI container 單位。

<picture> 用來表示要在使用者介面上，顯示圖片 的 element。相當於 window 視窗上的 Image。

<label> 用來表示要在使用者介面上，顯示文字 的 element。相當於 window 視窗上的 Label。

<textnote> 用來表示要在使用者介面上，顯示單行 文字輸入欄的element。相當於 window 視窗上的TextField。

<listpaper> 用來表示要在使用者介面上，顯示勾選 列表的 element。相當於 window 視窗 上的Choice Group 或 Choice List。

<item> 用來表示在使用者介面上，顯示勾選列 表中選項的element。

Logic Object Related Elements

<logic-objects> <logic-objects>的 element content，是用 來宣告在 PUML 中所要使用的邏輯物 件(logic object)。依照宣告方式不同，

邏 輯 物 件 有 全 域 性 和 區 域 性 兩 種 (global logic object 和 local logic object)。child element 只有<object>一

種。

<object> 用來指定所要使用的logic object(即是 由 PGML 所描述出來的邏輯物件)。

parent element 為<logic-objects>。

Event Driven Related Elements

<action> 有 三 種 類 型 的 child elements ：

<use-object>、<change>、<nextboard>。

在<action>的 element content 中，三種 類型的 child element 可依照所需要的 邏輯運算處理，或是使用者介面瀏覽的 進行方式來做搭配使用。

<action>這個 element，是將 PUML 和 PGML 連結起來的橋樑。將所有的邏 輯運算，透過<use-object>和<param>，

交給PGML 中的 method 來做。在使用 者介面上的顯示方式，多以 Button 或 Command 的形態出現。

<use-object> 用來表示所要使用的logic object，並可 指 定 要 用 該 logic object 的 哪 個 method。

可 有 兩 種 parent element 的 可 能 ：

<action>或<change>。

<param> 用 來 表 示 邏 輯 運 算 時 ， 所 呼 叫 的 method 所需要的參數。邏輯運算的實 體定義在相對應的PGML 文件中。

<change> 用 來 更 改 使 用 者 介 面 元 件 (UI component)狀態的 element。例如：更 改呈現在螢幕上的字串值

<nextboard> 用來表示在 PUML 中，boards 彼此之 間的連結關係。以這個element 來達成 使用者介面切換的功能。

4.3.4 PUML 範例