TangramMini 組件應用教程（一）：快速入門與框架設計

TangramMini 是 Tangram 團隊從成熟框架產品中萃取的輕量級版本，非商業免費、商業認證可用，功能強大，專為軟體框架設計、B/S 與 C/S 無縫整合及快速二次開發而生。組件包含兩大核心 COM 組件：

• TangramMiniCtrl (ActiveX Control)：建立軟體框架主體
• TangramMiniB2C：實現 B/S 與 C/S 無縫連接，並輔助創建 TangramMiniCtrl

官網下載：https://www.tangrammini.com。安裝包附贈 XTML Designer 視覺化設計工具、完整幫助文檔與範例原始碼。

教程規劃

本系列先講解 TangramMiniCtrl 基礎應用，後續進階教程將介紹 TangramMiniB2C 實現 B/S 與 C/S 混合開發。

第一步：設計 XTML 框架文件

1. 建立分頁結構

1. 啟動 XTML Designer，新建空白文檔（選 Normal 模板）
2. 右鍵空白區 → Tab Window Frame…
3. Type 選 tangramexceltabwnd，輸入頁面名稱與標題，點 Insert → OK
4. 完成兩個主頁建立

2. 設計第一頁分割佈局

1. 右鍵第一頁空白區 → Splitter Window Frame…
2. 輸入 1 Rows, 2 Cols → 確定，形成左右兩區
3. 右鍵右側區域 → 再次選擇 Splitter，輸入 2 Rows, 1 Cols → 確定
4. 最終形成：左側一大區，右側上下兩小區（共三區）

3. 儲存 XTML 文件

選 File → Save，存為 test.xtml。此為 XML 格式描述文件，可用記事本查看/修改。假設存放於 d:\test.xtml，後續程式即可載入重現此框架。

第二步：VC++ 專案整合框架

1. 建立 MFC 對話框專案

• VC++ 6.0 → File → New → MFC AppWizard (exe)
• 專案名 Tutorial1，選 Dialog based 類型

2. 引入 TangramMiniCtrl ActiveX 控件

1. 刪除主對話框多餘靜態文字
2. Project → Add To Project → Components and Controls…
3. 選 Registered ActiveX Controls → TangramMiniCtrl Class → Insert
4. 確認生成 CTangramMiniCtrl、CTangramObjectInfo 兩個類別
5. 工具箱新增 TangramMiniCtrl 控件，拖曳至主對話框

3. 程式碼載入框架

• ClassWizard 為控件添加控制變數 m_wndMiniCtrl (型別 CTangramMiniCtrl)
• 在 OnInitDialog() 中加入：

m_wndMiniCtrl.LoadFile(_T("d:\\test.xtml"));

關鍵 API 說明

技巧：將 test.xtml 複製至 EXE 同目錄（如 Debug 資料夾），即可用相對路徑 LoadFile(_T("test.xtml"))，部署更靈活。

下一步預告

下一篇將詳細講解如何在已建立的框架節點中安裝自定義控件（List、Tree、Edit 等），實現真正的功能性介面構建。敬請期待！