在前面章節中我們曾提到，xDIVA 希望透過合成性(composability)去克服有 限的 VM 卻能對映到任意的資料結構的難題。透過 Mapping Dialog，雖然我們可 以將數個 mapping node 組合起來去視覺化資料結構中的變數，不過這個過程卻 缺乏了重用以及組織性(compositionality)，這裡的組織性指的是能將 VM 與資料 間的對映關係封裝進一個新的 mapping node 中的能力，而這個新的 mapping node 就像是一個新的 composite VM，要可被重複使用去對映不同的資料結構，或是 再與其他 mapping node 組合出更複雜的 composite VM。
為了達成這個目標，xDIVA 提供了另一個 GUI 介面—Composer Dialog，這 部分的實做主要是由去年畢業的學長所完成。使用者只要在 DIVA 主視窗中按下
右下角的”NewVM”按鈕，就會跳出如圖 26 的 Composer Dialog。這個介面與
Mapping Dialog 十分類似，不過仔細看紅色圈圈框起來的部分，就可以發現它的 主要編輯視窗部分多了一個黑色框框的邊界，這個改變主要是為了搭配一種新型 態的 IN port 稱為”gate”。gate 在左邊的分類視窗歸類為 composite_tools，顧名思 義就是為了組合 composite VM 所特別設計的元件，而依據變數資料型態的不同，
則有不同對映的 gate，如圖 26 左邊紅色圈圈的部分。簡單來說，邊界所扮演的 角色就類似程式語言中函數的範圍(function scope)，而 gate 就像是函數所提供的 輸入參數。
圖 26 Composer Dialog
舉例來說，如果我們今天想畫出像圖 27 一樣的箭頭，我們會用一個圓的角 錐體(pyramid)再搭配上一個圓柱體(cylinder)去組合，組合的方式如圖 28 所示，
參數部分只要將角錐體的邊數設為 100 成為一個圓錐體，然後將它的位置移動 到圓柱體上方即可。這個例子中我們使用到一個特殊的 mapping node 叫做
wrapper_ubvm，它的功能類似 container_ubvm，是將多個 VM 收集起來，不過透 過 wrapper_ubvm 所合成的 VM，將變成一個獨立的個體，內部的子 VM 將不再 接收外部的參數去改變形體，也無法與外界做互動。經由 Composer Dialog 所組 合出 mapping node 就如同一個基本的 UBVM，只能透過基本屬性(default
properties)去控制，所以我們會將所有基本屬性對映到一組相同型態的 gate port，
為了節省操作時間，我們可利用圖 29 編輯視窗下方提供的”Default Gates”按鈕自 動幫我們新增一組 gate port。當我們設定好對映關係後，只要如圖 29 輸入新
VM 的名字，以及在 Type 的空格輸入這個 VM 應該歸類為哪一類型的 VM，再 按下”SAVE AS”按鈕，就大功告成了。當我們再次開啟 Mapping Dialog，就可在 左邊的分類子視窗中，找到我們新增加的 mapping node。
圖 27 由 pyramid 及 cylinder UBVM 所組合的 arrow VM
圖 28 在 Composer Dialog 中用 pyramid 及 cylinder UBVM 組出 arrow VM
圖 29 Composer Dialog 中的參數設定
Composer Dialog 不僅可以組合 VM，對於重用性高的複雜數學運算，我們 也可透過它去組合出新的 Math mapping node，之後就可直接使用，不用重複去 設定這些複雜的算式。Composer Dialog 的出現，解決了視覺化複雜資料結構時 所可能產生的大量 mapping nodes 會造成使用者在做資料對映時的困難，也讓
VM 與資料的對映方式變的更多元化，我們以圖 30 二元樹的例子來做說明。
一般我們要視覺化一個二元樹，我們設定資料與 VM 的對映方式可能會如圖
31 的架構一樣，使用一個圓球 UBVM 來表示布林值，底下接兩個 UBRVM 叫 做”Ball laser”分別指向它的左右子樹。而左右子樹所排列的位置，是透過圓球
UBVM 的位置計算而得，在圖 31 中並未顯示出來。這樣的對映方式對於這個
例子來說看起來並沒有什麼問題，不過仔細觀察，就可發現它的重用性很差。
今天如果使用者不想用圓球來代表布林值，或是想換成別的 UBRVM 來代表左 右子樹的指標時，整個對映方式就必須由使用者重新設定，十分浪費時間，因 為其實計算位置的邏輯部分都相同。有沒有什麼好的解決辦法呢？在上一章中 我們曾提到的 VMclone mapping node，這時就派上用場了。
圖 30 二元樹在 DIVA 中的視覺化
圖 31 二元樹中資料與 VM 的對映關係
如果我們在 Composer Dialog 中使用了 VMclone mapping node 來當作二元樹 中計算左右子樹位置的邏輯部分，會如圖 32 所示。左邊的 gate port 傳入三個型 態為”vm”的變數，而右上角虛線的部分是一組 Math mapping nodes，負責依據
vm key 的位置算出左右子樹的 VM 所要擺放的位置。VMclone mapping node 會 將所傳入 VM 的所有基本屬性都傳遞進來，而將變數連結至 VMclone mapping
node 的效果也等同於連結到原始的 mapping node。經由圖 32 所組合出的新 mapping node，將取代圖 31 中 vm_collector 以及 Container_ubvm 的功能，而且 還兼具計算左右子樹位置的功能，而傳入的三個 VM 使用者可以自行替換成合 適的 UBVM 與 UBRVM。由此可知，mapping node 的重用性如何，取決於使用 者組合 VM 的方法，如何創造重用性最佳的 mapping node，則考驗著使用者的
智慧。
圖 32 使用 VMclone mapping node 去計算二元樹中左右子樹的位置