SharePoint 2013 在线应用开发 – 第 1 部分

目录

• 应用程序
• 开发者网站设置
• “Napa” Office 365 开发工具
• 使用 Napa Office 365 开发工具
• 使用 Visual Studio 2012

应用程序

应用是一种新型的解决方案，旨在扩展 Microsoft Office 2013 的产品功能以满足业务需求。Office 新型解决方案 Office 应用基于 HTML、CSS、JavaScript、REST 等 Web 技术构建。Office 应用解决方案将支持 Microsoft Excel Web App、Microsoft Outlook 2013、Microsoft Outlook Web App、Microsoft Project Professional 2013、Microsoft Word 2013、Microsoft Excel 2013、Microsoft SharePoint 2013 和 Microsoft Exchange 2013。

Office 应用本质上是一个托管在 Office 客户端/Web 应用程序中的网页。您可以使用应用来扩展文档、电子邮件、会议请求或约会的功能。应用可以在多种环境和客户端中运行，包括 Office 桌面客户端、Office Web Apps、移动浏览器，以及本地和云端。

以下是 Microsoft Office 365 – SharePoint 2013 Online 中用于管理应用的 SharePoint 管理中心控件。

应用构建块

Office 应用的基本组件是 XML 清单文件和网页。清单定义了配置、设置，并指向实现应用 UI 和自定义业务逻辑的网页。

应用类型和可扩展性

应用分为四大类，每一类应用都将支持其对应的 Office 产品。

• SharePoint 应用
• Office 任务窗格应用
• Excel 内容应用
• Office 邮件应用

SharePoint 应用

SharePoint 2013 提供了云应用模型，可帮助您创建应用。SharePoint 应用是使用 HTML5、JavaScript 和 OAuth 等基于标准的独立功能区，可扩展 SharePoint 网站的功能。

应用占用的资源很少，因为它们不实际安装在主机服务器上，这意味着它们不会用不必要的 API 调用来使 SharePoint 网站超载。

云应用模型允许用户从 SharePoint Store 或其组织的私人应用目录中发现和下载应用，并将其安装到其 SharePoint 网站上。

“Napa” Office 365 开发工具

为了创建 Microsoft Office 2013 应用，我们现在都知道应用包含清单 XML 和网页文件。为此，我们可以使用任何可以帮助我们将文件保存为文本格式的工具。但为了简化开发过程，Microsoft 通过使用其项目模板、开发环境和调试工具，在 Visual Studio 2012 中提供了全面的支持。除了 Visual Studio 2012，这次 Microsoft 还推出了一款名为“Napa”Office 365 开发工具的新型基于 Web 的开发工具。

在这里，我们将详细介绍“Napa”Office 365 开发工具。我们将了解在 Napa Office 365 开发工具中如何创建、管理和支持部署。

要开始 Office 365 – SharePoint 2013 的应用开发，请登录 Office 365。成功登录后，下一页将是 Office 365 管理中心；在同一页面上，您可以找到开发者网站导航，您可以在其中获取 Napa 开发工具。

另一个选项是导航到 SharePoint 2013 管理中心，在网站集列表下，您可以找到开发者网站集 URL。

以下屏幕截图将帮助您导航到 SharePoint 管理员中心。

导航到 SharePoint 管理员中心后，您将看到开发者网站集。登录开发者网站集，您将看到 Napa 工具下载的导航。

以下是开发者网站主页中可用的 Napa 工具下载导航。

然后您将被导航到 Office 应用商店下载站点进行下载。

以下是将 Napa 开发工具安装到您的环境中的分步过程。

这将添加到浏览器中受信任的服务列表（最好是 Microsoft Internet Explorer 9 或更高版本）

Office 应用的许可证将在我们下载的登录名下进行管理。

应用部件

什么是应用部件？它是一种 Web 部件，由 ClientWebPart 类表示。SharePoint 2013 应用可以通过应用部件显示。应用部件，现在在您的一些心中会产生一个问题——这是否取代了 WebPart？如果不是，它与 WebPart 有什么区别，它有什么优势吗？

这里是应用部件，而不是 WebPart 的替代品。应用部件本质上是 IFrame 的包装器，用于托管应用页面。除了充当包装器之外，与 WebPart 一样，应用部件可以具有用户可以在工具部件中设置的自定义属性。

• ClientWebPart.aspx - 在 SharePoint 托管的应用中，这将作为您的应用部件接口。
• Default.aspx - 是应用的起始页。这将提供完整的页面应用体验，这将是应用部署后的着陆页。
• App.css – 这将包含默认样式，根据需要，我们可以使用相同的 CSS 文件来添加任何自定义样式。
• App.js – 在此 JavaScript 文件中，它包含所需的 JavaScript，并包含几行预生成代码，以开始您的 SharePoint 应用开发。

使用“Napa”Office 365 开发工具

在您的开发环境中安装 Napa 开发工具后，转到开发者网站，在网站内容部分下，您会找到已安装的应用。

我们可以管理 Napa 应用以及网站中所有已安装应用的权限级别和许可证管理。

现在让我们看一个简单的例子，了解如何从 Office 365 – SharePoint 2013 页面中创建一个应用来显示。让我们开始探索使用 Napa 进行应用开发，在本章的后面部分，我们将看到更多逻辑示例。

单击 Napa，将出现以下页面以选择应用的名称。

以下是使用 Napa 生成的默认项目，它由 Visual Studio 2012 提供支持。

默认情况下，应用解决方案生成了四个文件夹，每个文件夹都包含相关的应用文件。首先是包含 App.css 文件的内容文件夹，Images 文件夹包含 Appicon.png 文件，Pages 文件夹包含 ClientWebPart.aspx 和 Default.aspx，Scripts 文件夹包含 Apps.js 文件。

除了默认文件，根据开发需求，我们可以向应用开发中添加新文件。右键单击需要添加文件的文件夹。支持添加到现有解决方案的文件包括 JavaScript 文件、样式表和 SharePoint 网页。

应用属性可以在属性窗口中定义，您可以在其中定义名称、权限、访问和远程端点。

使用 Napa 创建应用

1. 打开 SharePoint 管理中心
2. 在网站集下，打开开发者网站。
3. 从开发者网站集打开“Napa”Office 365 开发工具。
4. 现在您将被导航到 https://www.napacloudapp.com/。
5. 在以下页面中，您可以看到“您想构建什么类型的应用？”，其中包含 SharePoint 应用、Office 任务窗格应用、Excel 内容应用和 Office 邮件应用项目选项。
6. 输入项目名称并单击创建。

使用 Napa 创建应用后，项目将自动创建一些文件夹和文件，正如我们在本章开头所解释的那样。以下是我们在编程应用之前必须了解其目的和需求的四个重要文件。

• ClientWebPart.aspx
• Default.aspx
• App.css
• App.js
• AppIcon.png

在此示例中，我们将编写 JavaScript 代码来检索 SharePoint 网站中的列表/库，并在下拉列表中显示列表/库标题。

打开 Pages 文件夹下的 Default.aspx 文件，并添加 HTML 标签以创建下拉列表。在此示例中，我们创建了一个名为“ListItemListBox”的下拉列表。

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
    <div>
    	<select id="ListItemListBox"></select>
    </div>
</asp:Content>

现在我们需要编写 JavaScript 来从当前运行的应用上下文中检索列表名称，并将列表名称填充到下拉列表中。打开 Scripts 文件夹下名为 App.js 的文件。

以下是使用 Napa 工具创建项目时将生成的代码。代码的每个部分都用注释解释了其存在目的。

var context;
var web;
var user;

// This code runs when the DOM is ready. It ensures the SharePoint
// script file sp.js is loaded and then executes sharePointReady()
$(document).ready(function () {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
});

// This function creates a context object which is needed to use the SharePoint object model
function sharePointReady() {
    context = new SP.ClientContext.get_current();
    web = context.get_web();

    getUserName();
}

// This function prepares, loads, and then executes a SharePoint query to get the
// current users information
function getUserName() {
    user = web.get_currentUser();
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}

// This function is executed if the above call is successful
// It replaces the contents of the 'helloString' element with the user name
function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
}

// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}

现在让我们看看从 Web 的当前上下文中检索列表/库名称并将其填充到下拉列表中的代码。我们将编写一个 GetListsToDisplay() 函数，它从上下文中加载列表/库名称，成功从上下文中检索后，以下函数将填充到下拉列表中以供显示。如果加载失败，GetListsToDisplayFail(sender, args) 将显示错误消息。

function GetListsToDisplay() {
    // Get the available SharePoint lists, and then set them into
    // the context.
    this.web = context.get_web();
    this.lists = this.web.get_lists();
    this.context.load(this.lists);
    this.context.executeQueryAsync(Function.createDelegate
    (this, this.GetListsToDisplaySucess),
    Function.createDelegate(this, this.GetListsToDisplayFail));
}

