office app 代碼簡析之 task pane app

上篇介紹了 office 2013 app 之 task pane app(從建立到發布到office 365 SharePoint)   http://blog.csdn.net/farawayplace613/article/category/475691。

本篇簡析 task pane app 的代碼結構及相關特性（如何建立task pane app 請參考上篇）。

當建立好task pane app, VS 2012 已經將task pane app的工程結構產生好了。一共兩個工程，第一個工程只有一個檔案 OfficeApp1.xml， 這個是office app的manifest 檔案：

 

<?xml version="1.0" encoding="UTF-8"?><!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9--><OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">  <Id>43c36840-55d9-4c87-bfeb-a418246e5ab6</Id>  <Version>1.0</Version>  <ProviderName>AbrahamCheng</ProviderName>  <DefaultLocale>en-US</DefaultLocale>  <DisplayName DefaultValue="OfficeApp1" />  <Description DefaultValue="OfficeApp1 Description"/><IconUrl DefaultValue="~remoteAppUrl/image/icon.jpg" />  <Capabilities>    <Capability Name="Document" />  </Capabilities>  <DefaultSettings>    <SourceLocation DefaultValue="~remoteAppUrl/Pages/OfficeApp1.html" />  </DefaultSettings>  <Permissions>ReadWriteDocument</Permissions></OfficeApp>

 

xsi:type="TaskPaneApp" 表示app 類型，在我的部落格 http://blog.csdn.net/farawayplace613/article/details/8950512 中給大家介紹了office  app目前支援的三種類型

ID 是app的唯一標識，在同一個app catalog或office app store裡面是不可以重複的；

Capability表示該app可以被何種類型的office 用戶端使用；

SourceLocation 為該app的起始頁面（啟動頁面）的URL；

這個檔案將被上傳致app catalog 或office app store,當使用者在文檔中插入該app是它就會根據SourceLocation找到該app的起始頁面，並載入和執行該頁面；

Permissions 表示該應用的許可權；

AppDomains 表示該app可以訪問那些網站地址，可以在App domains選項卡裡面設定。

別擔心不知道怎麼修改這個檔案，VS 2012 提供可視化介面了修改這個檔案：

分析完 OfficeApp1這個工程，在來看 OfficeApp1Web,這個工程咋看起來和普通的web 工程並沒有太大區別，除了可以訪問當前插入了該app的office文檔的資源外。

OfficeApp1.html：

 

<!DOCTYPE html><html><head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />    <title>OfficeApp1</title>    <link rel="stylesheet" type="text/css" href="../Content/Office.css" />    <!-- Add your CSS styles to the following file -->    <link rel="stylesheet" type="text/css" href="../Content/App.css" />    <script src="../Scripts/jquery-1.7.1.js"></script>    <!-- Use the CDN reference to Office.js when deploying your app -->    <!--<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>-->    <!-- Use the local script references for Office.js to enable offline debugging -->    <script src="../Scripts/Office/1.0/MicrosoftAjax.js"></script>    <script src="../Scripts/Office/1.0/office.js"></script>    <!-- Add your JavaScript to the following file -->    <script src="../Scripts/OfficeApp1.js"></script></head><body>    <!-- Replace the following with your content -->    <div id="Content">        <input type="button" value="Set data" id="setDataBtn" style="margin-right: 10px; padding: 0px; width: 100px;" />        <input type="button" value="Get data" id="getDataBtn" style="padding: 0px; width: 100px;" />        <input type="text" value="Sample Data" id="selectedDataTxt" style="margin-top: 10px; width: 210px" />    </div></body></html>

這個頁面時office app的起始頁面，當使用者在office 文檔中插入該app時，實際上就是載入並執行這個網頁，這個頁面裡引用了三個JS類庫

 

../Scripts/jquery-1.7.1.js， ../Scripts/Office/1.0/MicrosoftAjax.js， ../Scripts/Office/1.0/office.js

前兩個做過Web開發的人都很熟，不用多說，第三個是微軟提供的office app的JS 類庫，在命名空間Office.context下定義了很多類，在OfficeApp1.js中可以看到一些。 

../Scripts/OfficeApp1.js 是該app自己的實現商務邏輯的地方：

 

// This function is run when the app is ready to start interacting with the host application// It ensures the DOM is ready before adding click handlers to buttonsOffice.initialize = function (reason) {    $(document).ready(function () {        $('#getDataBtn').click(function () { getData('#selectedDataTxt'); });        // If setSelectedDataAsync method is supported by the host application        // setDatabtn is hooked up to call the method else setDatabtn is removed        if (Office.context.document.setSelectedDataAsync) {            $('#setDataBtn').click(function () { setData('#selectedDataTxt'); });        }        else {            $('#setDataBtn').remove();        }    });};// Writes data from textbox to the current selection in the documentfunction setData(elementId) {    Office.context.document.setSelectedDataAsync($(elementId).val());}// Reads the data from current selection of the document and displays it in a textboxfunction getData(elementId) {    Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,    function (result) {        if (result.status === 'succeeded') {            $(elementId).val(result.value);        }    });}

 task pane app還有一些設計規範：

 

 1. App的預設寬度是 320， 開發人員是不能改變它的寬度的，但使用者可以，所以開發需要考慮不同寬度下的顯示，避免出現橫向的捲軸

 2. 垂直捲軸是可以接受的，如果內容太多的話

3. 可以控制app的內部菜單，但不能控制app外部菜單