Creación de un dibujo del plano de una oficina mediante un mashup con ECMAScript en Visio 2010 para mostrarlo en SharePoint Server 2010 (traducción automática)

  • Artículo

Importante

Este artículo se ha traducido con traducción automática; vea la declinación de responsabilidades. Para su referencia, puede encontrar la versión en inglés de este artículo aquí.

Resumen:  aprenda a usar la API JavaScript de Servicios de Visio para crear el dibujo de un plano en Microsoft Visio Premium 2010 con el que los usuarios puedan interactuar en una página de elementos web de Microsoft SharePoint Server 2010.

Última modificación: jueves, 07 de abril de 2011

Hace referencia a: Office 2007 | Office 2010 | SharePoint Server 2010 | Visio 2010 | Visio Premium 2010

En este artículo
Introducción
Creación de los archivos de ejemplo
Creación de una hoja de cálculo de Excel para mantener los datos para que aparezcan
Crear el archivo de dibujo de Visio Web
Crear una página de elementos Web en SharePoint Server 2010
Agregar elementos Web a la página de elementos Web
Código de ECMAScript en el ejemplo
Crear el archivo de ECMAScript para contener el código.
Adición de un elemento web de editor de contenido
Probar la Mashup
Conclusión

**Se aplica a:**Microsoft Visio Premium 2010, Servicios de Visio en Microsoft SharePoint Server 2010, Microsoft Excel 2010
publicados: septiembre de 2010
proporcionado por: Saul Candib, Microsoft Corporation.  

Contenido

Introducción

En este artículo se describe cómo utilizar el Servicios de VisioJavaScript API para personalizar un dibujo de web de Visio 2010 mostrado en el elemento de Web de acceso Web de Visio en Microsoft SharePoint Server 2010. En este artículo, la API JavaScript se utiliza para mostrar información sobre sus ocupantes de office en un plano de planta de dibujo cuando el usuario mueve el puntero del mouse (ratón) sobre una forma de la oficina, como, por ejemplo, nombre, departamento y extensión de número de teléfono. La información que se muestra se deriva de un origen de datos externos, en este caso, una hoja de cálculo Microsoft Excel, y se pueden actualizar los datos que aparecen al cambiar la información del origen de datos.

Crear un dibujo de Visio interactivo en una página de elementos Web en SharePoint Server 2010

Utilice los pasos generales en el siguiente procedimiento para crear un dibujo de plano de planta de oficina interactivo. Debe tener los permisos administrativos apropiados, como un diseñador de páginas en SharePoint Server 2010 para completar las tareas que aparecen.

Para mostrar un interactivo dibujo de Visio en SharePoint 2010

  1. Crear la hoja de cálculo de Excel que contiene los datos que desea que aparezca en el dibujo y guárdelo en la misma biblioteca de documentos que contiene el archivo .vdw.

  2. En Visio, crear el plano de planta que desee mostrar y, a continuación, vuelva a guardarlo en la misma biblioteca de documentos de SharePoint como un archivo .vdw.

  3. Vincular las formas del dibujo a los datos de la hoja de cálculo.

  4. Crear una página de elementos Web SharePoint Server 2010 para mostrar el dibujo y contienen el código.

  5. Agregar un elemento Web de Visio Web Access a la página y mostrar el sitio web en el elemento Web de dibujo.

  6. Crear el archivo JavaScript (.js) que contiene el código que desea utilizar para interactuar con el dibujo en el web y guárdelo en la misma biblioteca de documentos.

  7. Agregar un elemento Web Editor de contenido a la página y vincularlo al archivo JavaScript que ha creado.

  8. Actualice la página en el explorador.

Las secciones siguientes proporcionan información más detallada sobre cada uno de estos pasos.

Creación de los archivos de ejemplo

Para crear el plano de planta interactivo presentado en este artículo, tendrá que crear tres archivos de ejemplo:

  • Una hoja de cálculo Microsoft Excel que contiene los datos mostrados en el dibujo.

  • Un sitio web de Visio (.vdw) archivo de dibujo.

  • Un archivo JavaScript (.js) que contiene el código que hace que el mashup funcione.

    Nota

    Mashups permiten combinar funciones o datos de varios orígenes en un servicio integrado único, la aplicación o el medio.

