Responding to User Mouse Clicks in Visio Services
Last modified: September 12, 2012
Applies to: Office 2010 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visio Services | Visual Studio | Visual Studio 2008 | Visual Studio 2010
Provided by: Eric Schmidt, Microsoft Corporation
To save a Visio drawing as a .vdw file on a SharePoint site
After you have published your Visio Web Drawing to the SharePoint site, you must create a SharePoint Server 2010 Web Parts page to contain your Visio Web Access Web Part.
To create a Web Parts page
Once you have created a Web Parts page on the SharePoint site, you can add a Visio Web Access Web Part to the Web Parts page and open the Visio Web Drawing in that Web Part.
To add a Visio Web Access Web Part to a Web Parts page
To add a Content Editor Web Part to a Web Parts page
Displaying the Output for Mouse-Click Events
You can display messages that were generated by events in a Visio Web Access Web Part in a number of ways, depending on the needs of your solution. For example, you could use an alert() window to display a pop-up message or use the Vwa.VwaControl.displayCustomMessage method to replace the Visio Web Access Web Part with a custom HTML message.
The code sample that accompanies this Visual How To creates a debugging window in the Content Editor Web Part for displaying the output of the mouse-click events. To do this, the sample uses the document.write method of the Content Editor Web Part to create a <textarea> HTML element in the Web Part. (Like a <frame> HTML element, the Content Editor Web Part contains a document object that you can use to access the content within the scope of the Web Part itself.) The sample captures a global reference to that <textarea> element when the onDiagramComplete function is called, and the mouse-event handlers can later access that element and write the output that they generate to it (in the debugging window).
Adding a Handler to the AJAX Sys.Application.load Event
To load your script when the page loads, you have to add a handler to the AJAX Sys.Application.load event, which is raised after all other scripts have been loaded and the objects in the application have been created and initialized. In the code sample, the Sys.Application.load event calls the onApplicationLoad function.
The onApplicationLoad function first captures a reference to the Visio Web Access Web Part by creating a new Vwa.VwaControl object and assigning it to the vwaControl variable. Then, the onApplicationLoad function registers the onDiagramComplete function as a handler for the Vwa.diagramcomplete event of the vwaControl object. (The Vwa.diagramcomplete event is raised when the diagram is loaded, refreshed, or changed.)
Capturing a Reference to the Visio Web Access Web Part
The constructor method for the Vwa.VwaControl class has one required parameter: the Web Part ID for the Visio Web Access Web Part. The Web Part ID of the Visio Web Access Web Part (which is in the format WebPartWPQ#) is contained in the id attribute of the grandparent <div> tag of the <div> tag that contains the attribute class="VisioWebAccess" on the Web Parts page.
There are several ways to find the Web Part ID of the Visio Web Access Web Part:
The code sample uses the getVWAWebPartID function to get the Web Part ID of the Visio Web Access Web Part. The function uses the document.getElementsByTagName method to create an array of all the <div> tags on the page. (You could also use the document.getElementsByClassName method if your browser supports that method.) The function iterates through each item in the array until it finds the first item with the attribute class="VisioWebAccess" and returns the grandparent node of that item.
Creating the Handler for the Vwa.diagramcomplete Event
In the code sample, the onDiagramComplete function adds the handlers to the mouse-click events in the Visio Web Access Web Part and initializes most of the global variables.
The function creates instances of the Vwa.Page class and the Vwa.ShapeCollection class—the global variables vwaPage and vwaShapes, respectively—to refer to the active page in the drawing and the shapes collection on that page. This function also defines the textArea variable.
After defining the global variables, the function registers handlers for three in-browser events of the vwaControl object:
Creating Handlers for the Vwa.shapeselectionchanged, Vwa.shapemouseenter, and Vwa.shapemouseleave Events
The three functions that handle the in-browser mouse-click events—onShapeSelectionChanged, onShapeMouseEnter, and onShapeMouseLeave—behave very similarly. When the event is raised and the function is called, the event supplies two arguments to the functions: the source of the event (the event object) and an argument (the Visio shape ID of the shape that raised the event). In each case, the function uses the Vwa.ShapeCollection.getItemById method of the vwaShapes object to retrieve the Visio shape (an instance of the Vwa.Shape class) and then gets the name of the shape by calling the Vwa.Shape.getName method. The function then outputs a line of text to the textArea element that includes the name of the shape and the event that was raised.
Unlike the other two functions, the onShapeSelectionChanged function also has to distinguish between when a shape is selected and when the selection is cleared. When a shape in the drawing is selected, either with the mouse or by pressing the Tab key, the event should occur and the handler should output a line of text to the textArea element. However, if a selection is cleared (and, therefore, no shape is selected), the event still occurs, but the function does not output any text to the textArea element.