Office 2013 相关应用程序 (3) 开发 Office 相关应用程序

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 相关应用程序】,建议您修改一下名称,当您开发许多程序时,有意义的程序名称会让您容易辨识程序是在做什么的,完成后按【确定】。

image002

接着出现【建立 Office 相关应用程序】页面,您可以选择【工作窗格应用程序位置】、【Excel 中的内容应用程序】,【邮件应用程序位置】。在先前的文章中所展示的 Bing Maps 应用程序,则是【Excel 中的内容应用程序】,如果您不清楚这些应用程序的差异,可以参考文章Office 2013 相关应用程序概观 有相当详细介绍。

在此我们选择【工作窗格应用程序位置】/【Word】做示范,选择后按【完成】。

image003

开启后,先来看一下右边方案总管,在数据夹 Content 放置 CSS 模式文件,在数据夹 Pages 放置 HTML 5 网页,在数据夹 Script 放置相关 Script,例如 jquery、JavaScript。

相信对于网页开发人员一定不陌生,透过 HTML 撰写网页内容, 再利用 CSS 设计外观, 并且透过 JavaScript 提供交互效果与商务逻辑处理, 在 Office 相关应用程序开发的模式也是相同的。

而在这么多文件中,最为重要的是红色底线标示的文件。

image004

在 OfficeAppWord.js(名称根据您的项目名称有所不同),主要是处理网页的交互逻辑与商务逻辑。

image005

在 OfficeAppWord.html(名称根据您的项目名称有所不同)则是您 Office 相关应用程序的画面内容。

image006

直接看网页源代码可能对于初学者有些吃力,您可以按左下方的【设计】按钮,即可显示设计划面。

image007

按上方工具栏上的【开始】按钮,或是按F5键开始侦错,可以执行 Office 相关应用程序。

image008

以目前的范例来说,会先开启 Microsoft Word 并且加入应用程序,范例是选择工作窗格应用程序,因此会如下图呈现:

image009

此范例包含 Office 2013 相关应用程序最主要的功能 - 取得数据和设定数据;我们可以尝试在输入一些文字并且反白选取,按【Get Data】按钮即可取得文档反白选取的数据到应用程序中。

image010

当我们在应用程序输入一些文字后,按【Set Data】会将文字插入文档中。

image011

我们来看一下程序的部分,首先针对OfficeAppWord.html(名称根据您的项目名称有所不同),在 head中引用了 CSS 与 Script,可以看到包含 jquery-1.7.1.js,如果您有额外增加 CSS 模式或 Script 文件,请在红框处加入程序进行引用。

image012

在 body 部分,包含两个 button,以及一个 text。

image013

接着我们来看OfficeAppWord.js(名称根据您的项目名称有所不同),当应用程序准备好开始与主应用程序交互时,会执行 Office.initialize 将点选处理常式加入至按钮之前,我们可以看到程序包含了 Get Data 与 Set Data 按钮 click 事件。分别调用 getData 与 setData 方法

image014

setData 方法会将文字方块的数据写入至文档目前的选取范围

image015

getData 方法会从文档目前的选取范围读取数据,并且在文字方块中显示该数据

image016

在 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