Antworten auf Benutzermausklicks in Visio Services in SharePoint Server 2010

  • Artikel

SharePoint-Videotutorial

Zusammenfassung:  Informationen zum Hinzufügen von Ereignishandlern zu Mausklickereignissen in einem Visio Web Access-Webpart auf einer Microsoft SharePoint Server 2010 Webparts-Seite mithilfe von ECMAScript (JavaScript, JScript)-Code.

Letzte Änderung: Mittwoch, 12. September 2012

Gilt für: Office 2010 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visio Services | Visual Studio | Visual Studio 2008 | Visual Studio 2010

Bereitgestellt von:  Eric Schmidt, Microsoft Corporation

Übersicht

Mithilfe des JavaScript-Objektmodell für Visio Services in Microsoft SharePoint Server 2010 können Sie benutzerdefinierte Meldungen generieren, wenn bestimmte Ereignisse in einem Visio Web Access-Webpart auf einer SharePoint Server 2010Webparts-Seite auftreten. Mithilfe des folgenden Codebeispiels (das auf dem Codebeispiel Mausinteraktion im SharePoint 2010 SDK basiert) können Sie auf einer Webparts-Seite ein benutzerdefiniertes Testfenster erstellen, in dem Meldungen angezeigt werden, wenn bei Shapes in der Visio-Webzeichnung Ereignisse eintreten.

HinweisHinweis
Sie benötigen in SharePoint Server 2010 die entsprechenden Berechtigungen als Seitendesigner, um dieses Codebeispiel einer SharePoint Server 2010Webparts-Seite hinzufügen zu können. Darüber hinaus muss Visio Services auf der SharePoint Server 2010-Website installiert und aktiviert sein.
Code schreiben

In diesem Videotutorial wird das Verwenden des JavaScript-Objektmodell für Visio Services zum Erstellen eines Visio Web Access-Webparts auf einer SharePoint Server 2010Webparts-Seite beschrieben, das auf Ereignisse im Browser reagiert. Zum Verwenden des in diesem Videotutorial gezeigten Codebeispiels sollten Sie bereits mit JavaScript vertraut sein.

Bevor Sie mithilfe von JavaScript mit einem Visio-Diagramm auf einer SharePoint-Website interagieren, müssen Sie das Diagramm als Visio-Webzeichnung (.vdw) in einer Dokumentbibliothek der Website speichern.

So speichern Sie eine Visio-Zeichnung als VDW-Datei auf einer SharePoint-Website

  1. Erstellen Sie in Visio die Zeichnung, die Sie auf der SharePoint-Website anzeigen möchten.

  2. Klicken Sie auf der Registerkarte Datei auf Speichern und senden.

  3. Klicken Sie unter Speichern und senden auf Auf SharePoint speichern.

  4. Wählen Sie unter Auf SharePoint speichern den Dateityp Webzeichnung (*.vdw) aus, und klicken Sie auf Speichern unter.

  5. Navigieren Sie zur Dokumentbibliothek auf der SharePoint-Website, auf der Datei angezeigt werden soll, und klicken Sie dann auf Speichern.

Nachdem Sie Ihre Visio-Webzeichnung auf der SharePoint-Website gespeichert haben, müssen Sie eine SharePoint Server 2010Webparts-Seite erstellen, der das Visio Web Access-Webpart hinzugefügt wird.

So erstellen Sie eine Webparts-Seite

  1. Klicken Sie auf der SharePoint-Website, auf der Sie die Zeichnung bereitstellen möchten, im Menü Websiteaktionen auf Weitere Optionen.

  2. Klicken Sie unter Filtern nach auf Seite, dann auf Webpartseite und anschließend auf Erstellen.

  3. Geben Sie auf der neuen Webparts-Seite im Feld Name einen Dateinamen für die Seite ein.

  4. Wählen Sie eine Layoutvorlage und den Speicherort aus, an dem Sie die Seitendatei speichern möchten, und klicken Sie auf Erstellen.

Nachdem Sie eine Webparts-Seite auf der SharePoint-Website erstellt haben, können Sie ein Visio Web Access-Webpart der Webparts-Seite hinzufügen und die Visio-Webzeichnung in diesem Webpart öffnen.

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

  1. Klicken Sie im Menüband für die Serverkomponente auf der SharePoint Server 2010 Webparts-Seite auf Seite bearbeiten.

  2. Klicken Sie in der Zone, in der Sie das Webpart platzieren möchten, auf Webpart hinzufügen.

  3. Klicken Sie in der Liste Kategorien auf Geschäftsdaten.

  4. Klicken Sie auf Visio Web Access und dann auf Hinzufügen.

  5. Klicken Sie auf den Pfeil neben Visio Web Access-Webpartmenü und dann auf Webpart bearbeiten.

  6. Geben Sie die URL der Webzeichnungsdatei (.vdw) ein, die Sie öffnen möchten, und klicken Sie dann auf OK.