Tres de estos archivos se guarda a la biblioteca de documentos de SharePoint en el mismo sitio de SharePoint donde desee que se muestre el dibujo de web.

Creación de una hoja de cálculo de Excel para mantener los datos para que aparezcan

En primer lugar, cree una hoja de cálculo de Excel que contenga los datos que se vincularán las formas de la oficina de su web en el dibujo a. Por motivos de simplicidad, se muestra a continuación la hoja de cálculo contiene sólo tres registros pero, por supuesto, puede agregar tantos registros de más a la hoja de cálculo como desee, en función del número de oficinas en el plano de planta. Cuando haya terminado, debe buscar la hoja de cálculo de Excel al igual que la figura 1.

La figura 1. Hoja de cálculo de Excel que contiene los datos del dibujo

Hoja de cálculo de Excel que contiene los datos del dibujo

Utilice el siguiente procedimiento para crear la hoja de cálculo.

Para crear una hoja de cálculo de Excel

  1. Abra un nuevo archivo de hoja de cálculo de Excel (.xlsx) y agregue los siguientes datos a las cuatro primeras filas. Incluir una fila de encabezado, como se muestra.

    Tabla 1. Datos de la hoja de cálculo

    SpaceID

    Nombre

    Departamento

    PhoneNumber

    A1001

    Higa de Sidney

    Asistencia al usuario

    X 5265

    A1002

    Jane Dow

    Prueba

    X 8292

    A1003

    Dan Wilson

    Desarrollo

    X 5914

  2. Guarde el archivo como OfficePlanData.xlsx a la biblioteca de documentos en el equipo de SharePoint Server también contendrá la página de elementos Web en la que desee mostrar el dibujo terminado web.

Crear el archivo de dibujo de Visio Web

A continuación, crear el plano de planta de Visio que se mostrará como un dibujo de web, agregar algunas formas de la oficina al dibujo, importar datos de la hoja de cálculo y, a continuación, vincular esas formas a los datos de dibujo. Se utiliza una combinación de la interfaz de usuario (IU) de Visio y Visual Basic para aplicaciones (VBA) en el Editor de Visual Basic para crear el dibujo. Cuando haya finalizado, el dibujo se parecerá figura 2.

La figura 2. Dibujo de plano de planta de Visio

Dibujo de plano de planta de Visio

Utilice el siguiente procedimiento para crear el dibujo.

Para crear un web de Visio, dibujo de plano de planta (.vdw)

  1. Abra Visio 2010 y, a continuación, haga clic en la ficha de Archivo.

  2. En la ficha Nuevo, en la sección Categorías de plantillas, haga clic en mapas y planos de planta.

  3. Haga clic en plano de planta, seleccione Unidades de EE.UU. y, a continuación, haga clic en Crear.

  4. Guardar el dibujo como un archivo .vdw. Haga clic en Archivo y, a continuación, haga clic en Guardar. Busque la ubicación (biblioteca de documentos en el equipo SharePoint Server) donde desee guardar el archivo. El nombre de archivo, escriba el Plan de Office. En la lista Guardar como tipo, haga clic en Dibujo de Web (*.vdw) y, a continuación, haga clic en Guardar.

  5. Presione ALT+F11 para abrir el Editor de Visual Basic.

  6. En el Explorador de proyectos, haga doble clic en el proyecto ThisDocument (plan de Office).

  7. Para agregar tres formas de la oficina al dibujo, pegue el código siguiente en el panel de código y, a continuación, haga clic en el procedimiento de código y presione F5 para ejecutar el código.

    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

  8. Para conectar el dibujo a los datos de la hoja de cálculo de Excel que creó, pegue el código siguiente en el panel de código y, a continuación, ejecute el código.

    Nota

    Antes de ejecutar el código, cambie your_filepath a la ruta de acceso de la biblioteca de documentos en el equipo SharePoint Server donde guardó la hoja de cálculo de Excel. Esto debe ser la ruta de acceso completa, incluido el nombre del equipo, unidad y carpeta.

    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

  9. Para vincular las formas del dibujo a los datos que acaba de importar, pegue el código siguiente en el panel de código y, a continuación, vuelva a ejecutarlo.

    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

  10. Guarde y cierre el archivo de dibujo.

Crear una página de elementos Web en SharePoint Server 2010

