Office 2013 相關應用程式 (3) 開發 Office 相關應用程式
Office 2013 相關應用程式系列文章
Office 2013 相關應用程式 (1) 初探 Office 相關應用程式
Office 2013 相關應用程式 (2) 安裝 Office 開發人員工具
Office 2013 相關應用程式 (3) 開發 Office 相關應用程式
Office 2013 相關應用程式 (4) 跟著範例學開發
簡介
在先前的文章中，您已經知道想要開發 Office 相關應用程式需要的開發環境，如果您已經安裝好 Visual Studio 2012、Microsoft Office 開發工具、Office 2013，我們就可以開始開發 Office 相關應用程式。
第一個 Office 2013 相關應用程式
開啟 Visual Studio 2012，新增專案，在範本中，切換至【Office/SharePoint】/【應用程式】，選擇【Office 2013 相關應用程式】，建議您修改一下名稱，當您開發許多程式時，有意義的程式名稱會讓您容易辨識程式是在做什麼的，完成後按【確定】。
接著出現【建立 Office 相關應用程式】頁面，您可以選擇【工作窗格應用程式位置】、【Excel 中的內容應用程式】，【郵件應用程式位置】。在先前的文章中所展示的 Bing Maps 應用程式，則是【Excel 中的內容應用程式】，如果您不清楚這些應用程式的差異，可以參考文章Office 2013 相關應用程式概觀 有相當詳細介紹。
在此我們選擇【工作窗格應用程式位置】/【Word】做示範，選擇後按【完成】。
開啟後，先來看一下右邊方案總管，在資料夾 Content 放置 CSS 樣式檔案，在資料夾 Pages 放置 HTML 5 網頁，在資料夾 Script 放置相關 Script，例如 jquery、JavaScript。
相信對於網頁開發人員一定不陌生，透過 HTML 撰寫網頁內容, 再利用 CSS 設計外觀, 並且透過 JavaScript 提供互動效果與商務邏輯處理, 在 Office 相關應用程式開發的模式也是相同的。
而在這麼多檔案中，最為重要的是紅色底線標示的檔案。
在 OfficeAppWord.js（名稱根據您的專案名稱有所不同），主要是處理網頁的互動邏輯與商務邏輯。
在 OfficeAppWord.html（名稱根據您的專案名稱有所不同）則是您 Office 相關應用程式的畫面內容。
直接看網頁原始碼可能對於初學者有些吃力，您可以按左下方的【設計】按鈕，即可顯示設計畫面。
按上方工具列上的【開始】按鈕，或是按F5鍵開始偵錯，可以執行 Office 相關應用程式。
以目前的範例來說，會先開啟 Microsoft Word 並且加入應用程式，範例是選擇工作窗格應用程式，因此會如下圖呈現：
此範例包含 Office 2013 相關應用程式最主要的功能 - 取得資料和設定資料；我們可以嘗試在輸入一些文字並且反白選取，按【Get Data】按鈕即可取得文件反白選取的資料到應用程式中。
當我們在應用程式輸入一些文字後，按【Set Data】會將文字插入文件中。
我們來看一下程式碼的部分，首先針對OfficeAppWord.html（名稱根據您的專案名稱有所不同），在 head中引用了 CSS 與 Script，可以看到包含 jquery-1.7.1.js，如果您有額外增加 CSS 樣式或 Script 檔案，請在紅框處加入程式碼進行引用。
在 body 部分，包含兩個 button，以及一個 text。
接著我們來看OfficeAppWord.js（名稱根據您的專案名稱有所不同），當應用程式準備好開始與主應用程式互動時，會執行 Office.initialize 將點選處理常式加入至按鈕之前，我們可以看到程式碼包含了 Get Data 與 Set Data 按鈕 click 事件。分別呼叫 getData 與 setData 方法
setData 方法會將文字方塊的資料寫入至文件目前的選取範圍
getData 方法會從文件目前的選取範圍讀取資料，並且在文字方塊中顯示該資料
在 script 中有兩個重要的方法，分別是 Document.setSelectedDataAsync 將資料寫入文件以及Document.getSelectedDataAsync 取得文件中選取的資料，這兩個方法包含 Async 關鍵字，表示非同步處理，非同步處理近年來在微軟軟體開發上大量被使用，例如 Windows Store App，非同步處理的優點在於當我們可能需要長期執行工作處理時，不會鎖住執行緒，非同步呼叫端可以繼續工作，而不需等待非同步方法，簡單來說，當 Office 2013 相關應用程式在進行處理時，非同步處理的方式不會影響 Office 軟體本身的使用，如果您對此部分有興趣的話，可以參考連結 Asynchronous programming in apps for Office。
結語
本文說明 Office 相關應用程式專案架構，並且針對重要的程式碼進行說明，並且針對需要注意部分做提醒，在下一篇文章中，將會帶著大家實作一個範例，讓大家更了解與熟悉 Office 相關應用程式開發。
相關連結
Asynchronous programming in apps for Office
Reading and writing data to the active selection in a document or spreadsheet