首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> C語言 >> VC >> 關於VC++

Windows Media Player 風格介面實作 — SYGUI 介面庫應用實戰

     編輯:關於VC++

一、簡介

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

三種介面風格

圖 1:範例程式三種介面風格

SYGUI 4.0 透過「介面設計與程式功能分離」實現定制,開發流程包含:

  1. 開發人員為程式加入介面定制功能 (輸出介面物件、建立樣板)
  2. 介面設計人員 (可為開發者或終端用戶) 設計各種風格介面

二、為程式加入介面定制功能

SYGUI 4.0 幾乎隱藏所有細節,開發者只需:

  1. 確定程式輸出的介面物件
  2. 建立不規則視窗樣板檔

可輸出的介面物件類型

  • 視窗控制項 (任意類型:下拉清單、列表方塊等)
  • SYItem 物件 (庫提供的非視窗控制項:進度條、捲軸等)
  • 命令 (程式實作的命令,對應定制介面按鈕)
  • 選單資源 (用於選單列或按鈕下拉選單)
  • 文字物件 (介面顯示文字)
  • 狀態物件 (介面設計時可選的控制變數)

實際程式碼範例 (節錄自 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 管理外觀風格檔。所有輸出函數最後一個參數為物件別名,供設計人員選取對應物件。

三、介面設計流程

核心概念

  • 不規則視窗:具定制功能的程式介面由一或多個不規則視窗組成,數量由設計者決定。
  • 層:每個不規則視窗含一或多層,每層可有不同形狀/位置,上層覆蓋下層 (相交區域)。層有開啟/關閉兩種狀態,不同狀態位置可異但形狀固定。層上可放置程式輸出物件與 SYGUI 內建物件 (層控制按鈕、視窗關閉鈕等)。

設計步驟

  1. 確定不規則視窗個數
  2. 確定每視窗層數、形狀、位置
  3. 將介面物件置入層適當位置
  4. 儲存為外觀風格檔

使用 SYGUI 外觀風格設計器 (所見即所得)

下載範例原始碼,執行 Designer\Designer.exe 並開啟 Theme\MediaPlayer_Gold.ss。在左側面板選擇 [不規則視窗] → [NRW0],右鍵選 編輯 進入設計工具:

不規則視窗設計工具

圖 2:不規則視窗設計工具介面

Gold 介面僅含一個不規則視窗,內含 6 個層。限於篇幅略述關鍵操作:

  • 匯入樣板:右鍵 不規則視窗樣板 節點 → 匯入樣板 選擇 .tpl 檔。
  • 建立視窗:右鍵 不規則視窗 節點 → 插入,填入參數 (初始大小即設計工作區大小)。
  • 設計視窗:選擇視窗節點右鍵 編輯 進入設計介面。
  • 建立層:工具列 建立層 按鈕,填入參數確定,新層進入編輯狀態。
  • 加入介面物件:工具列 加入介面物件 下拉選單選類型,填入屬性確定,拖曳調整位置。

四、總結

SYGUI 4.0 介面定制功能徹底分離功能實現與介面設計,最大程度減輕開發人員介面工作量,專注核心邏輯,提升開發效率與代碼品質;同時讓軟體商輕鬆為不同用戶群設計個性化介面,提高滿意度與吸引力。媒體播放器、網路視訊應用等極適合此功能。更多功能請訪問 www.sygui.com。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved