Visual C++ 2010創建Ribbon界面(上)
2009-08-19 14:22:57| 分類： VC++程序設計
雖然很多用戶還在抱怨“不習慣Ribbon界面”、“很多功能找不到位置”等等，但是，隨着微軟的“強制”推行，Ribbon界面也在越來越被人們所接受，很多應用軟件也開始採用Ribbon界面。更重要的是，在即將到來的Windows 7中，操作系統本 身更是大量地應用了Ribbon界面。不管我們願意或者不願意，Ribbon界面開始大張旗鼓地攻佔我們的軟件界面，成爲繼下拉式菜單後新的標準用戶界 面。作爲用戶，我們需要逐漸熟悉這種新的軟件用戶界面；而作爲開發者，更是需要了解和認識這種新的軟件用戶界面，新的交互方式，從而利於這種新界面的優 勢，爲用戶提供更加優秀的軟件。
“Ribbon來了！”
Windows平臺的進化，往往都伴隨着系統圖形界面的重新設計。從Windows XP到Windows Vista，最大的革新就是Windows Aero的引入。而在微軟的下一代Windows平臺Windows 7中，雖然Aero被保留下來，但是Windows 7的圖形用戶界面更多的是朝着Office 2007相同的方向前進，無論是系統自帶的工具軟件，例如畫圖、寫字板等，還是上層的第三方應用軟件，例如Office 2007、AutoCAD、SnagIt等等，都全面應用了Ribbon界面。
圖1 Windows 7中隨處可見的Ribbon界面
在傳統的軟件界面設計中，我們都是採用“文件”、“編輯”、“視圖”的菜單模式，這儼然成爲軟件界面設計的標準。但是現實的情況是，隨着軟件的功能越來越 強大，下拉菜單也隨之變得越來越長，用戶根本不清楚菜單深處到底隱藏着什麼重要的功能。這往往意味着用戶要求軟件實現的功能，其實軟件早已經具有了，只是 在菜單中隱藏得比較深，用戶沒有找到而已。越來越長的菜單的另外一個弊端是，很多常用的功能被埋沒在衆多的菜單項中，使得用戶在使用常用的功能時，還需要 進行多次菜單選擇，這無疑降低了工作效率。爲了改變這種現狀，微軟進行了大量的研究，在廣泛聽取用戶意見的基礎上，同時經過了嚴格的可用性測試，終於在 Office 2007中推出了革命性的Ribbon界面。
跟傳統的菜單式用戶界面相比較，Ribbon界面的優勢主要體現在如下幾個方面：
? 所有功能有組織地集中存放，不再需要查找級聯菜單、工具欄等等
? 更好地在每個應用程序中組織命令
? 提供足夠顯示更多命令的空間
? 豐富的命令佈局可以幫助用戶更容易地找到重要的，常用的功能
? 可以顯示圖示，對命令的效果進行預覽，例如改變文本的格式等
? 更加適合觸摸屏操作
雖然從菜單式界面到Ribbon界面有一個漫長的熟悉的過程，但是一個不爭的事實是，Ribbon界面正在被越來越多的人接受，相應的，越來越多的軟件開 發商開始拋棄傳統的菜單式界面，轉而採用Ribbon界面。Visual
Studio 2010作爲面向下一代Windows平臺的開發工具，自然是對Ribbon界面全面支持。下面我們就來看看如何利於Visual Studio 2010開發面向Windows 7的Ribbon界面。
創建MFC應用程序項目
實際上，Ribbon界面(Office 2007風格的界面)的開發早在2008年就隨着Visual C++ Feature Pack被引入到Visual Studio 2008中。在即將到來的Visual Studio 2010中，Ribbon界面的開發更是得到了原生的支持，使得Ribbon界面的開發更加簡便高效。
首先，我們啓動Visual Studio 2010，創建一個基於MFC的應用程序，項目模板我們選擇“MFC Application”：
圖2 創建MFC應用程序
在接下來的“MFC應用程序嚮導”中，我們就可以對項目的可視化風格進行選擇和配置。Visual Studio 2010支持MFC風格、標準的Windows風格，Visual Studio 2005風格和Office 2007風格。而這裏的Office 2007風格，就是我們要創建的Ribbon界面：
圖3 設置Ribbon界面風格
在接下來的嚮導頁中，我們可以選擇命令欄(工具欄。菜單欄)的樣式，這裏我們當然選擇“Use a ribbon”了。當然，爲了跟舊有的系統保持兼容，Visual Studio 2010也支持傳統的命令式界面，如果你的用戶比較保守，想繼續使用傳統的菜單式界面，我們可以選擇“Use a menu bar and toolbar”:
圖4 選擇命令欄的風格
爲了支持豐富的Office 2007界面風格，MFC默認情況下爲MFC文檔應用程序添加了類似Outlook風格的導航面板(Navigation pane)和標題條(Caption bar)。這兩者並不是我們關注的重點，爲了更好的展示Ribbon界面，我們這裏就去掉這兩個多餘的面板：
圖5 去掉多餘的界面元素
到這裏，針對新項目的設置就完成了，點擊“Finish”按鈕關閉應用程序嚮導，Visual Studio 2010就會按照我們的設置創建相應的MFC應用程序解決方案。編譯運行這個解決方案，我們就得到了第一個具有Ribbon界面的應用程序。
圖6 第一個Ribbon界面應用程序
Ribbon界面的構成
爲了支持新的界面風格的開發，MFC提供了很多新的、經過擴展過後的應用程序類，界面類等。例如在我們的實例程序中用到的 CRibbonApp，CMainFrame就是分別從CWinAppEx，CMDIFrameWndEx派生的。而CWinAppEx和 CMDIFrameWndEx又是從傳統的CWinApp和CMDIFrameWnd派生，在原有類的基礎上，添加了對新的界面風格的支持。
圖7 支持新的界面風格的框架類
熟悉MFC界面開發的朋友都知道，應用程序的CMainFrame類負責整個主框架界面的創建和管理，在傳統的菜單式界面下，它負責創建和管理菜單欄，狀態欄，工具欄等。同樣的，在Ribbon界面下，它同樣負責Ribbon界面的創建和管理。
{
DECLARE_DYNAMIC(CMainFrame)
public:
CMainFrame();
// Attributes
public:
// Operations
public:
// Overrides
public:
virtual BOOL PreCreateWindow(CREATESTRUCT& cs);
// Implementation
public:
virtual ~CMainFrame();
#ifdef _DEBUG
virtual void AssertValid() const;
virtual void Dump(CDumpContext& dc) const;
#endif
protected: // control bar embedded members
CMFCRibbonBar m_wndRibbonBar;
CMFCRibbonApplicationButton m_MainButton;
CMFCToolBarImages m_PanelImages;
CMFCRibbonStatusBar m_wndStatusBar;
// Generated message map functions
protected:
afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);
afx_msg void OnWindowManager();
afx_msg void OnApplicationLook(UINT id);
afx_msg void OnUpdateApplicationLook(CCmdUI* pCmdUI);
DECLARE_MESSAGE_MAP()
void InitializeRibbon();
};
從上面的代碼中我們可以看到，在Ribbon界面下，CMainFrame類包含了三個成員變量：m_wndRibbonBar、 m_MainButton、m_wndStatusBar，分別用於控制Ribbon界面的命令面板，應用程序按鈕和狀態欄。清楚了各個變量對應的 Ribbon界面元素後，我們就可以操作相應的成員變量，在Ribbon界面上添加我們需要的內容。
圖8 Ribbon界面的構成
處理菜單資源和消息響應函數
Ribbon界面相對於傳統的菜單式界面，最大的差別就是用新的Ribbon Bar代替了傳統的菜單欄。我們可以看到，在默認情況下，Ribbon Bar已經擁有了一個名爲“Home”的命令分組(Category)，其中又包含了多個面板(Panel)，每個面板中有一個或者多個命令按鈕 (Ribbon Button)。下面我們就來看看如何在Ribbon Bar上添加一個新的命令分組，然後在其中添加新的命令按鈕以執行相應的功能。
按照傳統的菜單式界面的開發流程，我們總是先編輯菜單資源，然後再創建相應的菜單命令消息響應函數，最後再實現這個消息響應函數，完成相應的任務。在新的 Ribbon界面中，我們還是先要按照這樣的流程，完成菜單資源的編輯，實現消息響應函數等。所以，我們先打開Visual Studio 2010的資源編輯器，在IDR_RibbonUITYPE菜單資源中添加兩個新的菜單項。
圖9 編輯菜單資源
然後，我們分別爲這兩個菜單項添加相應的消息響應函數：
圖10 添加消息響應函數
這裏，我們只是演示Ribbon界面的創建，所以我們將這兩個消息響應函數簡單地實現如下：
void CRibbonUIView::OnEditSayhello()
{
// TODO: Add your command handler code here
AfxMessageBox(_T("Hello RibbonUI!"));
}
void CRibbonUIView::OnEditSaygoodbye()
{
// TODO: Add your command handler code here
AfxMessageBox(_T("Goodbye RibbonUI!"));
}
添加Ribbon按鈕
到現在爲止，我們已經按照菜單式界面的開發流程，完成了資源的編輯和消息函數的實現。如果這時我們編譯運行解決方案，我們在程序界面上看不到任何變化，因 爲我們還沒有把這些命令綁定到Ribbon Bar的命令按鈕上。在CMainFrame類中，它提供了一個專門的函數CMainFrame::InitializeRibbon()來完成 Ribbon界面的初始化工作，所以，我們在這個函數中添加如下代碼，創建新的命令分組，然後將命令按鈕映射到我們剛剛創建的菜單項。
{
BOOL bNameValid;
///…
//////////////////////////////////////////////////////////////
// 添加一個命令分組(Category)“RibbonUI Category”
CMFCRibbonCategory *pRibbonUICategory =
m_wndRibbonBar.AddCategory(_T("RibbonUI Category"),
IDB_WRITESMALL, IDB_WRITELARGE);
// 添加一個面板(Panel)
CMFCRibbonPanel *pTestPanel = pRibbonUICategory->AddPanel(_T("RibbonUI Panel"), m_PanelImages.ExtractIcon(1));
// 在面板上添加Ribbon命令按鈕(CMFCRibbonButton)
pTestPanel->Add(new CMFCRibbonButton(ID_EDIT_SAYHELLO, _T("Say Hello"), 0, 0));
pTestPanel->Add(new CMFCRibbonButton(ID_EDIT_SAYHELLO, _T("Say Hello"), 1));
pTestPanel->Add(new CMFCRibbonButton(ID_EDIT_SAYGOODBYE, _T("Say Goodbye"), 2));
//////////////////////////////////////////////////////////////
///…
}
在這段代碼中，我們首先利用Ribbon Bar的AddCategory()函數，添加了一個新的命令分組(Category)，也就是Ribbon Bar上的一個新的標籤頁。然後，我們在這個新創建的標籤頁中，添加了一個新的面板(Panel)。最後，我們創建了三個Ribbon命令按鈕 (CMFCRibbonButton)，並將它們放置到面板中。通過指定跟菜單資源中的菜單項相同的資源ID，我們將這些Ribbon命令按鈕跟我們之前 創建的菜單項一一對應起來。當我們點擊某個Ribbon命令按鈕時，就會執行相應的菜單命令響應函數。這樣，我們就實現了菜單命令在Ribbon Bar的綁定，同時在界面上也能看到我們剛剛添加的命令按鈕了。
圖11 新創建的命令按鈕
在這裏，我們只是簡單地向大家介紹了Ribbon界面的基本概念和大致的開發流程，要想開發跟Office 2007一樣專業的Ribbon界面，我們還有很長的一段路要走，敬請關注本系列文章，創建面向Windows 7的用戶界面。