2015年7月26日 星期日

[開發Office Add-Ins] 從NAPA開始 (1)

Office Add-Ins,是Office 2013開始,嶄新的增益集套件開發方式,用的語言不再是VBA(但VBA依舊可以用,別擔心),而是Web開發人員熟悉的的HTML與JavaScript。

你可以透過開發Office Add-Ins,擴充Office Word, Excel , PowerPoint…的功能,可以將開發好的增益集上架到Office Store(市集),或是佈署到企業內的App Catalog上,供同仁使用。更重要的是,透過這個架構開發的App,是可以在Office Web/Desktop/Mobile各種版本上跨平台使用的,亦即,你在iPad上的Word裡,同樣可以使用這種新的增益集。

在這一篇文章當中,我們將陸續開始為讀者介紹如何開發Office Add-Ins(App for Office),一開始,我們選擇用最簡單的工具,NAPA。

NAPA本身是一個網站,一個Web應用程式,其實也是一個SharePoint App。NAPA提供了一套很簡便的操作介面,讓開發人員可以快速地建構出Office Add-Ins。

在開始之前,您必須申請一個NAPA帳號。可以透過底下這個網址申請:

https://www.napacloudapp.com/

請留意,你要使用NAPA,必須先有一個Microsoft Account,所謂的Microsoft Account也就是過去的Live ID,基本上就是Outlook.com或是hotmail.com的帳號,如果沒有,可以到底下網址申請一個:

https://signup.live.com/

申請完成並登入之後,可進到https://www.napacloudapp.com/ ,會看到底下畫面:

image004

點選Get Started,會要求你使用Microsoft Account登入,如果你已經登入,會看到底下畫面:

 image005

因為NAPA是一個網站,我們可以透過NAPA這個網站來寫程式,而NAPA需要存取您的OneDrive及相關資訊以便於存放與測試您寫的程式,因此您必須選擇Yes。

選擇了Yes之後,會看到底下畫面:

image

這樣您就可以透過NAPA來建立應用程式了。你可以建立一個最基本的Office Add-Ins,我們可以選擇Task Pane Add-In:

image

按下Create之後,你會看到底下畫面:

image018

在這個畫面當中,你會發現一進來看到的是Home.html,這是Task Pane Add-In應用程式的首頁(主UI),你可以點選Home.js,則會切換到:

image019

這是Home.html的主頁面邏輯,身分就等於過去我們在asp.net的code behind的感覺[1]。你會發現,撰寫Office Add-Ins的主要程式語言就是JavaScript(其中大多的語法都是jQuery),只要你熟悉Web開發,就可以開發Office Add-Ins。

除此之外,比較重要的還有app.js,不過關於應用程式架構與內容的部分,我們在後面再介紹。我們先看設定的部分,請點選底下這個工具鈕:

image020

你會發現其實剛才我們提到的頁面進入點,是從這邊(上圖Start Page)設定的。

請接著切換到Run:

 image021

你會發現畫面右方變成了你的應用程式運行方式的選項,在筆者撰寫本文的時候,只有第一個選項可以選擇。這設定的意思是,你選擇在Excel Web App當中來測試這個應用程式。

注意,這是指測試階段。當正式階段時,你的Task Pane Add-Ins是可以在Desktop/Web/Mobile版本的Word, Excel, PowerPoint…等環境執行的。

NAPA令人側目的原因之一,不僅僅是你可以透過它在純Web環境上面寫程式(使用時還有完整的IntelliSense),除此之外,你的source code直接存放在你自己的OneDrive裡面,連測試環境都是你自己的Excel Online應用程式。

你可以在NAPA環境當中,按下下圖中的執行圖式:

image

你會發現NAPA正幫你把這個程式碼上傳到你的OneDrive,並且試著開起你的Excel Online來運行:

image023

正常上傳完畢之後,你會發現Excel Online被打開了,你的Task Pane App就出現在Excel Online右方(這是Task Pane Add-In的顯示位置):

image024

由於它需要你的授權,請按下Start:

image025

您會發現App的主畫面Home.html出現了:

image026

由於Excel Online需要你授權才能編輯文件,所以請從選單中選擇Edit in Excel Online:

image027

接著,你就可以編輯Excel了,我們嘗試在儲存格中填入一些文字,然後按下主畫面當中的get data from selection鈕:

image028

你會發現我們透過NAPA撰寫的javaScript,抓取到了Excel裡面的儲存格內容,並且把資料顯示在上圖右下方的Notification訊息區塊。

這段JavaScript的程式碼是:

    function getDataFromSelection() {
        Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    app.showNotification('The selected text is:', '"' + result.value + '"');
                } else {
                    app.showNotification('Error:', result.error.message);
                }
            }
        );
    }

我們後面再來慢慢解釋這段程式碼,讀者先別心急。不過你可以很明確地發現,我們只需要透過JavaScript,就可以存取Excel中編輯文件的資料。

NAPA固然已經是一個非常不錯的開發工具,但是,如果我們想更進一步的編輯複雜的程式碼,甚至在測試執行時候設定中斷點,那Visual Studio依舊是你的不二選擇。

你可以從NAPA當中,按下底下這個按鈕,即可把整個專案下載到Visual Studio當中執行:

image

點選後,如果出現底下畫面,請選擇你要下載的(慣用的)程式語言:

image030

選定後,你會發現瀏覽器自動下載一個程式,請選擇執行:

image031

接著,系統會開起Visual Studio:

image032

你會發現,開啟的專案就是剛才我們透過NAPA編輯的專案。

你會發現,在Visual Studio當中,依舊可以按下F5執行整個專案,如果你需要,甚至可以在JavaScript中設定中斷點,程式碼執行到該斷點還真的會中斷。

會不會好奇,如果你在Visual Studio當中,按下F5,程式會運行在哪兒呢?

沒錯,就是Desktop版本的Excel:

image033

而透過用戶端的Visual Studio來開發與測試,還有一個好處,就是可以設定更多的測試環境,你可以開啟專案中的manifest檔案,然後選擇Activation:

image034

你會發現畫面中可以選擇該App可運行的Office應用程式環境,當你選擇了Word之後,會發現這個App,在Visual Studio中按下F5測試時,開起的就從Excel改為Word了:

image035

但有趣的是,在程式碼完全不改變的狀況下,該App依舊可以運行,且跟在Excel中運行的狀況幾乎一樣,按下task pane視窗中的按鈕,底下呈現出了用戶在word當中選擇的文字。

有沒有發現,不論是透過NAPA或是Visual Studio,你都可以輕易地建立Office Add-Ins應用程式,是不是很方便呢?

後面,我們將會繼續介紹Office Add-Ins的開發,與程式碼的撰寫。

 


[1] 沒聽過code behind? 算了, never mind。

1 則留言:

Hao-PIng Lin 提到...

董老師您好,想請教你add-in如何控制word的畫筆選項,例如控制畫筆顏色,粗细等

謝謝!