在 Visio Web Access Web 部件中自定义 Visio Web 绘图
上次修改时间： 2013年12月3日
适用范围： SharePoint Server 2010
本文内容
Visio Web Access Web 部件编程入门
创建 Web 部件页
向 Web 部件页添加 Visio Web Access Web 部件
向 Web 部件页添加内容编辑器 Web 部件
Visio Services ECMAScript API
Visio Services ECMAScript API 中的对象
SharePoint 2010 SDK 中的示例
利用 Microsoft SharePoint Server 2010 中的 Visio Services，可以加载和显示 Microsoft SharePoint Server 2010 页上的 Visio Web Access Web 部件的实例中承载的 Microsoft Visio 2010 文档，并以编程方式与这些文档进行交互。
本文提供有关如何执行以下操作的信息：将 Visio Web Access Web 部件添加到 SharePoint Server 2010 Web 部件页、在 Web 部件中显示 Visio Web 绘图以及使用 Visio ServicesJavaScript API 以编程方式与绘图进行交互。
Visio Web Access Web 部件编程入门
在解决方案可以以编程方式与 SharePoint Server 2010 Web 部件页上的 Visio Web 绘图进行交互之前，必须先执行以下操作：将一个 Visio Web Access Web 部件添加到此页，在 Web 部件中打开以 .vdw 文件形式发布的 Visio 绘图，并将内容编辑器 Web 部件添加到此页以包含 ECMAScript（JavaScript、JScript）代码。
此过程假定您在 SharePoint Server 2010 中具有与页面设计者相同的适当管理权限。
开始对 Visio Web Access Web 部件进行编程
在 Visio 中，创建要显示的绘图，然后以 .vdw 文件形式将其保存到 SharePoint 文档库中。
创建 JavaScript (.js) 文件（该文件包含要用于与 Web 绘图交互的代码），然后将该文件保存到包含 .vdw 文件的文档库中。
创建用于显示绘图和包含代码的 SharePoint Server 2010 Web 部件页。
将 Visio Web Access Web 部件添加到此页，并在该 Web 部件中显示 Web 绘图。
将内容编辑器 Web 部件添加到此页，然后将其链接到之前创建的 JavaScript 文件。
在浏览器中刷新此页。
以下各节提供有关其中一些步骤的详细信息。可以在 Visio 帮助中查找有关将 Visio 绘图发布为 .vdw 文件的信息。还可以在 Microsoft Visual Studio 2010 中或者在任何其他文本或代码编辑器中创建 JavaScript 文件。
备注
可参考多本书籍和多篇在线文章来了解有关在 JavaScript 中进行编码的一般原则，本文中未包含此内容。
创建 Web 部件页
在将 Visio 绘图发布为 .vdw 文件后，将其保存到文档库，然后创建 JavaScript (.js) 文件并将其保存到同一库中，下一步将创建 Web 部件页。
创建 Web 部件页
在要发布绘图的 SharePoint 网站中，在"网站操作"菜单上单击"更多选项"。
在"页面与网站"下，单击"Web 部件页"。
在"新建 Web 部件"页的"名称"框中，键入该页的文件名。
选择一个布局模板和要将页面文件保存到的位置，然后单击"创建"。
向 Web 部件页添加 Visio Web Access Web 部件
您必须先向所创建的 Web 部件页中添加一个 Visio Web Access Web 部件，并在该 Web 部件中打开作为 .vdw 文件发布的 Visio 绘图，然后您才能以编程方式与 SharePoint Server 2010 Web 部件页上的 Web 绘图进行交互。
向 Web 部件页添加 Visio Web Access Web 部件
在 SharePoint Server 2010 Web 部件页上的服务器功能区中，单击"编辑网页"。
在要放置 Web 部件的区域中，单击"添加 Web 部件"。
在"类别"列表中单击"业务数据"。
单击"Visio Web Access"，然后单击"添加"。
单击"Web 部件菜单"旁边的箭头，然后单击"编辑 Web 部件"。
键入要打开的 Web 绘图（.vdw 文件）的 URL，然后单击"确定"。
向 Web 部件页添加内容编辑器 Web 部件
内容编辑器 Web 部件有两项用途：保存您的 JavaScript 代码；提供显示和控制界面，通过此界面您可以实时地与 Visio Web Access Web 部件中的 .vdw 文件进行交互。
向 Web 部件页添加内容编辑器 Web 部件
如果网页尚未处于编辑模式，请在 SharePoint Server 2010 Web 部件页的服务器功能区上，单击"编辑网页"。
在要放置内容编辑器 Web 部件的区域中，单击"添加 Web 部件"。
在"类别"列表中单击"媒体和内容"。
在"Web 部件"列表中，单击"内容编辑器"，然后单击"添加"。
单击"内容编辑器 Web 部件菜单"旁边的箭头，然后单击"编辑 Web 部件"。
键入要打开的 .js 文件的 URL，然后单击"确定"。
在功能区上单击"停止编辑"。
Visio Services ECMAScript API
利用 Visio Services中的 JavaScript 对象模型，可以以编程方式访问 Visio Web Access Web 部件中显示为 .vdw 文件的 Visio 绘图。通过使用 Visio ServicesJavaScript 对象模型，可以访问形状数据、超链接和形状边界框坐标。还可以执行以下操作：创建面向特定图表页的混合 Web 应用程序，选择并突出显示形状，将标记贴置于图表上，响应鼠标事件以及更改视区的平移和缩放属性。（混合 Web 应用程序是一类使您能够将多个源中的功能或数据组合为单一集成服务、应用程序或媒体的应用程序。）
与许多 JavaScript API 一样，Visio Services ECMAScript API 是基于事件的。若要对 Visio Web Access Web 部件进行编程，则编写可调用函数的处理程序以响应该图表中引发的事件。
Visio Services ECMAScript API 中的对象
Visio ServicesJavaScript API 只包含四个对象及其各自的成员：
此外，Visio ServicesJavaScript API 还包含四个枚举：
VwaControl 对象
VwaControl 对象表示一个 Visio Web Access Web 部件实例。通过使用 VwaControl 对象的方法，可以访问有关该 Web 部件以及该 Web 部件中呈现的 Visio 绘图的信息。此外，还可以使用这些方法执行各种操作，如在 Web 部件中打开 Visio 文档、获取和设置要显示的活动页、添加或删除事件处理程序以及显示或隐藏自定义消息。
在 JavaScript 代码中，可通过将处理程序附加到 ASP.NET AJAX Sys.Application 类的 load 事件来获取对 VwaControl 对象的引用。在实现该处理程序的函数中，可通过将要承载该对象的 Visio Web Access Web 部件的 HTML 标识符 (ID) 传递给该对象来初始化该对象。通过检查承载 Web 部件的 HTML 页的源代码并搜索 class="VisioWebAccess" 短语，可以获取此 ID。此 ID 的格式为"WebPartWPQ*#*"，其中 # 表示 Web 部件的标识号。以下代码示例演示如何执行该操作。此示例假定您确定 Web 部件 ID 为 WebPartWPQ3 且已在 Web 部件中打开发布为 .vdw 文件的 Visio 绘图。
Sys.Application.add_load(onApplicationLoad)
var webPartElementID = "WebPartWPQ3";
var vwaControl;
function onApplicationLoad() {
try{
vwaControl= new Vwa.VwaControl(webPartElementID)
vwaControl.addHandler("diagramcomplete", onDiagramComplete);
}
catch(err){
}
}
在获取对 VwaControl 对象实例的引用时，可使用其 openDiagram 方法在 Visio Web Access Web 部件中打开基于发布的 Visio .vdw 文件的新图表。但在调用 openDiagram 方法后，将无法满足同一 VwaControl 实例或 Vwa 命名空间中的任何其他对象的要求。这是因为 openDiagram 方法是一个异步操作，它会在服务器上打开图表并立即返回。此外，该异步操作还会使当前 VwaControl 对象无效。有关信息，请参阅 openDiagram。
跟踪对 openDiagram 的调用的最佳方法是，为 diagramcomplete 创建一个处理程序（此操作在 Visio Web Access Web 部件加载完 Visio 图表时执行）并将代码放入该事件处理程序中。可使用 addHandler 为 diagramcomplete 事件添加事件处理程序。最佳做法是，通过编写这些事件处理程序以响应控件中由用户操作引发的事件，来对 VwaControl 对象进行编程。由 VwaControl 对象公开的其他事件包括 shapemouseenter、shapemouseleave 和 shapeselectionchanged，这些事件允许您响应用户鼠标操作；还包括 diagramerror，该事件允许您响应 SharePoint Server 2010 返回的错误。
在 diagramcomplete 事件的处理程序中，可获取对 API 所公开的其他对象的引用，包括 Page 对象和 Shape 对象以及 ShapeCollection 集合。在同一处理程序中，还可以为其他事件创建处理程序，如以下代码示例所示。
function onDiagramComplete() {
try {
vwaPage = vwaControl.getActivePage();
vwaShapes = vwaPage.getShapes();
vwaShape = vwaShapes.getItemAtIndex(0);
vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);
}
catch(err) {
}
}
此代码示例演示如何完成以下编程任务：
如何使用 getActivePage 获取对表示活动页的 Page 对象实例的引用。
如何使用 Page 对象的 getShapes 获取表示活动页上的形状集合的 ShapeCollection 集合实例。
如何使用该集合的 getItemAtIndex 获取活动页上形状集合中的第一个形状实例。
如何为 shapeselectionchanged 事件添加处理程序。
若要获取有关 Web 部件中显示的绘图的详细信息，可使用 VwaControl 对象的多个方法。例如，可使用 getAllPageIds 获取图表中包含的所有页的名称。可使用 getDiagramUrl 获取当前显示在 Web 部件中的图表的 URL，并可使用 getDisplayMode 确定当前 Web 绘图页是使用光栅技术还是 Microsoft Silverlight 技术显示的。此外，还可使用 getVersion 获取 Web 部件的版本。
利用 removeHandler 可删除添加的事件处理程序，而利用 clearHandlers 可删除所有处理程序。若要显示和隐藏自定义 HTML 错误消息页，请使用 displayCustomMessage 和 hideCustomMessage。此外，可使用 setActivePage 更改当前显示在 Web 部件中的页，并可使用 refreshDiagram 刷新带服务器数据的当前 Web 绘图页。
Page 对象
Page 对象表示当前显示在 Visio Web Access Web 部件的呈现区域中的活动 Web 绘图页。可使用 Page 对象的方法选择该页上的形状并访问有关这些形状的信息，包括形状的 ID、形状的位置以及形状边界框的大小。您还可获取和设置页面在视图中的缩放级别和位置。
Page 对象的方法包括：
除上一代码示例中显示的 getShapes 方法之外，还可使用 getSelectedShape、setSelectedShape、centerViewOnShape 和 isShapeInView 访问有关该页上的形状的信息并与这些形状进行交互。
利用 getPosition 可在视图中获取页的位置，而利用 setPosition 可在视图中设置页的位置。
ShapeCollection 对象
ShapeCollection 对象表示当前显示在 Visio Web Access Web 部件的呈现区域中的 Web 绘图的活动页上的形状对象集合。
ShapeCollection 对象的方法包括：
getCount，可返回活动页上的形状数。
四个方法，可用于按 Visio 形状名称 (getItemByName)、Web 绘图形状 ID (getItemById)、Visio 唯一 ID (getItemByGUID) 和集合 (getItemAtIndex) 中的索引位置获取集合中的特定形状。
Shape 对象
Shape 对象表示活动 Web 绘图页上的单个形状。利用 Shape 对象的方法，可以获取有关活动页上某个特定形状的信息并与该形状进行交互：
提供形状信息的方法包括：getName，此方法可返回 Visio 中的形状名称；getId，此方法可返回 Web 绘图内的形状 ID；getGUID，此方法可返回 Visio 中的形状 GUID；getHyperlinks，此方法可返回与形状相关的任何超链接的数组；getBounds，此方法可返回形状的边界框的位置、高度和宽度；getShapeData，此方法可返回与形状关联的任何形状数据项的数组。
允许您与形状进行交互的方法包括：addHighlight 和 removeHighlight，二者允许您添加和删除与形状关联的突出显示；addOverlay、addPredefinedOverlay 和 removeOverlay，这些方法允许您添加和删除可视形状贴。
SharePoint 2010 SDK 中的示例
SharePoint 2010 SDK 下载文件（SharePoint 2010 参考：软件开发工具包（该链接可能指向英文页面））提供了三个示例 JavaScript 文件，它们演示对 Visio Web Access Web 部件进行编程的最佳实践，可以将这些文件用于自己的 Web 部件页。每个示例在 SDK 中都有一个对应的主题，用于说明如何使用该示例，并且每个示例文件中的代码都包含大量说明性注释。若要下载 SharePoint 2010 SDK（包括这些示例），请参阅 SharePoint 2010 参考：软件开发工具包（该链接可能指向英文页面）。安装 SDK 后，可以按照以下路径在压缩 (.zip) 文件格式中查找这些示例：C:\Program Files (x86)\Microsoft SDKs\SharePoint Server 2010\Samples\Visio Services。
"批注"示例
"批注"示例演示如何通过两种方式为 Web 绘图页添加批注：使用形状覆盖和形状突出显示。在内容编辑器 Web 部件中，示例代码添加四个列表控件，这些控件使用户能够选择批注的绘图参数。它还添加一个按钮，该按钮允许用户提交其选择并绘制批注。
"自定义错误消息"示例
"自定义错误消息"示例演示如何使用 Visio Web Access Web 部件显示或隐藏自定义 HTML 错误消息。它为代码示例创建包含两个文本框和两个按钮的用户界面，文本框用于捕获错误消息标题和正文，按钮用于显示或隐藏错误消息。
"鼠标交互"示例
"鼠标交互"示例演示如何为与鼠标相关的各种 Visio Web Access 事件声明事件处理程序，以及发生这些事件时如何对其进行处理。它显示在内容编辑器 Web 部件中发生的鼠标操作（如进入形状、离开形状或更改所选形状）的通知。