Настройка веб-документов Visio в веб-части Visio Web Access

Статья
09/18/2014

Дата последнего изменения: 3 декабря 2013 г.

Применимо к: SharePoint Server 2010

В этой статье
Начальные сведения о программировании веб-частей Visio Web Access
Создание страницы веб-частей
Добавление веб-части Visio Web Access на страницу веб-частей
Добавление веб-части редактора контента на страницу веб-частей
Интерфейс API ECMAScript служб Visio
Объекты в интерфейсе API ECMAScript служб Visio
Примеры в пакете SharePoint 2010 SDK

В Visio в Microsoft SharePoint Server 2010 можно загружать, отображать и программно взаимодействовать с документами Microsoft Visio 2010, размещенными в экземпляре веб-части Visio Web Access на странице Microsoft SharePoint Server 2010.

В этой статье приведены сведения о том, как добавить веб-часть Visio Web Access на страницу веб-частей SharePoint Server 2010, отобразить веб-документ Visio в веб-части и взаимодействовать с этим документом программно с помощью интерфейса API VisioJavaScript.

Начальные сведения о программировании веб-частей Visio Web Access

Чтобы пользовательское решение могло программно взаимодействовать с веб-документом Visio на странице веб-частей SharePoint Server 2010, необходимо добавить веб-часть Visio Web Access на страницу, открыть документ Visio, опубликованный как файл WDW в веб-части, и добавить веб-часть редактора контента на страницу, содержащую пользовательский код ECMAScript (JavaScript, JScript).

Для выполнения этой процедуры необходимы права администратора, соответствующие правам автора страницы в SharePoint Server 2010.

Начало работы по программированию веб-части Visio Web Access

Создайте в Visio документ, который необходимо отобразить, и сохраните его в библиотеке документов SharePoint как файл WDW.
Создайте файл JavaScript (JS) c кодом, который необходимо использовать для взаимодействия с веб-документом, и сохраните его в той же библиотеке документов, в которой сохранен файл WDW.
Создайте страницу веб-частей SharePoint Server 2010 для отображения документа и размещения кода.
Добавьте веб-часть Visio Web Access на страницу и отобразите веб-документ в веб-части.
Добавьте веб-часть редактора контента на страницу и свяжите ее с файлом JavaScript, созданным ранее.
Обновите страницу в браузере.

В следующих разделах представлены более подробные сведения о некоторых из этих действий. В них можно найти сведения о публикации документов Visio в качестве файлов WDW в справке по Visio. Файл JavaScript можно создать в Microsoft Visual Studio 2010 или в другом редакторе текста или кода.

Примечание
В Интернете доступно множество книг и статей, представляющих общие принципы кодирования в JavaScript, которое не рассматривается в данной статье.

Создание страницы веб-частей

После публикации документа Visio в качестве файла WDW, его сохранения в библиотеке документов, а также создания файла JavaScript (JS) и его сохранения в той же библиотеке необходимо создать страницу веб-частей.

Создание страницы веб-частей

На сайте SharePoint, на котором необходимо разместить документ, в меню Действия сайта щелкните Дополнительные параметры.
В узле Страницы и сайты щелкните Страница веб-части.
На новой странице веб-части введите имя файла для этой страницы в поле Имя.
Выберите шаблон макета и расположение, в котором необходимо сохранить файл страницы, и щелкните Создать.

Добавление веб-части Visio Web Access на страницу веб-частей

Прежде чем станет возможным программное взаимодействие с веб-документом на странице веб-частей SharePoint Server 2010, необходимо добавить веб-часть Visio Web Access в созданную страницу веб-частей и открыть документ Visio, опубликованный в веб-части как VDW-файл.

Добавление веб-части Visio Web Access на страницу веб-частей

В разделе ленты сервера на странице веб-частей SharePoint Server 2010 нажмите кнопку Изменить страницу.
В зоне, в которую требуется поместить веб-часть, щелкните Добавить веб-часть.
В списке Категории выберите Бизнес-данные.
Выберите Visio Web Access и нажмите кнопку Добавить.
Щелкните стрелку рядом с элементом Меню веб-части, а затем выберите Изменить веб-часть.
Введите URL-адрес веб-документа (VDW-файла), который требуется открыть, и нажмите кнопку ОК.

