office app 代码简析之 task pane app

前端之家收集整理的这篇文章主要介绍了office app 代码简析之 task pane app前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上篇介绍了office 2013 app 之 task pane app(从新建到发布到office 365 SharePoint) http://www.jb51.cc/cata/2010

本篇简析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外部菜单

原文链接:https://www.f2er.com/javaschema/286257.html

猜你在找的设计模式相关文章