您的位置：首页 > 移动开发

office app 代码简析之 task pane app

2013-05-21 19:47 218 查看

上篇介绍了 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 buttons
Office.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 document
function setData(elementId) {
Office.context.document.setSelectedDataAsync($(elementId).val());
}

// Reads the data from current selection of the document and displays it in a textbox
function 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外部菜单

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： office app task pane 代码简析 manifest 设计规范

相关文章推荐

新的分享

章节导航