關於Tangram的可視化設計支援

 

關於 Tangram 的可視化設計支援         Tangram開源版本是Tangram系列中“最小”的版本，在這個版本中包含了Tangram的最基本的功能點，即軟體UI架構的可視化設計。通常，軟體開發人員都是通過Coding的方式進行軟體的架構設計，給定一個如下的UI架構：大多數開發人員會如何處理？許多開發人員會分析，這個架構表單包含幾個“分頁表單”、“Splitter表單”，對應分頁表單如何?，架構表單對應的C++類如何設計，命名幾個變數，等等，如上顯示的架構，如果基於代碼開發的角度考慮，通常的開發人員很難獨立勝任，如果我們看一個更加複雜的UI架構：開發人員會如何構思呢？如果完全依賴Coding技術，那麼UI架構的“形態”就會形成一種“羈絆”，這種“羈絆”通常是對軟體整體“無用”的，但卻耗盡一個架構設計的相當一部分工作量，因此，一種靈活的“所見即所得 (WYSIWYG)”的設計方式就變得十分重要了。         我們看看Tangram如何解決這類問題，實現我們從一個空白的主架構開始。你要進行的第一步是，建立一個目錄“testTangram”，將你的Tangram exe檔案複製到這個目錄，然後啟動這個exe檔案，此時我們得到一個“空白”的架構：在架構表單的“客戶區”中點擊滑鼠右鍵，會顯示一個“設計”菜單：

1

為了得到我們最初顯示的架構表單，選擇“TabbedWnd…”，得到一個對話方塊：從中選擇“tangramtabwnd”類型，有多種Tabbed風格可以選擇，Tabbed風格表單組件在Tangram中以“外掛程式”的方式體現，可以提供任意多種類型，在Tangram商業版本中將提供一組高品質的“Tabbed”表單外掛程式，按“OK”後，會出現：輸入Page Title後我們得到：在Page1的頁面區按滑鼠右鍵，得到如下對話方塊：這樣我們得到：在Splitter右側的地區內，按以上介紹的方式插入一個“Excel”風格的Tabbed表單，得到：選擇“Excel MDI Page”，然後在這頁內右擊滑鼠，在設計菜單中選擇“MDI Client…”

1

這樣，得到對話方塊：如果你打算增加一個“控制條”，輸入標題後按“Create CtrlBar”，如果要增加一個“MDI”客戶區，按“Create MDI Client”，這樣我們得到如下架構：。關閉這個表單，再運行目錄“testTangram”中的exe檔案，我們得到：。我們看看得到什麼了？！在檔案菜單中選擇“New”

1

可以彈出對話方塊：這裡列舉了Tangram預設提供的“Document”模板，你可以增加任意多自己的模板。選擇其中的幾個，即可得到：我們從以上過程中可以看出Tangram“獨特”的多文檔結構，這種結構可以靈活的定位於一個架構中的特定位置，甚至可以定位在一個Tabbed分頁之中。         Tangram子文檔的設計，與主架構設計完全一致，如果你有預先設計好的UI架構，可以將其“靈活的”“匯入”另外一個UI架構的內部，

1

我們可以將一個“架構”插入到另外一個架構的“內部”，選擇菜單“Insert From XTML File…”，這裡，xtml檔案是你儲存的一個Tangram文檔，這個功能將實現一個文檔架構結構的“提取”，然後“插入”到你當前設計的“地區”：選擇檔案“xxxx”，然後按“開啟”，我們看到：注意設計前、後的對比產生的變化，按這樣的方式，你可以架構十分綜合的UI架構，這種架構，將被儲存為副檔名為“xtml”的XML檔案，這種檔案是Tangram系統的關鍵對象。建議大家用一個文字編輯器開啟一個xtml檔案，看看裡面的描述，每個Tangram exe檔案的形態，是由一個副檔名為”.Config”的XML檔案決定的，在Tangram中，如果設計的是主架構，將生產一個Config檔案，這個檔案的命名規則是：“AppName.exe.config”，其中AppName是可執行檔名，你可以將你的Tangram Exe檔案重新命名，然後按如上的方式設計其主架構UI，以及子文檔UI。 MDI 客戶區的定製 可以在Tangram exe所在的目錄中建立一個子目錄“Tangram/Background”，在“Background”中創html檔案，然後開啟應用程式的Config檔案，我們會看到如下資訊：         <Caption>Welcome To Tangram World!</Caption>         <WorkSpaceRunModel=""></WorkSpace>         <BackgroundType="html">background.htm</Background>         <RegistryKey="TangramDesigner"StdProfileSettings="4"></Registry>         <Skin>Merlin ENI/Merlin ENI.uis</Skin>         <VBAComponent>DocVbaServer.VbaServer.1</VBAComponent>         <MDITabbedClientTag="">TangramMDIEx.MDIClientImpl.1</MDITabbedClient>         <TangramToolBarID>TangramBarManager.BarManager.1</TangramToolBarID>         <TangramControlBarID>TangramLiteControlBarD.TangramLiteBar.1</TangramControlBarID>在這裡你可以修改主架構的可見“資訊”，指定MDI背景的方法是在節點<BackgroundType="html">background.htm</Background>中指定html檔案，這個檔案必須在“Tangram/Background”目錄中。效果如下：你可以製作自己的個人化背景地區以增加軟體的感染力。Tangram的其他技術資訊，例如，如何形成定製化的“文件範本”、VBA整合等等，我們會在以後的文章中陸續介紹，