Después de haber guardado el dibujo de Visio a una biblioteca de documentos, como un archivo .vdw y lo ha vinculado a una hoja de cálculo de Excel guardado en la misma biblioteca de documentos, el siguiente paso es crear una página de elementos Web en SharePoint Server 2010. Como ya se ha mencionado, también debe tener los permisos administrativos necesarios para crear y editar esta página.

Siga estos pasos para crear una página de elementos Web.

Para crear una página de elementos Web en SharePoint Server 2010

  1. En el sitio de SharePoint en la que desee exponer el dibujo, en el menú Acciones del sitio, haga clic en Más opciones.

  2. En el cuadro de diálogo Crear filtrar a Página, haga clic en la Página de elementos web y, a continuación, haga clic en Crear.

  3. En la Nueva página de elementos Web, en el cuadro Nombre, escriba el nombre que desea utilizar para la página.

  4. En Elija una plantilla de diseño, haga clic en encabezado, columna derecha, cuerpo.

  5. En la lista de la Biblioteca de documentos, seleccione la misma biblioteca de documentos donde guardó los archivos de otros y, a continuación, haga clic en Crear.

Agregar elementos Web a la página de elementos Web

Agregará dos elementos Web a la página de elementos Web: un elemento Web de Visio, que mostrará en el web de Visio, dibujo; y un elemento Web Editor de contenido, que contiene el código que permite a los usuarios interactuar con el dibujo de la web de Visio. Elementos de Editor de contenido Web también resultan útiles para mostrar los controles de usuario, como, por ejemplo, los botones de opción y cuadros de texto, que permiten a los usuarios interactuar con la página de elementos Web. Sin embargo, debido a que no hay ninguna interfaz de usuario adicionales necesarios para este ejemplo, en este caso se oculta el elemento Web Editor de contenido.

Agregar un elemento Web de Visio

Antes de que se puede interactuar mediante programación con un sitio web en una página de elementos Web SharePoint Server 2010, debe agregar un elemento Web de Visio Web Access a la página de elementos Web que ha creado y abrir un dibujo de Visio publicado como un archivo .vdw en el elemento Web. Utilice el siguiente procedimiento para agregar el elemento Web.

Para agregar un elemento Web de Visio Web Access a la página de elementos Web

  1. En la Cinta de Server, en la página de elementos web de SharePoint Server 2010, haga clic en Editar página.

  2. En la zona Cuerpo, haga clic en Agregar un elemento Web.

  3. En la lista Categorías, haga clic en Datos profesionales.

  4. En la lista de Elementos web, haga clic en Acceso Web de Visio y, a continuación, haga clic en Agregar.

  5. Haga clic en la flecha de Menú de elemento Web de Visio Web Access y, a continuación, haga clic en Editar elemento de Web.

  6. Abra el panel de herramientas de Acceso Web de Visio.

  7. En el cuadro Dirección URL de dibujo de Web, escriba o pegue la dirección URL del web de dibujo (archivo .vdw) que crea, o haga clic en el botón Examinar para desplazarse a la dirección URL y, a continuación, haga clic en Aplicar.

  8. Seleccione la representación de mapa de bits de Force.

    También es posible que representan dibujos de Visio en el elemento Web de Visio Web Access mediante el uso de Microsoft Silverlight. Sin embargo, para mayor simplicidad, el código de este artículo se supone que la representación de mapa de bits.

  9. Expanda la categoría de Apariencia. En Alto, escriba 800 y, a continuación, haga clic en Aceptar

Código de ECMAScript en el ejemplo

Servicios de Visio expone una API para que pueda interactuar mediante programación con dibujos de Visio web mostrados en una página de elementos Web JavaScript. En esta sección, encontrará una breve explicación de cómo se presenta el código en el archivo .js en obras de este artículo. La sección se divide en las subsecciones, cada uno de los cuales ocupa una parte concreta del código. Se proporciona más información en los comentarios del código.

Para obtener más información acerca de la Servicios de VisioJavaScript API, consulte los artículos vinculados a en la sección Temas relacionados al final de este artículo.

Determinar el identificador de elemento Web de Visio Web Access