Добавление веб-части редактора контента на страницу веб-частей

Веб-часть редактора контента выполняет две задачи: содержит код JavaScript и предоставляет интерфейс отображения и управления, который позволяет в режиме реального времени взаимодействовать с VDW-файлом в веб-части Visio Web Access.

Добавление веб-части редактора контента на страницу веб-частей

Если страница еще не находится в режиме редактирования, в разделе ленты сервера на странице веб-частей SharePoint Server 2010 щелкните Изменить страницу.
В зоне, в которую требуется поместить веб-часть редактора контента, щелкните Добавить веб-часть.
В списке Категории выберите Среда и контент.
В списке Веб-части выберите Редактор контента и нажмите кнопку Добавить.
Щелкните стрелку рядом с элементом Меню веб-части редактора контента, затем выберите Изменить веб-часть.
Введите URL-адрес JS-файла, который требуется открыть, затем нажмите кнопку ОК.
На ленте щелкните Завершить редактирование.

Интерфейс API ECMAScript служб Visio

Объектная модель JavaScript в Visio предоставляет пользователю программный доступ к документам Visio, отображаемым как файлы WDW в веб-части Visio Web Access. С помощью объектной модели VisioJavaScript можно получить доступ к данным фигуры, гиперссылкам и координатам ограничивающего прямоугольника фигуры. Также можно создавать гибридные веб-приложения, нацеленные на указанные страницы диаграммы, выбирать и выделять фигуры, помещать на диаграмму слои исправлений, реагировать на события мыши и изменять свойства прокрутки и масштабирования окна просмотра. (Гибридное веб-приложение — это приложение, которое позволяет свести функции и данные из нескольких источников в единую интегрированную службу, приложение или среду.)

Как и многие другие интерфейсы API JavaScript, интерфейс API ECMAScript Visio основан на событиях. Для программирования веб-части Visio Web Access пользователь создает обработчики, которые вызывают функции в ответ на события, происходящие на диаграмме.

Объекты в интерфейсе API ECMAScript служб Visio

API-интерфейс VisioJavaScript содержит только четыре объекта и их члены:

Кроме того, API-интерфейс VisioJavaScript содержит четыре перечисления:

Объект VwaControl

Объект VwaControl представляет экземпляр веб-части Visio Web Access. С помощью методов объекта VwaControl пользователь может получить доступ к сведениям о веб-части и о веб-документе, отображенном в веб-части. Кроме того, с помощью этих методов можно выполнять различные действия, например открытие документа Visio в веб-части, получение и задание отображаемой активной страницы, добавление или удаление обработчиков событий и отображение или скрытие настраиваемых сообщений.

В коде JavaScript можно получить ссылку на объект VwaControl, присоединив обработчик к событию load класса Sys.Application ASP.NET AJAX. В функции, реализующей такой обработчик, можно инициализировать этот объект, передав в нее идентификатор HTML веб-части Visio Web Access, в которой необходимо разместить объект. Этот идентификатор можно получить, открыв исходный код HTML-страницы, на которой размещена веб-часть, и выполнив поиск по фразе class="VisioWebAccess". Идентификатор представлен в формате "WebPartWPQ*#*", где # представляет номер, идентифицирующий веб-часть. В следующем примере кода показано, как это сделать. Предполагается, что пользователь определил идентификатор веб-части как WebPartWPQ3 и открыл документ Visio, опубликованный в веб-части как файл WDW.

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 WDW-файла Visio. Однако после вызова метода openDiagram невозможно обратиться к тому же экземпляру объекта VwaControl или другого объекта в пространстве имен Vwa. Это обусловлено тем, что метод openDiagram является асинхронной операцией, которая открывает диаграмму на сервере и немедленно возвращается. Кроме того, асинхронная операция делает текущий объект VwaControl недействительным. Дополнительные сведения см. в статье Vwa.VwaControl.openDiagram Method.