Ihre SharePoint Server 2010-Seite muss ein Inhalts-Editor-Webpart für die Aufnahme des JavaScript-Codes enthalten. In diesem Codebeispiel stellt das Inhalts-Editor-Webpart zudem eine Anzeigeoberfläche für die Ausgabe Ihres JavaScript bereit.

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

  1. Wenn sich die Seite noch nicht im Bearbeitungsmodus befindet, klicken Sie im Menüband für die Serverkomponente auf der SharePoint Server 2010 Webparts-Seite auf Seite bearbeiten.

  2. Klicken Sie in der Zone, in der Sie das Inhalts-Editor-Webpart platzieren möchten, auf Webpart hinzufügen.

  3. Klicken Sie in der Liste Kategorien auf Medien und Inhalt.

  4. Klicken Sie in der Liste Webparts auf Inhalts-Editor, und klicken Sie dann auf Hinzufügen.

  5. Klicken Sie auf den Pfeil neben Inhalts-Editor-Webpartmenü und dann auf Webpart bearbeiten.

  6. Geben Sie die URL der zu öffnenden JS-Datei ein, und klicken Sie dann auf OK.

  7. Klicken Sie im Menüband auf Bearbeitung beenden.

Nach dem Hinzufügen des Visio Web Access- und Inhalts-Editor-Webparts zu Ihrer Webparts-Seite können Sie mit dem Erstellen der Datei beginnen, die Ihren JavaScript-Code enthalten soll.

So erstellen Sie in Microsoft Visual Studio 2010 eine neue JavaScript-Datei

  1. Klicken Sie in Visual Studio 2010 auf Datei, zeigen Sie auf Neu, und klicken Sie dann auf Datei.

  2. Klicken Sie im Dialogfeld Neue Datei unter Installierte Vorlagen auf Web.

  3. Klicken Sie in der Liste der Vorlagen auf JScript-Datei und dann auf Öffnen.

  4. Klicken Sie nach Öffnen der Datei auf Datei und dann auf Speichern unter.

  5. Führen Sie im Dialogfeld Speichern unter folgende Schritte aus:

    1. Wechseln Sie zur Dokumentbibliothek auf der SharePoint-Website, auf der sich die Visio-Webzeichnung befindet.

    2. Geben Sie in das Feld Dateiname den für die JavaScript-Datei gewünschten Namen ein.

    3. Klicken Sie auf Speichern.

Sie können den JavaScript-Code nun der JavaScript-Datei (.js) hinzufügen.

So fügen Sie JavaScript-Code der JavaScript-Datei hinzu

  1. Fügen Sie am Anfang der Datei das folgende HTML-Tag hinzu.

    <script type="text/javascript">

  2. Erstellen Sie mithilfe des folgenden Codes auf der SharePoint-Seite im Inhalts-Editor-Webpart ein neues HTML-Element.

    // Create new text area element in the Content Editor Web Part.
document.write("ECMA events debug window:");
document.write("<textarea" + 
               " id='MouseOutput'" + 
               " style='width:350px;height:200px'>" + 
               "</textarea>");

  3. Deklarieren Sie mithilfe des folgenden Codes die globalen Variablen für den JavaScript-Code.

    // Declare a variable for the text area HTML element.
var textArea;   

// Declare variables for the Visio Web Access Web Part, active Visio page,
// and collection of shapes on the active Visio page, respectively.
var vwaControl; 
var vwaPage; 
var vwaShapes;

  4. Erstellen Sie mithilfe des folgenden Codes einen Handler für das AJAX-Ereignis Sys.Application.load.

    // Add the onApplicationLoad handler to the Sys.Application.load event.
Sys.Application.add_load(onApplicationLoad)

  5. Erstellen Sie mithilfe des folgenden Codes die onApplicationLoad-Handlerfunktion. Die Funktion erstellt einen Verweis auf das Visio Web Access-Webpart, indem eine Instanz der Vwa.VwaControl-Klasse erstellt wird, und fügt dem Vwa.diagramcomplete-Ereignis dieses Vwa.VwaControl-Objekts einen Handler hinzu.

    // Capture a reference to an instance of the Visio Web Access Web Part.