La secuencia de comandos que se presentan en este artículo funcionarán correctamente sólo si determinar el identificador (ID) de HTML para el elemento Web de Visio Web Access y asignarla a la variable webPartElementID en el código. Las páginas de elementos Web asignar identificadores de HTML en elementos Web ubicados arbitrariamente, pero siempre tienen el formato "WebPartWPQ #", donde # es un número entre 1 y 4. Para determinar el identificador del elemento Web de Visio Web Access en su aplicación, en la página de elementos Web, haga clic en la Página y, a continuación, haga clic en Ver código fuente. En el Visor de código fuente, en el menú Editar, haga clic en Buscar. En el cuadro Buscar, escriba clase = "VisioWebAccess". Cuando haya encontrado la etiqueta HTML que contiene ese texto, podrá encontrar el identificador de un atributo de una de las etiquetas de <div> inmediatamente antes de la etiqueta que contiene el texto que se va a buscar. El atributo suele aparece como sigue: id = "WebPartWPQ #". Una vez encontrado el identificador, modifique el código para reflejar el número de identificación.

Evento Sys.Application.Load

Microsoft AJAX, como parte del 4 de ASP.NET expone el evento Sys.Application.load. Este evento se provoca después de que se hayan cargado todos los scripts y los objetos de la aplicación se han creado y se inicializa. El código de ejemplo utiliza el descriptor de acceso de add_load para enlazar la función de delegado de controlador de eventos onApplicationLoadload evento. El controlador de eventos, a su vez, obtiene un objeto VwaControl y registra los controladores de eventos adicionales, como se explica en la sección siguiente.

Controlador de eventos de onApplicationLoad

La función onApplicationLoad controla el evento de Sys.Application.load de AJAX. Cuando se provoca el evento Sys.Application.load, la función onApplicationLoad crea una instancia de un objeto VwaControl, pasándole el identificador de parte de web de acceso Web de Visio previamente determinado y obtiene una referencia al nuevo objeto. También se utiliza el método VwaControl.AddHandler para agregar un controlador para el evento diagramcomplete.

Controlador de eventos de onDiagramComplete

La función onDiagramComplete controla el evento diagramcomplete, que se produce una vez finalizada la solicitud de un sitio web página de dibujo. Cuando se provoca el evento diagramcomplete, la función onDiagramComplete utiliza el método VwaControl.GetActivePage para obtener una referencia a la página actual. También se utiliza el método Vwa.Page.SetZoom para establecer el zoom de página al ancho de página (-1) y se utiliza el método VwaControl.AddHandler para agregar controladores de eventos shapemouseleave y shapemouseenter.

Controlador de eventos de onShapeMouseEnter

La función onShapeMouseEnter controla el evento shapemouseenter, que se produce cuando el puntero del mouse entra en el cuadro de límite de una forma de la página web activa. Cuando se provoca el evento, esta función muestra datos de formas, originalmente derivadas de la hoja de cálculo de Excel vinculada a para la forma en que el usuario mueve el puntero del mouse (ratón) sobre. Nuevo, la función utiliza el método de VwaControl.GetActivePage para obtener una referencia a la página actual. También se utiliza el método Vwa.Page.GetShapes para obtener la colección de formas en la página actual. A continuación, utiliza el método Vwa.ShapeCollection.GetItemById para obtener la forma en que se ha originado el evento, pasándole el identificador de la forma de Visio de la forma en que se provoca el evento shapemouseenter, en el formulario del parámetro args.

Una vez que tiene la forma de origen, el código utiliza el método Vwa.Shape.getShapeData para obtener una matriz de los elementos de datos de formas asociado a la forma. Recorre en iteración los elementos de datos, extraer los valores de la "ShapeID", "Nombre", "Departamento", "PhoneNumber" de elementos y convertir esos valores en cadenas. Por último, el código utiliza el método Vwa.Shape.addOverlay para mostrar una superposición de la forma en la forma de origen que contiene los datos recuperado en el método Vwa.Shape.getShapeData, pasar dichos datos a Vwa.Shape.addOverlay como parte de la cadena que forma el parámetro content. La cadena content también especifica los aspectos de la presentación del texto superpuesto, incluidos el tamaño de fuente, espesor de fuente y el tamaño de borde y color. Otros parámetros que se pasan al método especifican la ubicación de la superposición con respecto a la forma y el alto y ancho de la superposición.

Controlador de eventos de onShapeMouseLeave

