視覺化語言元件之示意圖

接著我們將介紹視覺化語言元件之示意圖，一個視覺化語言元件除了 元件本身所具備的功能和屬性外，還需要與其他元件做溝通，因此我們設 計了四類的接腳，用來和不同的元件做溝通，如下圖(圖 8)所示：

圖 8 視覺化語言元件示意圖

1. Start trigger：只能夠和滑鼠事件面板中之 Start 演員做連接，

在產生程式碼階段時，將以和 Start 演員連接的順序來依次產生 對應的程式碼。

2. Input plug：此類接腳只能和 output plug 相連接。流程元件及 動作元件之 input plug 是用來接收傳入之元件；而基本元件及擴 充元件是用來接收要觸發之行為。

3. Output plug：只能和 input plug 相連接。

(1) 流程元件之 output plug：流程元件之 output plug 有兩個，

在上面的表示當流程元件內之判斷為真時要觸發之行為，而 下面的即表示判斷為否定時要觸發之行為。用來連接基本元 件、擴充元件及動作元件，當直接連接動作元件時，即表示 與其 input plug 相連之元件在經由流程判斷後所觸發之行 為；而當於基本元件或擴充元件相連時，即表示在經由流程 判斷後，與其連接之特定元件所觸發之行為。

(2) 群組元件之 output plug：這兩種元件的 output plug 只有一 個，是用來傳遞自己的演員型態及資料。

4. Function switch：只有流程元件及動作元件具備此種接腳，此接 腳只和功能選擇元件相連接，透過不同的功能選擇元件來傳遞不 Start trigger 接腳。

2. 藉由 Start 演員之 Start trigger 接腳順序來控制程式碼產生之 順序，由上而下產生。

3. 在一段視覺程式的敘述中，一定只有一個流程元件或動作元件之 start trigger 接腳和 Start 演員相連接。

4. 基本演員及擴充演員要先設定群組後，才能在其他滑鼠事件編輯 面板(pressPane、dragPane、releasePane、clickpane)中使用。

下圖(圖 9)中，畫面最左方的長條矩形即 Start 演員，而程式碼產生 之順序即是 start trigger 由上到下的順序。藍色圈圈表示對應關係之接 腳相連，Start 演員及 Highlight 演員之 start trigger 相連接。

下圖(圖 10)為一段簡單之視覺化程式，程式所表示的行為是當群組之 演員被 press 時會觸發 highlight 的行為。用此範例說明規則 3：在一段 視覺程式的敘述中，一定只有一個流程元件或動作元件之 start trigger 接腳和 Start 演員相連接。。

下圖(圖 11)中之紅色圈圈即為圖片演員正在設定群組，而藍色圈圈 即是設定完群組後，外圍會有不同的顏色 highlight。

下圖(圖 12)中紅色圈圈即為對應圖 10 的 layoutPane 演員群組設定，

相對應之群組演員會出現在滑鼠事件編輯面板中。由圖 10、圖 11 表示規 則 4：基本演員及擴充演員要先設定群組後，才能在其他滑鼠事件編輯面 板(pressPane、dragPane、releasePane、clickpane)中使用。

圖 9 對應之接腳相連

圖 10 規則 3 之範例

圖 11 layoutPane 對演員設定群組

圖 12 對應 layoutPane 所設定之群組元件

在本節的最後，我們以實際例子來說明本視覺化語言之表示方式，下 圖中(圖 13)，視覺化語言是將一個「消失」動作元件連接到 Start actor 的第一個接腳，表示在產生程式碼時這段程式會先產生；而群組演員連接 到消失元件的 input 接腳是將該群組之演員設定消失的動作，至於動作觸 發的時機則是由上方滑鼠事件編輯面板來決定，本例中是當群組演員被點 擊(click)後就會消失在畫面中。

圖 13 視覺化語言之實例說明