function onApplicationLoad() {
    try{
        vwaControl = new Vwa.VwaControl(getVWAWebPartID());
            vwaControl.addHandler("diagramcomplete", onDiagramComplete);
        }
        catch(err){
        }
}

// Get the Web Part ID for the Visio Web Access Web Part.
function getVWAWebPartID() {

    // Iterate through each <div> tag on the page.
    var divArray = document.getElementsByTagName("div");
    var webPartElementID;
    for (var i = 0; i < divArray.length; i++) {
        var node = divArray[i];

        // If the class attribute of the tag is "VisioWebAccess", 
        // return the id attribute of the grandparent tag.
        if (node.className == "VisioWebAccess") {
            webPartElementID = node.parentNode.parentNode.id;
            break;
        }
    }
    return webPartElementID;
}

  6. Erstellen Sie mithilfe des folgenden Codes den Handler für das Vwa.diagramcomplete-Ereignis. Mit dieser Funktion werden die globalen Variablen initialisiert, der Zoom für die Visio-Webzeichnung festgelegt und den Ereignissen Vwa.shapemouseleave, Vwa.shapemouseenter und Vwa.shapeselectionchanged des Vwa.VwaControl-Objekts Handler hinzugefügt.

    // Add handlers to the mouse-click events in the Web Drawing when the diagram finishes rendering.
function onDiagramComplete()
{
    try{
        // Define the vwaPage and vwaShapes variables for the current session of the Web Drawing.
        vwaPage = vwaControl.getActivePage();
        vwaShapes = vwaPage.getShapes();

        // Define the textArea variable as the debugging window HTML element.
        textArea = document.getElementById('MouseOutput');

        // Set the page zoom to "Fit page to view."
        vwaPage.setZoom(-1);

        // Add handlers to the shapemouseleave, shapemouseenter, and shapeselectionchanged events.
        vwaControl.addHandler("shapemouseleave", onShapeMouseLeave);
        vwaControl.addHandler("shapemouseenter", onShapeMouseEnter);
        vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);

        // Output text to the debugging window. 
        textArea.value += 'Drawing loaded from:\n' 
            + vwaControl.getDiagramUrl() + '\n';

    }
    catch(err){
    }
}

  7. Mithilfe des folgenden Codes können Sie die Handler für die Ereignisse Vwa.shapemouseleave, Vwa.shapemouseenter und Vwa.shapeselectionchanged erstellen. Beim Aufruf schreibt jede dieser Funktionen eine Textzeile in das HTML-Element <textarea> im Inhalts-Editor-Webpart. Die Textzeile bestimmt sowohl das Ereignis, das ausgelöst wurde, als auch das Shape, das das Ereignis ausgelöst hat.

    // When the event is raised, it outputs text to the debugging window.
onShapeSelectionChanged = function (source, args)
{
    try{
        // Do not process the shapeselectionchanged event if the selection was cleared.
        if (args != null && args != Sys.EventArgs.Empty)
        {
            textArea.value += 'Selection changed to "' + 
                vwaShapes.getItemById(args).getName() +'"\n';
            textArea.scrollTop = textArea.scrollHeight;
        }
    }
    catch(err){
    }
}

// When the event is raised, outputs text to the "debugging window."
onShapeMouseEnter = function (source, args)
{
    try{
        textArea.value += 'Mouse entered shape "' + 
            vwaShapes.getItemById(args).getName() + '"\n';
        textArea.scrollTop = textArea.scrollHeight;
    }
    catch(err){
    }
}

// When event is raised, outputs text to the "debugging window."
onShapeMouseLeave = function (source, args)
{
    try{
        textArea.value += 'Mouse exited shape "' + 
            vwaShapes.getItemById(args).getName() + '"\n';
        textArea.scrollTop = textArea.scrollHeight;
        }
    catch(err){
    }
}

  8. Fügen Sie unter dem JavaScript-Code ein schließendes </script>-HTML-Tag hinzu.

Nach Beenden der Bearbeitung der JavaScript-Datei und ihrer Speicherung auf der SharePoint-Website müssen Sie die Datei in das Inhalts-Editor-Webpart auf der Webparts-Seite einfügen.

So fügen Sie die JavaScript-Datei in das Inhalts-Editor-Webpart ein

  1. Klicken Sie auf der SharePoint-Seite auf den Pfeil neben Inhalts-Editor-Webpartmenü und dann auf Webpart bearbeiten.

  2. Geben Sie die URL der einzufügenden JS-Datei ein, und klicken Sie dann auf OK.

