Erstellen der ECMAScript-Mashupzeichnung \"Office Plan\" in Visio 2010 zum Anzeigen in SharePoint Server 2010 (maschinell übersetzt)

Artikel
09/24/2014

Wichtig

Dieser Artikel wurde maschinell übersetzt. Bitte beachten Sie den Haftungsausschluss. Die englische Version des Artikels ist als Referenz hier verfügbar: here.

Zusammenfassung: Informationen zum Erstellen einer Grundrisszeichnung in Microsoft Visio Premium 2010 mithilfe der JavaScript-API von Visio Services für die Interaktion der Benutzer in einer Webparts-Seite in Microsoft SharePoint Server 2010.

Letzte Änderung: Donnerstag, 7. April 2011

Gilt für: Office 2007 | Office 2010 | SharePoint Server 2010 | Visio 2010 | Visio Premium 2010

Inhalt dieses Artikels
Übersicht
Erstellen die Beispieldateien
Erstellen einer Excel-Kalkulationstabelle warten die Daten angezeigt werden
Erstellen der Zeichnung Visio Web
Erstellen eine Webparts-Seite in SharePoint Server 2010
Hinzufügen von Webparts zu einer Webparts-Seite
ECMAScript-Code im Beispiel
Erstellen der ECMAScript-Datei, den Code enthalten
Hinzufügen eines Inhalts-Editor-Webparts
Testen der Hybridanwendung
Schluss

Inhalt

Übersicht

Dieser Artikel beschreibt, wie Sie Visio ServicesJavaScript API zum Anpassen einer Visio 2010 Web-Zeichnung in Visio Web Access Web Part in Microsoft SharePoint Server 2010 angezeigt. In diesem Artikel wird JavaScript API verwendet, zum Anzeigen von Informationen, z. B. Namen, Abteilung und Durchwahl, Office Occupants in einem Grundriss zeichnen, wenn der Benutzer den Mauszeiger über ein Shape Office bewegt. Die angezeigten Informationen von einer externen Datenquelle abgeleitet ist – in diesem Fall eine Kalkulationstabelle Microsoft Excel – und die angezeigten Daten bei der Informationen in der Datenquelle Änderungen aktualisiert werden können.

Erstellen eine interaktive Visio-Zeichnung auf einer Webparts-Seite in SharePoint Server 2010

Verwenden Sie die allgemeinen Schritte zum Erstellen einer interaktiven Office-Stockwerksgrundrisszeichnung in der folgenden Prozedur. Sie müssen die entsprechenden administrativen Berechtigungen als eine Seiten-Designers in SharePoint Server 2010 die aufgeführten Aufgaben abgeschlossen haben.

Zum Anzeigen einer interaktiven Visio-Zeichnung in SharePoint 2010

Erstellen Sie die Excel-Tabelle, die die Daten enthält, die Sie in der Zeichnung anzeigen möchten, und speichern Sie Sie in derselben Dokumentbibliothek .vdw-Datei enthält.
Erstellen Sie in Visio Stockwerksgrundrisszeichnung, die Sie anzeigen möchten und dann mit der gleichen SharePoint-Dokumentbibliothek als .vdw-Datei zu speichern.
Verknüpfen der Shapes in der Zeichnung zu den Daten in der Kalkulationstabelle.
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.
Erstellen Sie die Datei JavaScript (. js), die den Code enthält, den Sie für die Interaktion mit dem Web zeichnen möchten, und speichern Sie Sie in derselben Dokumentbibliothek.
Fügen Sie ein Inhalts-Editor-Webpart zur Seite hinzu, und verknüpfen Sie es mit der JavaScript-Datei, die Sie erstellt haben.
Aktualisieren Sie die Seite im Browser.

Die folgenden Abschnitte enthalten weitere Details zu den einzelnen Schritten.

Erstellen die Beispieldateien

Um die interaktive in diesem Artikel vorgestellten Stockwerksgrundrisszeichnung zu erstellen, haben Sie drei Beispiele für Dateien zu erstellen:

Eine Microsoft Excel-Tabelle mit die Daten in der Zeichnung angezeigt.
Ein Visio-Web Zeichnung (.vdw)-Datei.
Eine Datei mit JavaScript (. js), die den Code enthält, der Mashup arbeiten können.

Hinweis