La función onShapeMouseLeave controla el evento shapemouseleave, que se produce cuando el mouse sale del cuadro de límite de una forma en la página de dibujo de web activo. Cuando se provoca el evento, esta función utiliza el método Vwa.Shape.RemoveOverlay para quitar la superposición.

Crear el archivo de ECMAScript para contener el código.

El código que proporciona la interactividad entre usuarios y el plano de la web se escribe en ECMAScript (JScript) y se guarda como un archivo .js en la misma biblioteca de documentos como el sitio web de dibujo y la hoja de cálculo de Excel de Visio. Se ejecuta en la misma página que aloja el sitio web de dibujo en un elemento de Web Editor de contenido independiente que está oculto de los usuarios. Puede crear un archivo JavaScript en Microsoft Visual Studio 2010 o cualquier otro texto o código de editor. Siga estos pasos para crear el archivo de código.

Para crear un archivo de ECMAScript (.js) que contiene el código

  1. En Visual Studio 2010 o cualquier otro editor de texto o código, cree una nueva página (en Visual Studio, cree una página de JScript) y se sobrescribirá el código existente en la página con el código siguiente.

    // 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>

  2. En el equipo SharePoint Server 2010 donde guardó el .vdw de Visio y .xlsx de Excel, guarde el archivo a la misma biblioteca de documentos.

Adición de un elemento web de editor de contenido

Un elemento Web Editor de contenido puede servir para dos fines: no sólo contienen el código de JavaScript, pero también proporcionan una interfaz de visualización y el control que permite interactuar en tiempo real con el archivo .vdw en el elemento Web de Visio Web Access. Sin embargo, como se indicó anteriormente, los efectos de este ejemplo, interfaz no es necesaria, por lo que se oculta el control para aumentar el área de pantalla disponible para mostrar el archivo .vdw.

Para agregar un elemento Web Editor de contenido a la página de elementos Web

  1. Si la página aún no está en modo de edición, en la Cinta de Server de la página de elementos web de SharePoint Server 2010, haga clic en Editar página.

  2. En la zona de la Columna derecha, haga clic en Agregar un elemento Web.

  3. En la lista Categorías, haga clic en Medios y contenido.

  4. En la lista Elementos web, haga clic en Editor de contenido y, a continuación, haga clic en Agregar.

  5. Haga clic en la flecha situada junto al Editor de contenido y, a continuación, haga clic en Editar elemento de Web.

  6. En El vínculo de contenido, escriba la dirección URL del archivo .js que creó y, a continuación, haga clic en Aplicar.

  7. Expanda la categoría de Diseño, seleccione Oculto y, a continuación, haga clic en Aceptar.

  8. En la cinta de opciones, haga clic en Detener la edición.

Probar la Mashup

Para probar el mashup que haya creado, actualice la página que contiene el plano de la web. En el dibujo, mueva el puntero del mouse (ratón) sobre una de las formas de la oficina. El nombre y número de teléfono de la oficina de ocupante debe aparecer en una superposición de texto en la parte superior de la forma. Mover el mouse (ratón) fuera de la forma y la superposición debe desaparecer.

Puede también cambiar algunos de los datos de la hoja de cálculo de Excel y, a continuación, haga clic en Actualizar en el dibujo. Los cambios realizados en los datos deben aparecer en el dibujo.

Conclusión

En este artículo se describe cómo utilizar el Servicios de VisioJavaScript API para crear un plano de planta en Visio Premium 2010 que pueden interactuar los usuarios en una página de elementos Web en SharePoint Server 2010 de dibujo. Contiene código JavaScript que permite la visualización de datos de formas cuando el usuario mueva el puntero del mouse (ratón) sobre la forma en un sitio web de dibujo.

Nota

Declinación de responsabilidades de traducción automática: Este artículo se ha traducido con un sistema informático sin intervención humana. Microsoft ofrece estas traducciones automáticas para que los hablantes de otros idiomas distintos del inglés puedan disfrutar del contenido sobre los productos, los servicios y las tecnologías de Microsoft. Puesto que este artículo se ha traducido con traducción automática, es posible que contenga errores de vocabulario, sintaxis o gramática.

Vea también

Otros recursos

Objetos en la API ECMAScript de Servicios de Visio

Elemento web de Visio Web Access en ejemplos de los Servicios de Visio

Personalización de dibujos web de Visio en el elemento web de Visio Web Access