Lesen

Visio Services bietet eine neue Möglichkeit zum Freigeben von Diagrammen und Daten in einer Organisation. Sie können interaktive Diagramme erstellen, bei denen die Benutzer die Visio-Zeichnung und die Daten, auf denen sie basiert, im Browser untersuchen können. Das JavaScript-Objektmodell für Visio Services macht mehrere Mausklickereignisse im Browser verfügbar, die Sie Handlern hinzufügen können.

Anzeigen der Ausgabe von Mausklickereignissen

Sie können je nach Anforderungen an Ihre Lösung Meldungen, die von Ereignissen in einem Visio Web Access-Webpart generiert wurden, auf verschiedene Weisen anzeigen. Sie können beispielsweise ein alert()-Fenster zum Einblenden einer Popupmeldung nutzen oder mithilfe der Vwa.VwaControl.displayCustomMessage-Methode das Visio Web Access-Webpart durch eine benutzerdefinierte HTML-Meldung ersetzen.

Im Codebeispiel, das dieses Videotutorial begleitet, wird im Inhalts-Editor-Webpart zum Anzeigen der Ausgabe der Mausklickereignisse ein Testfenster erstellt. Hierzu wird im Beispiel die document.write-Methode des Inhalts-Editor-Webparts verwendet, um im Webpart ein HTML-Element vom Typ <textarea> zu erstellen. (Das Inhalts-Editor-Webpart enthält wie ein HTML-Element vom Typ <frame> ein document-Objekt, über das Sie auf den Inhalt im Geltungsbereich des Webparts selbst zugreifen können.) Im Beispiel wird ein globaler Verweis auf dieses <textarea>-Element erfasst, wenn die onDiagramComplete-Funktion aufgerufen wird, und die Mausereignishandler können später auf dieses Element zugreifen und die generierte Ausgabe (in das Testfenster) hineinschreiben.

Wenngleich das Testfenster zum Anzeigen der Ausgabe von Mausereignissen nicht nötig ist, müssen Sie mithilfe eines Inhalts-Editor-Webparts auf das JavaScript-Objektmodell für Visio Services zugreifen. Das Inhalts-Editor-Webpart fungiert als Container für Ihr Skript und fügt das Skript auf der Seite ein, sobald die SharePoint-Seite geladen wird.

Hinzufügen eines Handlers zum AJAX-Ereignis Sys.Application.load

Damit Ihr Skript beim Laden der Seite geladen wird, müssen Sie dem AJAX-Ereignis Sys.Application.load einen Handler hinzufügen, der ausgelöst wird, nachdem alle anderen Skripts geladen und die Objekte in der Anwendung erstellt und initialisiert wurden. Im Codebeispiel wird mit dem Sys.Application.load-Ereignis die onApplicationLoad-Funktion aufgerufen.

Die onApplicationLoad-Funktion erfasst zunächst einen Verweis auf das Visio Web Access-Webpart, indem ein neues Vwa.VwaControl-Objekt erstellt wird, das der Variablen vwaControl zugewiesen wird. Anschließend registriert die onApplicationLoad-Funktion die onDiagramComplete-Funktion als Handler für das Vwa.diagramcomplete-Ereignis des vwaControl-Objekts. (Das Vwa.diagramcomplete-Ereignis wird ausgelöst, wenn das Diagramm geladen, aktualisiert oder geändert wird.)

Erfassen eines Verweises auf das Visio Web Access-Webpart

Bevor Sie auf einen Großteil des JavaScript-Objektmodell für Visio Services zugreifen können, müssen Sie zunächst einen Verweis auf die aktuelle Instanz des Visio Web Access-Webpart erfassen, indem Sie eine Instanz der Vwa.VwaControl-Klasse erstellen. Im Codebeispiel in diesem Videotutorial wird der Handler für das AJAX-Ereignis Sys.Application.load zum Erfassen dieses Verweises verwendet, indem eine Instanz der Vwa.VwaControl-Klasse erstellt wird.

Die Konstruktormethode für die Vwa.VwaControl-Klasse hat einen Pflichtparameter: die Webpart-ID für das Visio Web Access-Webpart. Diese Webpart-ID im Format WebPartWPQ# ist im id-Attribut des über-übergeordneten <div>-Tags des <div>-Tag enthalten, welches das class="VisioWebAccess"-Attribut für die Webparts-Seite enthält.