Mashups können Sie Funktionen oder Daten aus mehreren Quellen in einer einzigen, integrierten Dienst, der Anwendung oder Mittel zu kombinieren.

Alle drei dieser Dateien wird in der SharePoint-Dokumentbibliothek auf einer SharePoint-Website gespeichert werden, die Web-Zeichnung angezeigt werden soll.

Erstellen einer Excel-Kalkulationstabelle warten die Daten angezeigt werden

Erstellen Sie zuerst eine Excel-Kalkulationstabelle, die Daten enthalten, denen mit Office-Shapes in Ihrer Zeichnung Web verknüpft werden. Aus Gründen der Einfachheit halber hier gezeigte Tabelle enthält nur drei Datensätze, aber natürlich, Sie können so viele weitere Datensätze hinzufügen zur Tabelle wie, abhängig von der Anzahl der Büros in den Grundriss gewünscht. Nach Abschluss des Vorgangs sollte die Excel-Tabelle wie in Abbildung 1 aussehen.

Abbildung 1. Excel-Tabelle mit die Daten zeichnen

Excel-Arbeitsblatt mit Zeichnungsdaten

Gehen Sie folgendermaßen vor, um die Tabelle zu erstellen.

So erstellen Sie eine Excel-Kalkulationstabelle

Öffnen Sie eine neue Excel-Tabellendatei (XLSX), und fügen Sie die folgenden Daten zu den ersten vier Zeilen. Fügen Sie eine Kopfzeile, wie gezeigt.

Tabelle 1. Tabellendaten

SpaceID

name

Abteilung

PhoneNumber

A1001

Sidney Higa

Benutzerhilfe

X 5265

A1002

Jane Dow

Test

X 8292

A1003

Dan Wilson

Entwicklung

X 5914
Speichern Sie die Datei als OfficePlanData.xlsx in der Dokumentbibliothek auf dem Computer SharePoint Server, der auch die Webparts-Seite enthält die Zeichnung fertig gestellte Web angezeigt werden soll.

SpaceID	name	Abteilung	PhoneNumber
A1001	Sidney Higa	Benutzerhilfe	X 5265
A1002	Jane Dow	Test	X 8292
A1003	Dan Wilson	Entwicklung	X 5914

Erstellen der Zeichnung Visio Web

Als Nächstes erstellen Sie die Visio-Grundrisses zeichnen, dass Sie als Web-Zeichnung angezeigt wird, fügen Sie einige Office-Shapes auf die Zeichnung, Importieren von Daten aus einer Kalkulationstabelle, und verknüpfen Sie diese Shapes auf die Daten. Eine Kombination aus der Visio-Benutzeroberfläche (UI) und Visual Basic verwendet für Applikationen-Code im Visual Basic Editor zum Erstellen der Zeichnung. Wenn es fertig ist, wird die Zeichnung wie in Abbildung 2 angezeigt.

Abbildung 2. Visio-Grundrisszeichnung

Visio-Grundrisszeichnung

Gehen Sie folgendermaßen vor, um die Zeichnung zu erstellen.

Erstellen eines Visio-Webs Zeichnung Grundriss (.vdw)

Öffnen Sie Visio 2010 zu, und klicken Sie dann auf die Registerkarte Datei.
Klicken Sie auf der Registerkarte Neu unter VorlagenkategorienPläne und Grundrisse.
Klicken Sie auf Grundriss, wählen Sie US-Einheiten, und klicken Sie auf Erstellen.
Speichern Sie die Zeichnung als .vdw-Datei. Klicken Sie auf Datei, und klicken Sie dann auf Speichern. Wechseln Sie zu dem Speicherort (Dokumentbibliothek auf dem Computer SharePoint Server), die zum Speichern der Datei verwendet werden soll. Geben Sie für den Dateinamen Office planen. Klicken Sie auf Web-Zeichnung (*.vdw) in der Liste Dateityp, und klicken Sie auf Speichern.
Drücken Sie ALT+F11, um den Visual Basic-Editor zu öffnen.
Doppelklicken Sie im Projekt-Explorer auf das Projekt ThisDocument (Office planen).

Um drei Office-Shapes zu einer Zeichnung hinzufügen möchten, fügen Sie den folgenden Code in den Code-Bereich und klicken Sie in der Prozedur Code und drücken Sie F5, um den Code auszuführen.

