Office 2013 相關應用程式 (3) - 開發 Office 相關應用程式

歐志信

Dn198220.7B654F178A3842F7F616A829DC6DF588(zh-tw,TechNet.10).png

2013年4月

簡介

在先前的文章中,您已經知道想要開發 Office 相關應用程式需要的開發環境,如果您已經安裝好 Visual Studio 2012、Microsoft Office 開發工具、Office 2013,我們就可以開始開發 Office 相關應用程式。

第一個 Office 2013 相關應用程式

開啟 Visual Studio 2012,新增專案,在範本中,切換至【Office/SharePoint】/【應用程式】,選擇【Office 2013 相關應用程式】,建議您修改一下名稱,當您開發許多程式時,有意義的程式名稱會讓您容易辨識程式是在做什麼的,完成後按【確定】。

Dn198220.D12B93759513ABDC64A1D46DCA40CA8C(zh-tw,TechNet.10).png

接著出現【建立 Office 相關應用程式】頁面,您可以選擇【工作窗格應用程式位置】、【Excel 中的內容應用程式】,【郵件應用程式位置】。在先前的文章中所展示的 Bing Maps 應用程式,則是【Excel 中的內容應用程式】,如果您不清楚這些應用程式的差異,可以參考文章Office 2013相關應用程式概觀 有相當詳細介紹。

在此我們選擇【工作窗格應用程式位置】/【Word】做示範,選擇後按【完成】。

Dn198220.9A478EB0E0534AE951BC5F80997D7B1D(zh-tw,TechNet.10).png

開啟後,先來看一下右邊方案總管,在資料夾 Content 放置 CSS 樣式檔案,在資料夾 Pages 放置 HTML 5 網頁,在資料夾 Script 放置相關 Script,例如 jquery、JavaScript。

相信對於網頁開發人員一定不陌生,透過 HTML 撰寫網頁內容, 再利用 CSS 設計外觀, 並且透過 JavaScript 提供互動效果與商務邏輯處理, 在 Office 相關應用程式開發的模式也是相同的。

而在這麼多檔案中,最為重要的是紅色底線標示的檔案。

Dn198220.B1E051CE108EFD8FCAEF6688695306C6(zh-tw,TechNet.10).png

在 OfficeAppWord.js(名稱根據您的專案名稱有所不同),主要是處理網頁的互動邏輯與商務邏輯。

Dn198220.C7411FFB23DE06762271A49E0AA59D3E(zh-tw,TechNet.10).png

在 OfficeAppWord.html(名稱根據您的專案名稱有所不同)則是您 Office 相關應用程式的畫面內容。

Dn198220.AB3C486992D101E0C39893B409AE2C71(zh-tw,TechNet.10).png

直接看網頁原始碼可能對於初學者有些吃力,您可以按左下方的【設計】按鈕,即可顯示設計畫面。

Dn198220.971C49EB69F18EDE21D313D7558DA43C(zh-tw,TechNet.10).png

按上方工具列上的【開始】按鈕,或是按F5鍵開始偵錯,可以執行 Office 相關應用程式。

Dn198220.7CAD3967DE6CF8F86BBCEE68A7E45A22(zh-tw,TechNet.10).png

以目前的範例來說,會先開啟 Microsoft Word 並且加入應用程式,範例是選擇工作窗格應用程式,因此會如下圖呈現:

Dn198220.26A0BB9F6A8DC79989E920045AB1D59C(zh-tw,TechNet.10).png

此範例包含 Office 2013 相關應用程式最主要的功能 - 取得資料和設定資料;我們可以嘗試在輸入一些文字並且反白選取,按【Get Data】按鈕即可取得文件反白選取的資料到應用程式中。

Dn198220.CCF4DF553D754DAB89F932C908B9F2E6(zh-tw,TechNet.10).png

當我們在應用程式輸入一些文字後,按【Set Data】會將文字插入文件中。

Dn198220.9CE196E6729D8AB8920009045530AE89(zh-tw,TechNet.10).png

我們來看一下程式碼的部分,首先針對OfficeAppWord.html(名稱根據您的專案名稱有所不同),在 head中引用了 CSS 與 Script,可以看到包含 jquery-1.7.1.js,如果您有額外增加 CSS 樣式或 Script 檔案,請在紅框處加入程式碼進行引用。

Dn198220.6D7E52BE6FA90EDFE176612B94C43CF6(zh-tw,TechNet.10).png

在 body 部分,包含兩個 button,以及一個 text。

Dn198220.E59BFAD5916158D53FC76C4D2ADA3513(zh-tw,TechNet.10).png

接著我們來看OfficeAppWord.js(名稱根據您的專案名稱有所不同),當應用程式準備好開始與主應用程式互動時,會執行 Office.initialize 將點選處理常式加入至按鈕之前,我們可以看到程式碼包含了 Get Data 與 Set Data 按鈕 click 事件。分別呼叫 getData 與 setData 方法

Dn198220.D9B6C9BA3C60D1F0BCC1CC94F6EB6B51(zh-tw,TechNet.10).png

setData 方法會將文字方塊的資料寫入至文件目前的選取範圍

Dn198220.321768EBE0403430A90D5F2B21FC1F66(zh-tw,TechNet.10).png

getData 方法會從文件目前的選取範圍讀取資料,並且在文字方塊中顯示該資料

Dn198220.9F8A98112251941E35A18CB753ECF6EC(zh-tw,TechNet.10).png

在 script 中有兩個重要的方法,分別是 Document.setSelectedDataAsync 將資料寫入文件以及Document.getSelectedDataAsync 取得文件中選取的資料,這兩個方法包含 Async 關鍵字,表示非同步處理,非同步處理近年來在微軟軟體開發上大量被使用,例如 Windows Store App,非同步處理的優點在於當我們可能需要長期執行工作處理時,不會鎖住執行緒,非同步呼叫端可以繼續工作,而不需等待非同步方法,簡單來說,當 Office 2013 相關應用程式在進行處理時,非同步處理的方式不會影響 Office 軟體本身的使用,如果您對此部分有興趣的話,可以參考連結 Asynchronous programming in apps for Office

結語

本文說明 Office 相關應用程式專案架構,並且針對重要的程式碼進行說明,並且針對需要注意部分做提醒,在下一篇文章中,將會帶著大家實作一個範例,讓大家更了解與熟悉 Office 相關應用程式開發。

相關連結

文章分類:TechNet – Office

顯示: