SYGUI 是以功能擴充為核心的 MFC 介面庫。本文示範利用 SYGUI 4.0 新功能實作類似 Windows Media Player 的介面定制:不修改程式碼即可為程式設計多種外觀風格,並支援執行期動態切換。範例程式包含三種截然不同的介面:

圖 1:範例程式三種介面風格
SYGUI 4.0 透過「介面設計與程式功能分離」實現定制,開發流程包含:
SYGUI 4.0 幾乎隱藏所有細節,開發者只需:
CMainFrame::OnCreate)// 建立各種介面物件...
m_seek.SetID(ID_SLIDER_SEEK);
m_wndPlayList.Create(WS_CHILD|WS_VISIBLE|LBS_NOINTEGRALHEIGHT, CRect(0,0,0,0), this, 0);
m_wndPlayList.SetFont(g_pFontMgr->GetFont(FONT_MENU));
m_wndPlayList.SetBkColor(RGB(0,0,0));
m_wndPlayList.AddString(_T("測試.wam"));
// 輸出視窗物件
g_pNRWMgr->ExportWnd(1, &m_wndPlayList, _T("WND_PLAYLIST"));
g_pNRWMgr->ExportWnd(2, &m_cbPlayList, _T("COMBOBOX_PLAYLIST"));
// 輸出 SYITEM 物件
g_pNRWMgr->ExportItem(0, &m_seek, _T("SLIDER_SEEK"));
...
g_pNRWMgr->ExportItem(23, &m_playIcon, _T("PLAY_ICON"));
// 輸出命令
g_pNRWMgr->ExportCommand(ID_PLAY, _T("ID_PLAY"));
...
g_pNRWMgr->ExportCommand(ID_THEME, _T("ID_THEME"));
// 輸出文字
g_pNRWMgr->ExportText(PLAY_TIME_TEXT, _T("PLAY_TIME_TEXT"));
g_pNRWMgr->ExportText(PLAY_INFO_TEXT, _T("PLAY_INFO_TEXT"));
g_pNRWMgr->ExportText(MEDIA_INFO_TEXT, _T("MEDIA_INFO_TEXT"));
g_pNRWMgr->ExportText(SPEAKER_NAME, _T("SPEAKER_NAME"));
g_pNRWMgr->ExportText(EQPRESET_NAME, _T("EQPRESET_NAME"));
// 輸出選單資源
g_pNRWMgr->ExportMenu(IDR_MAINFRAME, _T("IDR_MAINFRAME"));
// 輸出狀態
g_pNRWMgr->ExportState(PLAY_STATE, _T("PLAY_STATE"), 0, 255);
// 建立不規則視窗樣板 (產生後請註解或刪除此行)
// g_pNRWMgr->CreateTemplate(_T("d:\\test.tpl"));
// 設定文字與狀態初值
g_pNRWMgr->SetText(EQPRESET_NAME, _eq_preset_name[m_nEQPreset]);
g_pNRWMgr->SetText(SPEAKER_NAME, _speaker_name[m_nSpeaker]);
g_pNRWMgr->SetText(MEDIA_INFO_TEXT, _T("歌曲:測試 藝術家:未知 唱片集:測試"));
g_pNRWMgr->SetText(PLAY_INFO_TEXT, m_wndPlayList.GetCount() > 0 ? _T("準備就緒") : _T(""));
g_pNRWMgr->SetState(PLAY_STATE, 0);
// 恢復版面配置
CString strLayout = g_strPath + _T("\\Layout\\WMPlayer.lyt");
g_pThemeMgr->LoadLayout(strLayout);
// 載入外觀風格檔
CString strTheme;
g_pThemeMgr->GetLastThemeFile(strTheme);
if (!strTheme.IsEmpty()) g_pThemeMgr->LoadTheme(strTheme);
g_pNRWMgr 為 SYGUI 初始化時自動建立的全域變數,管理不規則視窗;g_pThemeMgr 管理外觀風格檔。所有輸出函數最後一個參數為物件別名,供設計人員選取對應物件。
下載範例原始碼,執行 Designer\Designer.exe 並開啟 Theme\MediaPlayer_Gold.ss。在左側面板選擇 [不規則視窗] → [NRW0],右鍵選 編輯 進入設計工具:

圖 2:不規則視窗設計工具介面
Gold 介面僅含一個不規則視窗,內含 6 個層。限於篇幅略述關鍵操作:
不規則視窗樣板 節點 → 匯入樣板 選擇 .tpl 檔。不規則視窗 節點 → 插入,填入參數 (初始大小即設計工作區大小)。編輯 進入設計介面。建立層 按鈕,填入參數確定,新層進入編輯狀態。加入介面物件 下拉選單選類型,填入屬性確定,拖曳調整位置。SYGUI 4.0 介面定制功能徹底分離功能實現與介面設計,最大程度減輕開發人員介面工作量,專注核心邏輯,提升開發效率與代碼品質;同時讓軟體商輕鬆為不同用戶群設計個性化介面,提高滿意度與吸引力。媒體播放器、網路視訊應用等極適合此功能。更多功能請訪問 www.sygui.com。