[Office開發系列] Office Backstage View 開發初體驗

[Office開發系列] Office Backstage View 開發初體驗

只要有用過 Office 2007,應該對它左上角的按鈕以及它顯示出來的 Menu 很熟悉吧:

image

這樣的介面配置方式也是 Office 2007 的一個新嘗試,它將一些檔案管理以及常用的功能整合在一個 Menu 中,同時每個 Item 都還有自己內部的可用功能與指令,並且還可以附帶操作說明,比 Office 2003 以及更早期的 Office 應用程式使用上可以更直覺:

image

現在,這個功能在 Office 2010 更擴大了,不但內建的指令可以支援,同時也開放了一個介面讓 ISV 可以在裡面加上自己的功能,可以用來作為 Office Business Application 的使用入口,就像在開始功能表中加入自己的程式捷徑一樣,這個功能區稱為 Backstage View。顧名思義,Backstage 是後台的意思,也就是說在企業應用程式中,開發人員可以利用 Office 2010 來產生如後台管理介面般的用戶端介面,並且將日常的管理功能都放到 Backstage View 中,如此使用者只要透過 Office 2010 即可操作企業應用程式 (Enterprise Application) 中的功能。

Navigation tabs

 

只是若要開發 Backstage View 的話,目前的 Visual Studio Tools for Office 2010 尚未支援視覺化的 Backstage View 的設計,只能由開發人員編寫 XML 來設計 Backstage View 的介面了。所幸 Backstage View 的 XML 結構與 Ribbon 相當,因此可以直接利用 VSTO 的 Ribbon (XML) 範本來處理。另外,只有 Add-in 才可以實作 Backstage View,因為微軟希望 Backstage View 是整個 Office 應用程式可以使用的,所以不能讓它受到文件範本的限制。

若要在特定應用程式中加入 Backstage View 的話,可以在 VSTO 中新增該應用程式的 Add-in 專案(筆者用的是 Excel Add-in):

image

接者新增一個 Ribbon (XML) 的元件,這個元件範本會建立必要的 CS 檔案以與 Office Add-in 程式關聯:

image

接著在新增的 HelloBackstageView.xml中,加入下列的 XML 內容:

image

這個XML會定義 Backstage View 的使用者介面,它也具有 Ribbon 可以自動調整大小的功能。接著再開啟 HelloBackstageView.cs 檔案,將 “Ribbon Callbacks” 展開後,加入下列的程式碼:

image

這個程式碼是對應在 XML 中所設定的 onAction 事件處理常式,在後面的文章中,筆者會再對這個部份進行說明。

最後,再將 Add-in 專案中的 ThisAddin.cs 打開,加入下列的程式碼(請將 BackageViewPanecs 改成 HelloBackstageView)

image

這段程式碼會啟用 Backstage View 功能,並載入我們所定義的 Backstage View 介面。

完成後,按 F5 啟動 VSTO Debugger,它會啟動 Excel 2010 (或是讀者所設定的 Add-in 的應用程式),按左上角的 File,就可以看到我們所建的 Backstage View 項目:

image

其中,Hello 是自己的 Tab,所以可以展開:

image

按下畫面中的 “Hello Button”, “My Button”,都會顯示一個訊息盒,這個訊息盒就是由 onAction 的事件常式所產生的:

image

讀者可以比對觀察一下 XML 文件的內容和上圖的使用者元件的相對位置,可以更加了解 Backstage View 的 XML 是如何定義使用者介面的。

本文很快的實作了一個 Backstage View 介面的範例,未來我們還會看到這方面的更多應用。