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

歐志信

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

2013年4月

簡介

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

範例功能說明

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

範例下載網址:http://Files.Dotblogs.com.tw/chou/1304/20134211121721.zip

開發步驟

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

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

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

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

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

Dn198221.2B228E724776E4002345DD1BB8C04840(zh-tw,TechNet.10).png

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

Dn198221.726CCE579D1DD14568EDBAE8F8C86C07(zh-tw,TechNet.10).png

開啟 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 不熟悉的話,可以選擇【分割】同時看原始碼與設計畫面。

Dn198221.EA477D7C084970F7DE3F25E59263DFAA(zh-tw,TechNet.10).png

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

Dn198221.2F77125B04E3EEA4F34751A39DFC3480(zh-tw,TechNet.10).png

接著,修改 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 文件,裡面包含了圖片網址,我可能需要圖片網址貼到瀏覽器才能瀏覽,這時我們先將網址選取,按【選取圖片網址】按鈕。

Dn198221.DBA7268E5090E5DD89EF9EE10522E54D(zh-tw,TechNet.10).png

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

Dn198221.9153FE4E8201E1A91D04E154E6D0474C(zh-tw,TechNet.10).png

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

Dn198221.355771773380C08DF42377B66D6C7C81(zh-tw,TechNet.10).png

結語

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

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

相關連結

文章分類:TechNet – Office

顯示: