Anpassen von Visio-Webzeichnungen im Visio Web Access-Webpart

Artikel
09/18/2014

Letzte Änderung: Dienstag, 3. Dezember 2013

Gilt für: SharePoint Server 2010

Inhalt dieses Artikels
Erste Schritte beim Programmieren des Visio Web Access-Webparts
Erstellen einer Webparts-Seite
Hinzufügen eines Visio Web Access-Webparts zur Webpartseite
Hinzufügen eines Inhalts-Editor-Webparts zur Webpartseite
Visio Services ECMAScript-API
Objekte in der Visio Services ECMAScript-API
Beispiele im SharePoint 2010 SDK

Mit Visio Services in Microsoft SharePoint Server 2010 können Sie Microsoft Visio 2010-Dokumente, die in einer Instanz des Visio Web Access-Webparts auf einer Microsoft SharePoint Server 2010-Seite gehostet werden, laden und anzeigen und programmgesteuert mit ihnen interagieren.

Dieser Artikel bietet Informationen dazu, wie Sie einer SharePoint Server 2010-Webparts-Seite ein Visio Web Access-Webpart hinzufügen, eine Visio-Webzeichnung in dem Webpart anzeigen und mithilfe der Visio ServicesJavaScript-API programmgesteuert mit dieser Zeichnung interagieren.

Erste Schritte beim Programmieren des Visio Web Access-Webparts

Damit Ihre Lösung programmgesteuert mit einer Visio-Webzeichnung auf einer SharePoint Server 2010-Webparts-Seite interagieren kann, müssen Sie der Seite ein Visio Web Access-Webpart hinzufügen, eine als VDW-Datei veröffentlichte Visio-Zeichnung in dem Webpart öffnen und der Seite ein Inhalts-Editor-Webpart hinzufügen, das den ECMAScript (JavaScript, JScript)-Code enthalten wird.

Bei diesem Verfahren wird davon ausgegangen, dass Sie über die entsprechenden Administratorrechte als Seitendesigner in SharePoint Server 2010 verfügen.

So führen Sie die ersten Schritte beim Programmieren des Visio Web Access-Webparts aus

Erstellen Sie in Visio die Zeichnung, die angezeigt werden soll, und speichern Sie sie als VDW-Datei in einer SharePoint-Dokumentbibliothek.
Erstellen Sie die JavaScript-Datei (JS-Datei), die den Code enthält, über den die Interaktion mit der Webzeichnung erfolgen soll, und speichern Sie sie in der gleichen Dokumentbibliothek, in der sich auch die VDW-Datei befindet.
Erstellen Sie eine SharePoint Server 2010-Webparts-Seite, auf der die Zeichnung angezeigt wird und die den Code enthalten soll.
Fügen Sie der Seite ein Visio Web Access-Webpart hinzu, und zeigen Sie die Webzeichnung in dem Webpart an.
Fügen Sie der Seite ein Inhalts-Editor-Webpart hinzu, und verknüpfen Sie es mit der zuvor erstellten JavaScript-Datei.
Aktualisieren Sie die Seite im Browser.

In den folgenden Abschnitten werden einige dieser Schritte ausführlicher erläutert. Informationen zum Veröffentlichen von Visio-Zeichnungen als VDW-Dateien finden Sie zudem in der Visio-Hilfe. Sie können eine JavaScript-Datei in Microsoft Visual Studio 2010 oder in einem beliebigen anderen Text- oder Code-Editor erstellen.

Hinweis
Daneben sind zahlreiche Bücher und Onlineartikel erhältlich, in denen Sie allgemeine Richtlinien für das Codieren in JavaScript finden, die den Rahmen dieses Artikels jedoch sprengen würden.

Erstellen einer Webparts-Seite

Nachdem Sie die Visio-Zeichnung als VDW-Datei veröffentlicht und in einer Dokumentbibliothek gespeichert und die JavaScript-Datei (JS-Datei) erstellt und in der gleichen Bibliothek gespeichert haben, erstellen Sie als Nächstes eine Webparts-Seite.

So erstellen Sie eine Webparts-Seite

Klicken Sie auf der SharePoint-Website, auf der Sie die Zeichnung bereitstellen möchten, im Menü Websiteaktionen auf Weitere Optionen.
Klicken Sie unter Seiten und Websites auf Webpartseite.
Geben Sie auf der Seite Neues Webpart im Feld Name einen Dateinamen für die Seite ein.
Wählen Sie eine Layoutvorlage und den Speicherort aus, an dem Sie die Seitendatei speichern möchten, und klicken Sie auf Erstellen.

Hinzufügen eines Visio Web Access-Webparts zur Webpartseite

Bevor programmgesteuert mit einer Webzeichnung auf einer SharePoint Server 2010-Webpartseite interagiert werden kann, müssen Sie der von Ihnen erstellten Webpartseite ein Visio Web Access-Webpart hinzufügen und eine Visio-Zeichnung öffnen, die als VDW-Datei in dem Webpart veröffentlicht wurde.

So fügen Sie einer Webpartseite ein Visio Web Access-Webpart hinzu

Klicken Sie in Menüband für die Serverkomponente auf der SharePoint Server 2010-Webpartseite auf Seite bearbeiten.
Klicken Sie in der Zone, in der Sie das Webpart platzieren möchten, auf Webpart hinzufügen.
Klicken Sie in der Liste Kategorien auf Geschäftsdaten.
Klicken Sie auf Visio Web Access und dann auf Hinzufügen.
Klicken Sie auf den Pfeil neben Webpart-Menü, und klicken Sie dann auf Webpart bearbeiten.
Geben Sie die URL der Webzeichnung (VDW-Datei) ein, die Sie öffnen möchten, und klicken Sie dann auf OK.

Hinzufügen eines Inhalts-Editor-Webparts zur Webpartseite

Das Inhalts-Editor-Webpart hat folgende zwei Zwecke: es enthält den JavaScript-Code, und es stellt eine Anzeige- und Steuerungsschnittstelle bereit, über die Sie in Echtzeit mit der VDW-Datei im Visio Web Access-Webpart interagieren können.

So fügen Sie einer Webpartseite ein Inhalts-Editor-Webpart hinzu

Wenn sich die Seite noch nicht im Bearbeitungsmodus befindet, klicken Sie auf dem Menüband für die Serverkomponente auf der SharePoint Server 2010-Webpartseite auf Seite bearbeiten.
Klicken Sie in der Zone, in der Sie das Inhalts-Editor-Webpart platzieren möchten, auf Webpart hinzufügen.
Klicken Sie in der Liste Kategorien auf Medien und Inhalt.
Klicken Sie in der Liste Webparts auf Inhalts-Editor, und klicken Sie dann auf Hinzufügen.
Klicken Sie auf den Pfeil neben Inhalts-Editor-Webpart-Menü, und klicken Sie dann auf Webpart bearbeiten.
Geben Sie die URL der zu öffnenden JS-Datei ein, und klicken Sie dann auf OK.
Klicken Sie auf dem Menüband auf Bearbeitung beenden.

Visio Services ECMAScript-API

Mit dem JavaScript-Objektmodell in Visio Services haben Sie programmgesteuerten Zugriff auf Visio-Zeichnungen, die im Visio Web Access-Webpart als VDW-Dateien angezeigt werden. Sie können mithilfe des Visio ServicesJavaScript-Objektmodells auf Shape-Daten, Hyperlinks und Koordinaten von umgebenden Feldern von Shapes zugreifen. Darüber hinaus können Sie Mashups für spezielle Diagrammseiten erstellen, Shapes auswählen und hervorheben, Markupüberlagerungen auf dem Diagramm platzieren, auf Mausereignisse reagieren und die Verschiebe- und Zoomeigenschaften des Viewports ändern. (Ein Mashup ist eine Anwendung, mit der Sie Funktionen oder Daten aus mehreren Quellen in einem einzigen integrierten Dienst, einer Anwendung oder einem Medium zusammenfassen können.)

Wie viele JavaScript-APIs ist die Visio Services ECMAScript-API ereignisbasiert. Zum Programmieren des Visio Web Access-Webparts schreiben Sie Handler, die als Antwort auf im Diagramm ausgelöste Ereignisse Funktionen aufrufen.

Objekte in der Visio Services ECMAScript-API

Die Visio ServicesJavaScript-API enthält nur vier Objekte und deren Elemente:

Außerdem enthält die Visio ServicesJavaScript-API vier Aufzählungen:

"VwaControl"-Objekt

Das VwaControl-Objekt stellt eine Instanz des Visio Web Access-Webparts dar. Mithilfe der Methoden des VwaControl-Objekts können Sie auf Informationen über das Webpart und die in dem Webpart gerenderte Visio-Zeichnung zugreifen. Zudem können Sie mithilfe dieser Methoden verschiedene Aktionen ausführen, z. B. ein Visio-Dokument im Webpart öffnen, die angezeigte aktive Seite abrufen und festlegen, Ereignishandler hinzufügen oder löschen und benutzerdefinierte Meldungen anzeigen oder verbergen.

Im JavaScript-Code können Sie einen Verweis auf das VwaControl-Objekt abrufen, indem Sie einen Handler an das load-Ereignis der Sys.Application-Klasse von ASP.NET AJAX anhängen. In der Funktion, mit dem dieser Handler implementiert wird, können Sie das Objekt initialisieren, indem Sie den HTML-Bezeichner (ID) des Visio Web Access-Webparts, von dem das Objekt gehostet werden soll, an das Objekt übergeben. Sie können diese ID abrufen, indem Sie den Quellcode der HTML-Seite untersuchen, die das Webpart hostet, und nach dem Ausdruck class="VisioWebAccess" suchen. Die ID liegt im Format "WebPartWPQ*#*" vor, wobei # die Identifizierungsnummer des Webparts ist. Im folgenden Codebeispiel wird gezeigt, wie Sie dazu vorgehen müssen. Es wird davon ausgegangen, dass Sie festgestellt haben, dass die Webpart-ID WebPartWPQ3 lautet und dass Sie eine im Webpart als VDW-Datei veröffentlichte Visio-Zeichnung geöffnet haben.

Sys.Application.add_load(onApplicationLoad)

var webPartElementID = "WebPartWPQ3";
var vwaControl;

function onApplicationLoad() {
        try{
                vwaControl= new Vwa.VwaControl(webPartElementID)
                vwaControl.addHandler("diagramcomplete", onDiagramComplete);
        }
        catch(err){
        }
}

Wenn Sie einen Verweis auf eine Instanz des VwaControl-Objekts abrufen, können Sie dessen openDiagram-Methode verwenden, um im Visio Web Access-Webpart ein neues Diagramm zu öffnen, das auf einer veröffentlichten VDW-Datei basiert. Sie können jedoch nicht im Anschluss an das Aufrufen der openDiagram-Methode die gleiche Instanz des VwaControl-Objekts oder eines anderen Objekts im Vwa-Namespace adressieren. Der Grund hierfür ist, dass die openDiagram-Methode ein asynchroner Vorgang ist, der das Diagramm auf dem Server öffnet und dann sofort zurückkehrt. Darüber hinaus macht der asynchrone Vorgang das aktuelle VwaControl-Objekt auch ungültig. Weitere Informationen finden Sie unter Vwa.VwaControl.openDiagram Method.

Ein Aufruf von openDiagram wird am besten bearbeitet, indem ein Handler für Vwa.diagramcomplete Event erstellt wird. Dieses Ereignis tritt auf, wenn das Visio-Diagramm vom Visio Web Access-Webpart fertig geladen und der Code im Ereignishandler abgelegt wurde. Mithilfe von Vwa.VwaControl.addHandler Method können Sie einen Ereignishandler für das diagramcomplete-Ereignis hinzufügen. Es hat sich bewährt, beim Programmieren des VwaControl-Objekts Ereignishandler für die durch Benutzeraktionen im Steuerelement ausgelösten Ereignisse vorzusehen. Das VwaControl-Objekt macht u. a. folgende andere Ereignisse verfügbar: Vwa.shapemouseenter Event, Vwa.shapemouseleave Event und Vwa.shapeselectionchanged Event, um auf Mausaktionen des Benutzers zu reagieren, sowie Vwa.diagramerror Event, um auf Fehlermeldungen von SharePoint Server 2010 zu reagieren.

Im Handler für das diagramcomplete-Ereignis können Sie Verweise auf die anderen von der API verfügbar gemachten Objekte abrufen, u. a. für das Page-Objekt und das Shape-Objekt sowie die ShapeCollection-Auflistung. Im selben Handler können sich auch Handler für andere Ereignisse erstellen, wie im folgenden Codebeispiel illustriert.

function onDiagramComplete() {
        try {
                vwaPage = vwaControl.getActivePage();
                vwaShapes = vwaPage.getShapes();
                vwaShape = vwaShapes.getItemAtIndex(0);
                vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);
        }
        catch(err) {
        }
}

Im obigen Codebeispiel wird veranschaulicht, wie Sie die folgenden Programmieraufgaben ausführen:

Verwenden von Vwa.VwaControl.getActivePage Method zum Abrufen eines Verweises auf eine Instanz des Page-Objekts, die die aktive Seite darstellt.
Verwenden der Vwa.Page.getShapes Method-Methode des Page-Objekts zum Abrufen einer Instanz der ShapeCollection-Auflistung, die die Auflistung von Shapes auf der aktiven Seite darstellt.
Verwenden der Vwa.ShapeCollection.getItemAtIndex Method-Methode dieser Auflistung zum Abrufen einer Instanz des ersten Shapes in der Auflistung von Shapes auf der aktiven Seite.
Hinzufügen eines Handlers für das shapeselectionchanged-Ereignis.

Weitere Informationen zu der Zeichnung, die im Webpart angezeigt wird, können Sie mit mehreren Methoden des VwaControl-Objekts abrufen. Beispielsweise können Sie mit Vwa.VwaControl.getAllPageIds Method die Namen aller im Diagramm enthaltenen Seiten abrufen. Mit Vwa.VwaControl.getDiagramUrl Method erhalten Sie die URL des aktuell im Webpart sichtbaren Diagramms, und mit Vwa.VwaControl.getDisplayMode Method ermitteln Sie, ob die aktuelle Webzeichnungsseite mit der Raster- oder der Microsoft Silverlight-Technologie angezeigt wird. Mit Vwa.VwaControl.getVersion Method können Sie die Version des Webparts abrufen.

Mit Vwa.VwaControl.removeHandler Method können Sie einen Ereignishandler entfernen, den Sie hinzugefügt haben, und mit Vwa.VwaControl.clearHandlers Method werden alle Handler entfernt. Zum Anzeigen und Verbergen von Seiten mit benutzerdefinierten HTML-Fehlermeldungen verwenden Sie Vwa.VwaControl.displayCustomMessage Method und Vwa.VwaControl.hideCustomMessage Method. Sie können auch Vwa.VwaControl.setActivePage Method verwenden, um die Seite zu ändern, die derzeit im Webpart angezeigt wird, und Vwa.VwaControl.refreshDiagram Method, um die aktuelle Webzeichnungsseite mit Daten vom Server zu aktualisieren.

"Page"-Objekt

Das Page-Objekt stellt die aktive Webzeichnungsseite dar, die aktuell im Darstellungsbereich des Visio Web Access-Webparts angezeigt wird. Mithilfe der Methoden des Page-Objekts können Sie Shapes auf der Seite auswählen und Informationen zu Shapes abrufen, beispielsweise die ID eines Shapes, seine Position und die Größe des umgebenden Felds. Sie können auch die Zoomebene und die Position der Seite in der Ansicht abrufen und festlegen.

Das Page-Objekt umfasst u. a. die folgenden Methoden:

Neben der im vorherigen Codebeispiel dargestellten getShapes-Methode können Sie auch mit den Methoden Vwa.Page.getSelectedShape Method, Vwa.Page.setSelectedShape Method, Vwa.Page.centerViewOnShape Method und Vwa.Page.isShapeInView Method auf Informationen zu Shapes zugreifen oder mit Shapes auf der Seite interagieren.
Mit Vwa.Page.getZoom Method können Sie die Zoomebene der Seite abrufen, mit Vwa.Page.setZoom Method können Sie sie festlegen.
Mit Vwa.Page.getPosition Method rufen Sie die Position der Seite in der Ansicht ab, mit Vwa.Page.setPosition Method legen Sie sie fest.
Mit Vwa.Page.getId Method rufen Sie die ID der aktuell angezeigten Seite, mit Vwa.Page.getSize Method die Höhe und Breite der gerenderten Seite ab.

"ShapeCollection"-Objekt

Das ShapeCollection-Objekt stellt die Sammlung der Shapeobjekte auf der aktiven Seite in der Webzeichnung dar, die aktuell im Darstellungsbereich des Visio Web Access-Webparts angezeigt wird.

Das ShapeCollection-Objekt umfasst u. a. die folgenden Methoden:

Vwa.ShapeCollection.getCount Method: Gibt die Anzahl der Shapes auf der aktiven Seite zurück.
Vier Methoden zum Abrufen bestimmter Shapes in der Auflistung nach dem Visio-Shape-Namen (Vwa.ShapeCollection.getItemByName Method), der Webzeichnungs-Shape-ID (Vwa.ShapeCollection.getItemById Method), der eindeutigen Visio-ID (Vwa.ShapeCollection.getItemByGuid Method) und der Indexposition in der Auflistung (Vwa.ShapeCollection.getItemAtIndex Method).

"Shape"-Objekt

Das Shape-Objekt stellt ein einzelnes Shape auf der aktiven Webzeichnungsseite dar. Mithilfe der Methoden des Shape-Objekts können Sie Informationen über ein bestimmtes Shape auf der aktiven Seite abrufen und mit dem Shape interagieren:

Zu den Methoden, die Shape-Informationen bereitstellen, gehören Vwa.Shape.getName Method (gibt den Namen des Shapes in Visio zurück), Vwa.Shape.getId Method (gibt die ID des Shapes in der Webzeichnung zurück), Vwa.Shape.getGuid Method (gibt die GUID des Shapes in Visio zurück), Vwa.Shape.getHyperlinks Method (gibt ein Array der mit dem Shape verknüpften Hyperlinks zurück), Vwa.Shape.getBounds Method (gibt die Position, Höhe und Breite des das Shape umgebenden Felds zurück) und Vwa.Shape.getShapeData Method (gibt ein Array der Shape-Datenelemente zurück, die dem Shape zugeordnet sind).
Zu den Methoden für die Interaktion mit einem Shape gehören Vwa.Shape.addHighlight Method und Vwa.Shape.removeHighlight Method (Hinzufügen und Entfernen von dem Shape zugeordneten Hervorhebungen) sowie Vwa.Shape.addOverlay Method, Vwa.Shape.addPredefinedOverlay Method und Vwa.Shape.removeOverlay Method (Hinzufügen und Entfernen von visuellen Shape-Überlagerungen).

Beispiele im SharePoint 2010 SDK

Die Downloaddatei für das SharePoint 2010 SDK (SharePoint 2010-Referenz: Software Development Kit) stellt drei JavaScript-Beispieldateien zur Verfügung, die bewährte Methoden für die Programmierung des Visio Web Access-Webparts veranschaulichen und die Sie für Ihre eigenen Webparts-Seiten verwenden können. Zu jedem Beispiel ist ein zugehöriges Thema im SDK vorhanden, in dem die Verwendung des Beispiels erläutert wird. Außerdem enthält der Code in jeder Beispieldatei ausführliche Kommentare zur Erklärung. Zum Herunterladen des SharePoint 2010 SDK einschließlich dieser Beispiele gehen Sie zu SharePoint 2010-Referenz: Software Development Kit. Nach dem Installieren des SDK finden Sie die Beispiele in einer komprimierten Datei (ZIP-Datei) in folgendem Verzeichnis: C:\Program Files (x86)\Microsoft SDKs\SharePoint Server 2010\Samples\Visio Services.

Beispiel "Annotations"

Das Beispiel "Annotations" zeigt zwei Verfahren zum Kommentieren eines Webzeichenblatts: durch die Verwendung von Formüberlagerungen und durch die Verwendung von Formhervorhebungen. In einem Inhalts-Editor-Webpart fügt der Beispielcode vier Listensteuerelemente hinzu, die dem Benutzer die Auswahl von Zeichenparametern für die Kommentare ermöglichen. Es wird außerdem eine Schaltfläche hinzugefügt, die den Benutzern die Übermittlung der Auswahl und das Zeichnen des Kommentars ermöglicht.

Beispiel "Custom Error Messages"

Das Beispiel "Custom Error Messages" zeigt, wie das Visio Web Access-Webparts verwendet werden kann, um benutzerdefinierte HTML-Fehlermeldungen anzuzeigen oder auszublenden. Es wird eine Benutzeroberfläche für das Codebeispiel erstellt, die aus zwei Textfeldern zum Erfassen des Titels und des Texts der Fehlermeldung und zwei Schaltflächen zum Anzeigen oder Ausblenden der Fehlermeldung besteht.

Beispiel "Mouse Interaction"

Das Beispiel "Mouse Interaction" zeigt, wie Ereignishandler für verschiedene mausbezogene Visio Web Access-Ereignisse deklariert und diese Ereignisse bei ihrem Auftreten behandelt werden können. Es zeigt Benachrichtigungen für auftretende Mausaktionen in einem Inhalts-Editor-Webpart an, z. B. das Setzen des Fokus auf eine Form, das Verlassen einer Form oder das Ändern der ausgewählten Form.