Dim vsoShape1 As Visio.Shape
Dim vsoShape2 As Visio.Shape
Dim vsoShape3 As Visio.Shape

Sub AddOfficeSpaces()

    ' Enable diagram services.
    Dim DiagramServices As Integer
    DiagramServices = ActiveDocument.DiagramServicesEnabled
    ActiveDocument.DiagramServicesEnabled = visServiceVersion140

    Set vsoShape1 = Application.ActiveWindow.Page.Drop(Application.Documents.Item("WALL_U.VSS").Masters.ItemU("Room"), 712#, 600#)
    Set vsoShape2 = Application.ActiveWindow.Page.Drop(Application.Documents.Item("WALL_U.VSS").Masters.ItemU("Room"), 840#, 600#)
    Set vsoShape3 = Application.ActiveWindow.Page.Drop(Application.Documents.Item("WALL_U.VSS").Masters.ItemU("Room"), 968#, 600#)

    ' Restore diagram services.
    ActiveDocument.DiagramServicesEnabled = DiagramServices

End Sub

In Ihrer Zeichnung auf die Daten in der Excel-Tabelle zu verbinden, die Sie erstellt haben, fügen Sie den folgenden Code in den Code-Bereich, und führen Sie den Code.

Hinweis

Ändern Sie vor dem Ausführen des Codes Your_filepath auf den Pfad der Dokumentbibliothek auf dem Computer SharePoint Server Ihrer Excel-Kalkulationstabelle Speicherort. Dies sollte den vollständigen Pfad, einschließlich Computername, Laufwerk und Ordner sein.

Sub ImportData()

    ' Enable diagram services.
    Dim DiagramServices As Integer
    DiagramServices = ActiveDocument.DiagramServicesEnabled
    ActiveDocument.DiagramServicesEnabled = visServiceVersion140

    Dim strFilepath As String
    Dim strConnection As String
    Dim strCommand As String

    ' Replace <your_filepath> with the full path to the folder on the SP server computer.
    strFilepath = "<your_filepath>\Office Plan Data.xlsx"

    strConnection = "Provider=Microsoft.ACE.OLEDB.12.0;" & "User ID=Admin;" _
                       & "Data Source=" + strFilepath + ";" _
                       & "Mode=Read;" _
                       & "Extended Properties=""HDR=YES;IMEX=1;MaxScanRows=0;Excel 12.0;"";" _
                       & "Jet OLEDB:Engine Type=34;"

    strCommand = "SELECT * FROM [Sheet1$]"

    Application.ActiveDocument.DataRecordsets.Add strConnection, strCommand, 0, "Office Data"

    Application.ActiveWindow.Windows.ItemFromID(visWinIDExternalData).Visible = True

    ' Restore diagram services.
    ActiveDocument.DiagramServicesEnabled = DiagramServices

End Sub

Die Shapes in Ihrer Zeichnung zu den Daten, die Sie gerade importiert verknüpfen möchten, fügen Sie den folgenden Code in das Code-Fenster, und führen Sie es.

Sub LinkShapesToData()

    ' Enable diagram services.
    Dim DiagramServices As Integer
    Dim vsoDataRecordset As Visio.DataRecordset
    DiagramServices = ActiveDocument.DiagramServicesEnabled
    ActiveDocument.DiagramServicesEnabled = visServiceVersion140

    Dim intCount As Integer
    intCount = Visio.ActiveDocument.DataRecordsets.Count
    Set vsoDataRecordset = Visio.ActiveDocument.DataRecordsets(intCount)

    ActiveWindow.DeselectAll
    ActiveWindow.Select vsoShape1, visSelect
    Application.ActiveWindow.Selection.LinkToData vsoDataRecordset.ID, 1, False

    ActiveWindow.DeselectAll
    ActiveWindow.Select vsoShape2, visSelect
    Application.ActiveWindow.Selection.LinkToData vsoDataRecordset.ID, 2, False

    ActiveWindow.DeselectAll
    ActiveWindow.Select vsoShape3, visSelect
    Application.ActiveWindow.Selection.LinkToData vsoDataRecordset.ID, 3, False

    ' Restore diagram services.
    ActiveDocument.DiagramServicesEnabled = DiagramServices    

End Sub

Speichern Sie und schließen Sie die Zeichnungsdatei.

Erstellen eine Webparts-Seite in SharePoint Server 2010

Nachdem Sie Ihre Visio-Zeichnung in eine Dokumentbibliothek als .vdw-Datei gespeichert und verknüpft es mit einer Excel-Kalkulationstabelle, die in derselben Dokumentbibliothek gespeichert, besteht der nächste Schritt zum Erstellen einer Webparts-Seite im SharePoint Server 2010. Wie bereits erwähnt müssen Sie auch über die erforderlichen administrative Berechtigungen zum Erstellen und bearbeiten diese Seite haben.

Folgen Sie diesen Schritten zum Erstellen einer Webparts-Seite.

So erstellen Sie eine Webparts-Seite in SharePoint Server 2010

Klicken Sie auf der SharePoint-Website, auf der Sie die Zeichnung bereitstellen möchten, im Menü Websiteaktionen auf Weitere Optionen.
Klicken Sie im Dialogfeld Erstellen filtern Sie, um eine Seite, klicken Sie auf Webpartseite und klicken Sie dann auf Erstellen.
Geben Sie die Neue Webpartseite im Feld Name den Namen, den Sie für die Seite verwenden möchten.
Wählen Sie unter Wählen Sie ein Layout-Vorlage klicken Sie auf Kopfzeile, die rechte Spalte, Textkörper.
Wählen Sie in der Liste Dokumentbibliothek derselben Dokumentbibliothek aus, in dem Sie die anderen Dateien gespeichert, und klicken Sie dann auf Erstellen.

Hinzufügen von Webparts zu einer Webparts-Seite

Sie werden zwei Webparts hinzufügen, die Webparts-Seite: ein Visio-Webpart ein Inhalts-Editor-Webpart, die den Code enthalten, die Benutzern ermöglicht, interagieren mit dem Zeichnen von Visio Web sowie die Zeichnung; Visio Web anzeigen. Inhalts-Editor-Webparts eignen sich auch für die Anzeige von Steuerelementen, wie z. B. Optionsfelder und Textfelder, in denen Benutzer mit Webparts-Seite interagieren. Jedoch, da keine zusätzliche Benutzeroberfläche für dieses Beispiels erforderlich ist, werden in diesem Fall Sie das Inhalts-Editor-Webpart ausblenden.

Hinzufügen eines Visio-Webparts

Bevor die programmgesteuerte Interaktion mit einem Web können müssen Zeichnen auf einer Webpartsseite SharePoint Server 2010 Sie Hinzufügen einer Visio Web Access-Webpart auf einer Webparts-Seite, die Sie erstellt und öffnen eine Visio-Zeichnung veröffentlichten als .vdw Datei im Webpart. Verwenden Sie das folgende Verfahren, um das Webpart hinzuzufügen.

Webparts-Seite 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 Textkörper-Zone Webpart hinzufügen.
Klicken Sie in der Liste Kategorien auf Geschäftsdaten.
Klicken Sie in der Liste WebpartsVisio Web Access, und klicken Sie dann auf Hinzufügen.
Klicken Sie auf den Pfeil Visio Web Access-Webpart-Menü, und klicken Sie dann auf Webparts bearbeiten.
Öffnen Sie den Toolbereich Visio Web Access.
Klicken Sie im Feld Drawing-Web-URL Geben Sie oder fügen Sie den URL des Webs zeichnen (.vdw-Datei) erstellt, oder klicken Sie auf die Schaltfläche Durchsuchen, navigieren Sie zu dem URL, und klicken Sie dann auf Übernehmen.
Wählen Sie die Force Raster Rendering.

Außerdem ist es möglich, Visio-Zeichnungen in das Visio Web Access-Webpart verwenden Microsoft Silverlight darstellen. Der Einfachheit halber jedoch nimmt der Code in diesem Artikel Raster Rendering.
Erweitern Sie die Kategorie Darstellung. Höhe Geben Sie unter 800, und klicken Sie dann auf OK

ECMAScript-Code im Beispiel

Visio Services stellt eine JavaScript API, damit Sie für die programmgesteuerte Interaktion mit Visio Web Zeichnungen auf einer Webparts-Seite angezeigt. In diesem Abschnitt finden Sie eine kurze Erläuterung des Codes in die JS-Datei in diesem Artikel funktioniert wie dargestellt. Im Abschnitt ist in Unterabschnitte, unterteilt, von denen jede einen bestimmten Teil des Codes behandelt. Weitere Informationen in den Kommentaren im Code.

Weitere Informationen über Visio ServicesJavaScript API finden Sie in die Artikeln, die im Abschnitt "Siehe auch" am Ende dieses Artikels verknüpft.

Bestimmen die Visio-Web Access Webpart ID

Das Skript, das in diesem Artikel vorgestellten funktioniert ordnungsgemäß, nur, wenn den HTML-Bezeichner (ID) für die Microsoft Visio Web Access-Webpart zu bestimmen und die webPartElementID Variable im Code zuweisen. Webparts-Seiten zuweisen HTML-IDs von Webparts willkürlich, aber Sie sind immer des Formulars "WebPartWPQ #", wobei # eine Zahl von 1 bis 4. Zur Bestimmung der ID von Visio Web Access Web Part in Ihrer Anwendung in einer Webparts-Seite klicken Sie auf die Seite, und klicken Sie dann auf Quelltext anzeigen. Klicken Sie im Viewer Code Quelle im Menü Bearbeiten auf Suchen. Geben Sie in das Feld SuchenKlasse = "VisioWebAccess". Wenn Sie das HTML-Tag gefunden haben, das den den Text enthält, finden die ID Sie in ein Attribut eines Tags <div> unmittelbar vor dem Tag, die den Text enthält, dem Sie gesucht. Das Attribut wird in der Regel folgendermaßen: Id = "WebPartWPQ #". Wenn Sie die ID gefunden haben, ändern Sie den Code entsprechend die ID-Nummer.

Sys.Application.Load-Ereignis

Sys.Application.load-Ereignis wird von Microsoft AJAX, als Teil 4 von ASP.NET verfügbar gemacht. Dieses Ereignis wird ausgelöst, nachdem alle Skripts geladen wurden, und die Objekte in der Anwendung erstellt und initialisiert wird. Der Beispielcode verwendet den Accessor add_loadonApplicationLoad-Ereignishandlerfunktion Delegaten an das Ereignis load binden. Der Ereignishandler ruft ein VwaControl-Objekt wiederum und zusätzliche Ereignis-Handler registriert, wie im nächsten Abschnitt erläutert.

OnApplicationLoad-Ereignishandlers

Die Funktion onApplicationLoad behandelt das AJAX-Sys.Application.load-Ereignis. Wenn Sys.Application.load-Ereignis ausgelöst wird, wird die Funktion onApplicationLoad instanziiert ein VwaControl-Objekt, und übergeben Sie Ihr den Visio Web Access Web Teil Bezeichner zuvor ermittelt, und ruft einen Verweis auf das neue Objekt. Auch wird die VwaControl.AddHandler-Methode verwendet, um einen Handler für das Ereignis diagramcomplete hinzufügen.

OnDiagramComplete-Ereignishandlers

Die Funktion onDiagramComplete behandelt das diagramcomplete-Ereignis, das ausgelöst wird, wenn eine Anforderung für ein Zeichenblatt Web abgeschlossen ist. Wenn das diagramcomplete-Ereignis ausgelöst wird, verwendet die onDiagramComplete-Funktion VwaControl.GetActivePage-Methode einen Verweis auf die aktuelle Seite erhalten. Außerdem verwendet die Vwa.Page.SetZoom-Methode, um den Seite Zoom Seitenbreite (-1) festgelegt, und verwendet die VwaControl.AddHandler-Methode zum Hinzufügen von Handlern für die shapemouseenter und shapemouseleave-Ereignisse.

OnShapeMouseEnter-Ereignishandlers

Die Funktion onShapeMouseEnter behandelt das shapemouseenter-Ereignis ausgelöst wird, wenn der Mauszeiger das umgebende Feld eines Shapes auf dem Zeichenblatt des aktiven Webs eintritt. Wenn das Ereignis ausgelöst wird, zeigt diese Funktion Shape-Daten, die ursprünglich von der verknüpften Excel-Kalkulationstabelle für den gewünschten Shape, bewegt sich der Benutzer den Mauszeiger über, abgeleitet. Die Funktion verwendet die Methode VwaControl.GetActivePage erneut einen Verweis auf die aktuelle Seite erhalten. Außerdem wird die Vwa.Page.GetShapes-Methode zum Abrufen der Auflistung der Formen auf der aktuellen Seite verwendet. Dann wird die Vwa.ShapeCollection.GetItemById-Methode verwendet, um die Form zu erhalten, die Quelle das Ereignis ist, und übergeben Sie Ihr die Visio Shape-ID der Form, die das Ereignis shapemouseenter in Form eines Parameters args ausgelöst.

Nachdem Sie das Quell-Shape verfügt, verwendet den Code Vwa.Shape.getShapeData-Methode erhalten Sie ein Array der Shape-Datenelemente, die mit dem Shape verknüpft ist. Durchläuft diese Datenelemente, die Werte für den "ShapeID" extrahieren "Name, „"Department","Telefonnummer"Elemente, und diese Werte in Zeichenfolgen zu konvertieren. Schließlich verwendet der Code die Vwa.Shape.addOverlay-Methode eine Überlagerung Form auf dem Quell-Shape anzeigen, die Daten enthält, die die Vwa.Shape.getShapeData-Methode abgerufen, übergeben die Daten an Vwa.Shape.addOverlay als Teil der Zeichenfolge, die den Parameter content bildet. Die Zeichenfolge content gibt auch Aspekte der Überlagerung Text angezeigt, z. B. Schriftgrad, Schriftbreite, und Rahmenstärke und Farbe. Weitere Parameter, die an die Methode übergeben werden, geben den Speicherort der Überlagerung in Bezug auf die Form und die Höhe und Breite der Überlagerung.

OnShapeMouseLeave-Ereignishandlers

Die Funktion onShapeMouseLeave behandelt das shapemouseleave-Ereignis, das ausgelöst wird, wenn der Mauszeiger das umgebende Feld eines Shapes auf dem aktiven Zeichenblatt Web verlässt. Wenn das Ereignis ausgelöst wird, verwendet diese Funktion Vwa.Shape.RemoveOverlay-Methode, um die Überlagerung zu entfernen.

Erstellen der ECMAScript-Datei, den Code enthalten

Der Code, bietet die Interaktivität zwischen Benutzern und die Visio-Zeichnung Web ist in ECMAScript (JScript) geschrieben und als eine JS-Datei in derselben Dokumentbibliothek wie die Excel-Tabelle und des Webs, die Zeichnung gespeichert wird. Ausführung auf derselben Seite, die im Web, die Zeichnung in einem separaten Inhalts-Editor-Webpart, die ausgeblendet wurden, von Benutzern hostet. Sie können eine Datei JavaScript in Microsoft Visual Studio 2010 oder anderen Text oder Code-Editor erstellen. So erstellen Sie die Codedatei gehen Sie wie folgt vor.

Zum Erstellen einer Datei ECMAScript (. js), die Code enthalten

In Visual Studio 2010 oder einem anderen Text oder Code-Editor eine neue Seite erstellen (klicken Sie in Visual Studio erstellt eine JScript-Seite) und auf der Seite vorhandenen Code durch den folgenden Code zu überschreiben.

// ECMAScript source code.
<script language="javascript">

//  OfficePlanData.js
// Copyright (c) Microsoft Corporation.  All rights reserved.
// Description:  This script shows how to use shape text overlays 
//               to display shape data.
//
// IMPORTANT: To enable this script, ensure that the variable webPartElementId 
// refers to the HTML ID of the Visio Web Access Web Part that
// you want to code against. You can find this ID by searching the source
// of a Web Parts page containing a Visio Web Access Web Part for 
// a tag that contains class="VisioWebAccess"; you should assign 
// the value of the id attribute of that tag's grandparent to webPartElementId.

// Add a hook into the AJAX Sys.Application.load event, raised after all scripts 
// have been loaded and the objects in the application have been created 
// and initialized.
Sys.Application.add_load(onApplicationLoad)

// Declare global variables for the application.
// The HTML tag ID of the Visio Web Access part.
var webPartElementID = "WebPartWPQ3";   
// The Visio Web Access Web part.
var vwaControl;
// The current page.
var vwaPage;
// The collection of all the shapes on the current page.
var vwaShapes;  

//  Function Name:      onApplicationLoad()
//  Parameters:         None
//  Description:        This function handles the AJAX Sys.Application.load event. 
//                      When this event is raised, the function captures references 
//                      to the Visio Web Access Web Part object and registers 
//                      the following Visio Web Access specific event handler: 
//
//                      diagramcomplete:        raised when the request for a Web
//                                              drawing page finishes.
function onApplicationLoad() {
        try{
                vwaControl= new Vwa.VwaControl(webPartElementID);
                vwaControl.addHandler("diagramcomplete", onDiagramComplete);
        }
        catch(err){
        }
}

//  Function Name:      onDiagramComplete()
//  Parameters:         None
//  Description:        This function handles the diagramcomplete event, which is
//                      raised when a request for a Web drawing page has been completed.
//                      When the event is raised, this function captures references
//                      to the script's global variables, such as the current page 
//                      and the collection of shapes on the page. It also sets 
//                      the zoom to page width and registers the shapemouseenter 
//                      and shapemouseleave event handlers. 
function onDiagramComplete() {
        try{
                vwaPage = vwaControl.getActivePage(); 
                vwaShapes =  vwaPage.getShapes(); 
                vwaPage.setZoom(-1);                              
                vwaControl.addHandler("shapemouseleave", onShapeMouseLeave);
                        vwaControl.addHandler("shapemouseenter", onShapeMouseEnter);
                       
        }
        catch(err){
        }
}

// Function Name:   onShapeMouseEnter()
// Parameters:      source: A reference to the object that raised 
//                          the shapemouseenter event.
//                  args:   The Visio shape ID of the shape the mouse entered.
// Description:     This function handles the shapemouseenter event, which
//                  is raised when the mouse enters the bounding box of a shape 
//                  from the active Web drawing page. When the event is raised, 
//                  this function displays shape data.
onShapeMouseEnter = function (source, args)
{
         var vwaPage = vwaControl.getActivePage();
         var vwaShapes = vwaPage.getShapes();

         var shape = null;
         if (vwaShapes!= null)
         {
             shape = vwaShapes.getItemById(args);
         }
         
         var data = null;
         if (shape != null)
         {
             data = shape.getShapeData();
         }

         for (var j = 0; j < data.length; j++)
        {
            
             if (data[j].label == "Name")
                {

                var name = data[j].value.toString();
              
                } 
                    if (data[j].label == "Department")
                {

                var dept = data[j].value.toString();
              
                } 

            if (data[j].label == "PhoneNumber")
                {

                 var number = data[j].value.toString();
                 
                }

                    if (data[j].label == "SpaceID")
                {

                var office = data[j].value.toString();
                 
                }

        }               

        shape.addOverlay(
                            "Overlay",
                            '<div style="border:solid 5px #FF0000; font-weight: bold; font-size: large;">Office: ' + office + '<br>' + 'Occupant: ' + name + '<br>' + 'Department: ' + dept + '<br>' + 'Phone number: ' + number + '</div>',
                            1, 
                            2,
                            shape.getBounds().width,
                            shape.getBounds().height);
}

// Function Name:   onShapeMouseLeave
// Parameters:      source: A reference to the object that raised 
//                          the shapemouseleave event.
//                  args: The Visio shape ID of the shape the mouse left.
// Description:     This function handles the shapemouseleave event, which
//                  is raised when the mouse leaves the bounding box of a shape 
//                  from the active Web drawing page. When the event is raised, 
//                  this function removes the overlay.
onShapeMouseLeave = function (source, args)
{
                try{
        vwaShapes.getItemById(args).removeOverlay("Overlay");
       }
                catch(err){
                }
}

</script>

Speichern Sie die Datei in der gleichen Dokumentbibliothek auf dem SharePoint Server 2010 Computer, wo Sie die Visio-.vdw und Excel XLSX-Dateien gespeichert.

Hinzufügen eines Inhalts-Editor-Webparts

Ein Inhalts-Editor-Webpart, können zwei Zwecken dienen: Es kann nicht nur JavaScript Code aufnehmen, sondern bieten auch eine Anzeige- und Steuerelement-Schnittstelle, die Sie in Echtzeit mit .vdw-Datei in Visio Web Access-Webpart zu interagieren kann. Ist jedoch wie zuvor erwähnt, für die Zwecke dieses Beispiels, Schnittstelle nicht erforderlich, damit Sie das Steuerelement, erhöhen Sie die Auflösung für die Anzeige der Datei .vdw verfügbar ausblendet.

Ein Inhalts-Editor-Webpart, die Webparts-Seite 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 Rechte Spalte Zone 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 dem Inhalts-Editor, und klicken Sie dann auf Webparts bearbeiten.
Geben Sie unter Content Link den URL der JS-Datei, die Sie erstellt haben, und klicken Sie dann auf Übernehmen.
Erweitern Sie die Kategorie Layout, wählen Sie Ausgeblendet, und klicken Sie dann auf OK.
Klicken Sie auf dem Menüband auf Bearbeitung beenden.

Testen der Hybridanwendung

Aktualisieren Sie die Seite, die Web-Zeichnung enthält, um die Mashup zu testen, die Sie erstellt haben. Verschieben Sie den Mauszeiger über eines der Office-Shapes in der Zeichnung. Name und Telefonnummer Anzahl der Büros Occupant sollte in einer Überlagerung Text am oberen Rand der Form angezeigt werden. Bewegen Sie die Maus außerhalb des Shapes, und die Überlagerung sollte verschwinden.

Einige der Daten im Excel-Arbeitsblatt auch ändern, und klicken Sie dann in der Zeichnung Aktualisieren. Die Änderungen in den Daten werden in der Zeichnung angezeigt.

Schluss

Dieser Artikel beschreibt, wie Sie Visio ServicesJavaScript API zum Erstellen einer Raumplanzeichnung in Visio Premium 2010, die Benutzer in einer Webparts-Seite im SharePoint Server 2010 mit interagieren können. Sie enthält JavaScript Code, mit dem der Shape-Daten angezeigt werden kann, wenn Benutzer den Mauszeiger über ein Shape in einer Zeichnung Web bewegen.

Hinweis

Haftungsausschluss für maschinelle Übersetzungen: Dieser Artikel wurde mithilfe eines Computersystems und ohne jegliche Bearbeitung durch Personen übersetzt. Microsoft bietet solche maschinellen Übersetzungen als Hilfestellung für Benutzer ohne Englischkenntnisse an, damit Sie von den Informationen zu Produkten, Diensten und Technologien von Microsoft profitieren können. Da es sich bei diesem Artikel um eine maschinelle Übersetzung handelt, enthält er möglicherweise Fehler in Bezug auf (Fach-)Terminologie, Syntax und/oder Grammatik.

Siehe auch

Sonstige Ressourcen

Objekte in der Visio Services ECMAScript-API

Visio Web Access-Webpart in Visio Services-Beispielen

Anpassen von Visio-Webzeichnungen im Visio Web Access-Webpart

Freigeben über

Erstellen der ECMAScript-Mashupzeichnung \"Office Plan\" in Visio 2010 zum Anzeigen in SharePoint Server 2010 (maschinell übersetzt)

Übersicht

Erstellen eine interaktive Visio-Zeichnung auf einer Webparts-Seite in SharePoint Server 2010

Zum Anzeigen einer interaktiven Visio-Zeichnung in SharePoint 2010

Erstellen die Beispieldateien

Erstellen einer Excel-Kalkulationstabelle warten die Daten angezeigt werden

So erstellen Sie eine Excel-Kalkulationstabelle

Erstellen der Zeichnung Visio Web

Erstellen eines Visio-Webs Zeichnung Grundriss (.vdw)

Erstellen eine Webparts-Seite in SharePoint Server 2010

So erstellen Sie eine Webparts-Seite in SharePoint Server 2010

Hinzufügen von Webparts zu einer Webparts-Seite

Hinzufügen eines Visio-Webparts

Webparts-Seite ein Visio Web Access-Webpart hinzu

ECMAScript-Code im Beispiel

Bestimmen die Visio-Web Access Webpart ID

Sys.Application.Load-Ereignis

OnApplicationLoad-Ereignishandlers

OnDiagramComplete-Ereignishandlers

OnShapeMouseEnter-Ereignishandlers

OnShapeMouseLeave-Ereignishandlers

Erstellen der ECMAScript-Datei, den Code enthalten

Zum Erstellen einer Datei ECMAScript (. js), die Code enthalten

Hinzufügen eines Inhalts-Editor-Webparts

Ein Inhalts-Editor-Webpart, die Webparts-Seite hinzu

Testen der Hybridanwendung

Schluss

Siehe auch

Sonstige Ressourcen

Zusätzliche Ressourcen