Для отслеживания вызовов openDiagram рекомендуется создать обработчик события Vwa.diagramcomplete Event, которое возникает, когда веб-часть Visio Web Access завершает загрузку документа Visio, и поместить свой код в этот обработчик. Для добавления обработчика события diagramcomplete можно использовать метод Vwa.VwaControl.addHandler Method. Рекомендуется программировать объект VwaControl, создавая такие обработчики для событий, вызываемых действиями пользователя в элементе управления. К другим событиям, предоставляемым объектом VwaControl, относятся Vwa.shapemouseenter Event, Vwa.shapemouseleave Event и Vwa.shapeselectionchanged Event, которые позволяют реагировать на действия пользователя с мышью, а также Vwa.diagramerror Event, которое позволяет реагировать на ошибки, возвращаемые 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) {
        }
}

В этом примере кода показано, как выполнить следующие задачи программирования:

Как использовать метод Vwa.VwaControl.getActivePage Method для получения ссылки на экземпляр объекта Page, представляющего активную страницу.
Как использовать метод Vwa.Page.getShapes Method объекта Page для получения экземпляра коллекции ShapeCollection, представляющей коллекцию фигур на активной странице.
Как использовать метод Vwa.ShapeCollection.getItemAtIndex Method этой коллекции для получения экземпляра первой фигуры в коллекции фигур на активной странице.
Как добавить обработчик события shapeselectionchanged.

Для получения дополнительных сведений о документе, отображаемом в веб-части, можно использовать ряд методов объекта VwaControl. Например, метод Vwa.VwaControl.getAllPageIds Method используется для получения имен всех страниц в документе. Метод Vwa.VwaControl.getDiagramUrl Method позволяет получить URL-адрес документа, отображаемого в настоящий момент в веб-части, а метод Vwa.VwaControl.getDisplayMode Method определяет, отображается ли текущая страница веб-документа в растровом режиме Microsoft Silverlight. Метод Vwa.VwaControl.getVersion Method также можно использовать для получения версии веб-части.

Метод Vwa.VwaControl.removeHandler Method позволяет удалить добавленный обработчик события, а метод Vwa.VwaControl.clearHandlers Method удаляет все обработчики. Для отображения и скрытия настраиваемых HTML-страниц сообщений об ошибках используйте методы Vwa.VwaControl.displayCustomMessage Method и Vwa.VwaControl.hideCustomMessage Method. Также можно использовать метод Vwa.VwaControl.setActivePage Method для изменения текущей отображаемой страницы в веб-части, и метод Vwa.VwaControl.refreshDiagram Method — для обновления текущей страницы веб-документа данными с сервера.

Объект Page

Объект Page представляет активную страницу веб-документа, отображаемую в текущий момент в соответствующей области веб-части Visio Web Access. Методы объекта Page можно использовать для выбора фигур на странице и доступа к сведениям о фигурах, включая идентификатор и положение фигуры, а также размер ограничивающего прямоугольника вокруг фигуры. Также можно получить и задать масштаб и положение страницы в представлении.

Методы объекта Page:

В дополнение к методу getShapes, показанному в предыдущем примере кода, методы Vwa.Page.getSelectedShape Method, Vwa.Page.setSelectedShape Method, Vwa.Page.centerViewOnShape Method и Vwa.Page.isShapeInView Method позволяют обращаться к сведениям о фигурах на странице и взаимодействовать с ними.
Метод Vwa.Page.getZoom Method позволяет определить масштаб страницы, а метод Vwa.Page.setZoom Method позволяет задать масштаб страницы.
Метод Vwa.Page.getPosition Method позволяет получить положение страницы в представлении, а метод Vwa.Page.setPosition Method позволяет задать положение страницы в представлении.
Метод Vwa.Page.getId Method возвращает идентификатор отображаемой в настоящий момент страницы, а метод Vwa.Page.getSize Method возвращает высоту и ширину отображаемой страницы.

Объект ShapeCollection

Объект ShapeCollection представляет коллекцию объектов фигур на активной странице в веб-документе, который в настоящий момент отображается в соответствующей области веб-части Visio Web Access.

Методы объекта ShapeCollection:

Метод Vwa.ShapeCollection.getCount Method, который возвращает число фигур на активной странице.
Четыре метода, которые позволяют получить конкретные фигуры в коллекции по их именам в Visio (Vwa.ShapeCollection.getItemByName Method), их идентификаторам в веб-документе (Vwa.ShapeCollection.getItemById Method), их уникальным идентификаторам в Visio (Vwa.ShapeCollection.getItemByGuid Method) и их порядковой позиции в коллекции (Vwa.ShapeCollection.getItemAtIndex Method).

Объект Shape

Объект Shape представляет одну фигуру на активной странице веб-документе. Методы объекта Shape позволяют получать сведения о конкретной фигуре на активной странице и взаимодействовать с ней:

К методам, предоставляющим сведения о фигуре, относятся Vwa.Shape.getName Method, который возвращает имя фигуры в Visio; Vwa.Shape.getId Method, который возвращает идентификатор фигуры в веб-документе; Vwa.Shape.getGuid Method, который возвращает идентификатор GUID фигуры в Visio; Vwa.Shape.getHyperlinks Method, который возвращает массив любых гиперссылок, связанных с фигурой; Vwa.Shape.getBounds Method, который возвращает положение, высоту и ширину ограничивающего прямоугольника фигуры, и Vwa.Shape.getShapeData Method, который возвращает массив всех элементов данных фигуры, связанных с ней.
К методам, позволяющим взаимодействовать с фигурой, относятся Vwa.Shape.addHighlight Method и Vwa.Shape.removeHighlight Method, которые позволяют добавлять и удалять выделения, связанные с фигурой; и Vwa.Shape.addOverlay Method, Vwa.Shape.addPredefinedOverlay Method и Vwa.Shape.removeOverlay Method, которые позволяют добавлять и удалять визуальные перекрытия фигур.

Примеры в пакете SharePoint 2010 SDK

В загружаемом файле SDK SharePoint 2010 (Справочник SharePoint 2010: пакет SDK (Возможно, на английском языке)) представлены три примера файлов JavaScript, которые иллюстрируют рекомендации по программированию веб-части Visio Web Access и которые пользователь может использовать на собственных страницах веб-частей. Каждому примеру соответствует отдельный раздел в пакете SDK, в котором описывается его использование и приведен код соответствующего файла с подробными комментариями. Чтобы загрузить файл SDK SharePoint 2010, содержащий эти примеры, перейдите на страницу Справочник SharePoint 2010: пакет SDK (Возможно, на английском языке). После установки пакета SDK файлы примеров можно найти в сжатом файле (ZIP), расположенном в следующем пути: C:\Program Files (x86)\Microsoft SDKs\SharePoint Server 2010\Samples\Visio Services.

Пример аннотаций

В примере аннотаций показаны два способа добавления аннотаций на веб-страницу документа: с использованием перекрытия и выделения фигур. В веб-части "Редактор контента" этот пример кода добавляет четыре элемента управления списками, с помощью которых пользователи могут выбирать параметры отображения аннотаций. Также добавляется кнопка для отправки выбранных параметров и отображения аннотации.

Пример настраиваемых сообщений об ошибках

В этом примере показано использование веб-части Visio Web Access для отображения и скрытия настраиваемых сообщений об ошибках HTML. В этом примере создается пользовательский интерфейс, содержащий два текстовых поля для ввода заголовка и текста сообщения об ошибке, а также две кнопки для отображения или скрытия сообщений.

Пример работы с мышью

В этом примере показано объявление обработчиков событий для различных событий мыши Visio Web Access, а также порядок обработки таких событий при их возникновении. В этом примере отображаются уведомления о действиях мыши, выполняемых в веб-части "Редактор контента", таких как вход в фигуру и выход из нее, а также изменение выбранной фигуры.