function GetListsToDisplaySucess(sender, args) {
    // Success getting the lists. Set references to the list
    // elements and the list of available lists.
     var listEnumerator = this.lists.getEnumerator();
     var selectListBox = document.getElementById("ListItemListBox");
     if (selectListBox.hasChildNodes()) {
         while (selectListBox.childNodes.length >= 1) {
             selectListBox.removeChild(selectListBox.firstChild);
         }
     }
    // Traverse the elements of the collection, and load the name of
    // each list into the dropdown list box.
     while (listEnumerator.moveNext()) {
         var selectOption = document.createElement("option");
         selectOption.value = listEnumerator.get_current().get_title();
         selectOption.innerText = listEnumerator.get_current().get_title();
         selectListBox.appendChild(selectOption);
     }
}

function GetListsToDisplayFail(sender, args) {
    // Lists couldn’t be loaded - display error.
    alert('failed to get list. Error:' + args.get_message());
}

现在，单击 Internet Explorer 状态栏旁边的“运行项目”按钮。

现在您的项目将被打包并安装到您的 SharePoint 服务器上。如果该项目已在运行，则项目将卸载以前的版本并安装最新版本。

以下屏幕截图将显示我们用 JavaScript 编写的代码的结果。

Visual Studio 2012、工具和客户端组件

在 Microsoft Visual Studio 2012 中，您将找到创建快速结果所需的敏捷流程、精炼的管理工具和强大的测试基础结构。

如果您在开发和测试 SharePoint 应用时想直接从 Visual Studio 2012 部署，Office 365 开发者网站也是最佳选择，因为无法从 Visual Studio 2012 部署到除开发者网站之外的任何网站。

注意：IntelliTrace 等功能仅是 Visual Studio Ultimate 2012 版本的一部分。

要使用 Visual Studio 2012 设置 Office 365 – SharePoint 2013 应用开发，我们需要安装适用于 Visual Studio 2012 的 Office 开发工具和 SharePoint 客户端组件。

当您安装 Visual Studio 2012、适用于 Visual Studio 2012 的 Office 开发工具和 SharePoint 客户端组件时，您将获得所需的所有模板和工具，以及以下资源，这些资源使您无需安装 SharePoint 2013 即可在开发计算机上开发 SharePoint 应用。

以下是 Office 365 – SharePoint 2013 开发所需的工具和组件，以及 Visual Studio 2012。

• 适用于 Visual Studio 2012 的 Office 开发工具
• SharePoint 客户端组件
• Windows 身份基金会 SDK
• Windows 身份基金会扩展
• 工作流工具 SDK 和工作流客户端 SDK

注意：Visual Studio 2012 Express Edition 不支持 SharePoint 2013 开发工作。

现在您有六个项目模板可用于 SharePoint 2013 开发。在总共六个项目模板中，有五个项目模板；要开发 SharePoint 解决方案或在服务器资源管理器中浏览 SharePoint 连接，必须在本地系统上安装 SharePoint。以下是五个项目模板列表，它们需要本地安装 SharePoint 2013 或在服务器资源管理器中进行 SharePoint 连接才能进行远程开发。

• SharePoint 2013 - 空项目
• SharePoint 2013 - Silverlight Web 部件
• SharePoint 2013 - 可视化 Web 部件
• SharePoint 2013 - 导入解决方案包
• SharePoint 2013 - 导入可重用 2010 工作流

以下是 Visual Studio 2012 项目模板，用于使用客户端组件开发 SharePoint 2013 应用。这不需要本地安装 SharePoint 2013。

• SharePoint 2013 应用

使用 Visual Studio 2012 创建应用

在我们的示例中，我们将创建一个应用，该应用将自动化办公室中的文具请求流程。首先，我们将创建一个表单来填写文具请求的详细信息，然后我们将演示如何向表单添加审批流程。

1. 打开 Visual Studio 2012
2. 创建新项目，然后在“已安装的项目模板”>“Office/SharePoint”下，单击“SharePoint 2013 Visual C# 应用”。

   

3. 然后单击“确定”。
4. 输入项目名称并单击创建。

在下一个向导中，我们必须为应用命名，并且必须提供 SharePoint 2013 开发者网站。

输入 SharePoint 站点 URL 后，单击“验证”按钮。它将打开 Office 365 登录页面，输入有效的凭据后，将出现以下成功消息。

在“新建 SharePoint 应用”窗口中单击“完成”按钮后，以下解决方案将在 Visual Studio 2012 中浏览 SharePoint 2013 应用项目。

项目成功创建后，请单击应用项目并验证站点 URL 属性，如下所示

摘要

本文是 Office 365 SharePoint 2013 Online 自定义开发的介绍。我们将在未来的文章中进行一些高级开发。