Office 2013 相關應用程式 (4) 跟著範例學開發

2013-04-02

3157
0
2013-04-03

Office 2013 相關應用程式系列文章

Office 2013 相關應用程式 (1) 初探 Office 相關應用程式

Office 2013 相關應用程式 (2) 安裝 Office 開發人員工具

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

Office 2013 相關應用程式 (4) 跟著範例學開發

簡介

在先前的文章中，相信大家對於 Office 相關應用程式開發已經有初步的認識，本文將以 Office 相關應用程式開發範例【圖片網址easy秀】，帶著您做一遍，讓您對於開發 Office 相關應用程式能更加熟悉與了解。

範例功能說明

本範例【圖片網址easy秀】，功能是將文章中圖片連結反白，按【取得圖片網址】按鈕即可預覽圖片，按【插入圖片】按鈕即可在文章中插入圖片。

範例下載網址：https://dotblogsfile.blob.core.windows.net/user/chou/1304/20134211121721.zip

範例執行結果影片：

圖片網址easy秀

開發步驟

開啟 Visual Studio 2012，新增 Office 2013 相關應用程式，名稱是OfficeAppWord。

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

新增完成後，首先來修改 Office 相關應用程式的顯示名稱資訊，在【方案總管】開啟 OfficeAppWord，接著您可以修改【顯示名稱】、【描述】等資訊，針對應用程式的權限，您也可以進行設定。

嘗試執行程式，您可以看到【顯示名稱】與【描述】已經修改成功。

開啟 OfficeAppWord.html，將 body 的部分換成以下內容，如果不容易複製程式碼的話，建議您可以下載範例進行複製：

<body>
    <!-- 用您自己的內容取代下列內容 -->
    <div id="Content">
        <input type="button" value="取得圖片網址" id="getDataBtn" style="padding: 0px; width: 100px;" />
        <input type="text" value="圖片網址" id="selectedDataTxt" style="margin-top: 10px; width: 210px"  disabled="disabled" />
        <br />
        <img id="prePic" src="" style=" width: 100%; height:100%"/>  
        </div>
    <div> 
        <input type="Button" value="插入圖片" id="insertImageBtn" style="margin-top: 10px; padding: 0px; width: 100px;"  disabled="disabled" /> 
        <br />
        <span>執行結果: </span><div id="results"></div>
    </div>
</body>

置換 body 程式碼後，如果您對 HTML 5 不熟悉的話，可以選擇【分割】同時看原始碼與設計畫面。

嘗試執行程式，可以看到版面已經修改成如下圖所示，將 body 程式碼與擺在一起，讓您了解這些程式碼在實際畫面的樣子長怎樣。

接著，修改 OfficeAppWord.js，也就是網頁互動與商務邏輯的部分，在 Office.initialize 將網頁上的控制項相關事件綁定，包含【取得圖片網址】按鈕，【圖片網址】text，【插入圖片】按鈕的相關事件綁定，相關說明請參考請參考程式碼中的註解。

// 當應用程式準備好開始與主應用程式互動時，這項功能就會執行
// 它可確保將點選處理常式加入至按鈕之前，DOM 就已經就緒
Office.initialize = function (reason) {
    $(document).ready(function () {
        // [取得圖片網址]按鈕 click 時
        // 做 getData 取得文件中的資料放到 [圖片網址] text 中，並且顯示圖片
        $('#getDataBtn').click(function () {
            getData('#selectedDataTxt');
        });

        // 當[圖片網址]text改變時，讓[插入圖片]按鈕 disabled
        $('#selectedDataTxt').change(function () {
            $('#insertImageBtn').attr("disabled", "disabled");
        });

        // 如果主應用程式支援 setSelectedDataAsync 方法，
        // 則會連結[插入圖片]按鈕以呼叫此方法，
        // 當 [插入圖片] 按鈕 click 時，將圖片網址加上一些 html tag 插入文件中
        if (Office.context.document.setSelectedDataAsync) {
            $('#insertImageBtn').click(function () {
                var imgHtml = "<img " + "src='" + $('#selectedDataTxt').val() + "' img/>";
                setHTMLImage(imgHtml);
            });
        }
    });
};

當【取得圖片網址】按鈕 click 時，取得文件中選取範圍的資料，取得成功後，使用validatePic 方法驗證圖片網址，如果圖片網址正確的話，則顯示圖片，並且移除【插入圖片】按鈕的 disabled 屬性，讓按鈕可以使用，如果圖片網址資料有問題的話，則顯示錯誤訊息，並且清除【圖片網址】text。

// 從文件目前的選取範圍讀取資料，並且在文字方塊中顯示該資料
function getData(elementId) {
    Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
    function (result) {
        if (result.status === 'succeeded') {
            $(elementId).val(result.value);
            var picaddress = $('#selectedDataTxt').val();
            if (validatePic(picaddress)) {
                $('#prePic').prop("src", picaddress);
                $('#insertImageBtn').removeAttr("disabled");
            }
            else {
                // 清除圖片網址
                $('#selectedDataTxt').select();
                document.selection.clear();
            }
        }
    });
}

// 驗證圖片網址
function validatePic(picUrl) {
    if (picUrl.length == 0) {
        writeError("請輸入圖片網址");
        return false;
    }

    var picextension = picUrl.substring(picUrl.lastIndexOf("."), picUrl.length);
    picextension = picextension.toLowerCase();
    if ((picextension != ".jpg") && (picextension != ".gif") && (picextension != ".jpeg") && (picextension != ".png") && (picextension != ".bmp")) {
        writeError("圖片格式必須是 jpeg,jpg,gif,png,bmp");
        return false;
    }

    $('#results')[0].innerText = "";
    return true;
}

// 顯示錯誤訊息
function writeError(text) {
    $('#results')[0].innerText = text;
    $('#results').css("color", "red");
}

當取得【圖片網址】成功後，我們可以按【插入圖片】按鈕，在 Office.initialize 已經有綁定事件，當 click 時呼叫 setHTMLImage 將圖片插入文件中。

// 插入圖片到文件中
function setHTMLImage(imgHTML) {
    Office.context.document.setSelectedDataAsync(
        imgHTML,
        { coercionType: "html" },
        function (asyncResult) {
            if (asyncResult.status == "failed") {
                writeError('Error: ' + asyncResult.error.message);
            }
        });
}

範例執行結果

當我收到一個 Word 文件，裡面包含了圖片網址，我可能需要圖片網址貼到瀏覽器才能瀏覽，這時我們先將網址選取，按【選取圖片網址】按鈕。

如果圖片網址正確時，則可以預覽圖片。

當按下【插入圖片】按鈕時，則可以將圖片插入文件目前的選取位置中。

結語

以一個 Office 相關應用程式開發範例【圖片網址easy秀】帶著您做一遍，是不是覺得自己也可以寫得出有用的 Office 相關應用程式。如果您想要嘗試進行開發，但是找不到更多範例時，您可以到網站開發人員程式碼範例，裡面有許多 Office 相關應用程式範例可以學習。

最後，希望這一系列的 Office相關應用程式文章能對您有幫助，謝謝您的閱讀。

小歐ou | 菜鳥自救會

努力工作，用心學習