HinweisHinweis
Wenn es auf der Webparts-Seite mehrere Visio Web Access-Webparts gibt, sind entsprechende <div>-Tags mit dem class="VisioWebAccess"-Attribut vorhanden.

Es gibt mehrere Möglichkeiten zum Ermitteln der Webpart-ID des Visio Web Access-Webparts:

  • Sie können im Browser den HTML-Quellcode der SharePoint-Webparts-Seite-Seite anzeigen und nach dem Ausdruck class="VisioWebAccess" suchen.

  • Sie können im JavaScript-Code die Webpart-ID beim Laden des Skripts abrufen.

Im Codebeispiel wird die getVWAWebPartID-Funktion zum Abrufen der Webpart-ID des Visio Web Access-Webparts verwendet. Die Funktion erstellt mithilfe der document.getElementsByTagName-Methode ein Array aller <div>-Tags auf der Seite. (Sie können auch die document.getElementsByClassName-Methode verwenden, wenn Ihr Browser diese unterstützt.) Die Funktion durchläuft alle Elemente im Array, bis das erste Element mit dem class="VisioWebAccess"-Attribut gefunden wird, und gibt den über-übergeordneten Knoten dieses Elements zurück.

Erstellen des Handlers für das Vwa.diagramcomplete-Ereignis

Im Codebeispiel fügt die onDiagramComplete-Funktion die Handler den Mausklickereignissen im Visio Web Access-Webpart hinzu und initialisiert die meisten globalen Variablen.

Die Funktion erstellt Instanzen der Klassen Vwa.Page und Vwa.ShapeCollection (die globalen Variablen vwaPage bzw. vwaShapes), um auf die aktive Seite in der Zeichnung und die Shapeauflistung auf dieser Seite zu verweisen. Diese Funktion definiert auch die textArea-Variable.

Nach der Definition der globalen Variablen registriert die Funktion Handler für drei browserinterne Ereignisse des vwaControl-Objekts:

  • Das Vwa.shapemouseleave-Ereignis, das eintritt, wenn der Mauszeiger das umgrenzende Feld eines Shapes verlässt. Diesem Ereignis wurde die Handlerfunktion onShapeMouseLeave hinzugefügt.

  • Das Vwa.shapemouseenter-Ereignis, das eintritt, wenn der Mauszeiger in das umgrenzende Feld des Shapes gelangt. Diesem Ereignis wurde die Handlerfunktion onShapeMouseEnter hinzugefügt.

  • Das Vwa.shapeselectionchanged-Ereignis, das eintritt, wenn die aktive Auswahl in der Zeichnung von einem Shape in ein anderes geändert wird. Diesem Ereignis wurde die Handlerfunktion onShapeSelectionChanged hinzugefügt.

Erstellen von Handlern für die Ereignisse Vwa.shapeselectionchanged, Vwa.shapemouseenter und Vwa.shapemouseleave

Die drei Funktionen zum Verarbeiten der browserinternen Mausklickereignisse (onShapeSelectionChanged, onShapeMouseEnter und onShapeMouseLeave) verhalten sich ähnlich. Wenn das Ereignis ausgelöst und die Funktion aufgerufen wird, stellt das Ereignis den Funktionen zwei Argumente bereit: die Quelle des Ereignisses (das Ereignisobjekt) und ein Argument (die Visio-Shape-ID des Shapes, das das Ereignis ausgelöst hat). In beiden Fällen verwendet die Funktion die Vwa.ShapeCollection.getItemById-Methode des vwaShapes-Objekts zum Abrufen des Visio-Shapes (eine Instanz der Vwa.Shape-Klasse) und ruft anschließend den Namen des Shapes durch Aufrufen der Vwa.Shape.getName-Methode ab. Die Funktion gibt anschließend eine Textzeile an das textArea-Element aus, die den Namen des Shapes und das ausgelöste Ereignis enthält.

Im Gegensatz zu den beiden anderen Funktionen muss die onShapeSelectionChanged-Funktion auch unterscheiden, wann ein Shape ausgewählt wird und wann die Auswahl aufgehoben wird. Wenn ein Shape in der Zeichnung ausgewählt ist (entweder per Maus oder durch Drücken der TAB-TASTE), muss das Ereignis eintreten, und der Handler muss die Textzeile an das textArea-Element ausgeben. Wenn eine Auswahl jedoch aufgehoben wird (sodass kein Shape ausgewählt ist), tritt das Ereignis weiter ein, doch die Funktion gibt keinen Text an das textArea-Element aus.

 Anzeigen

Video ansehen

Video anschauen | Dauer: 9:58

Erforschen