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

Artículo
09/18/2014

Última modificación: martes, 03 de diciembre de 2013

Hace referencia a: SharePoint Server 2010

En este artículo
Introducción a la programación de un elemento web de Visio Web Access
Creación de una página de elementos web
Adición de un elemento web de Visio Web Access a la página de elementos web
Adición de un elemento web Editor de contenido a la página de elementos web
API ECMAScript de Servicios de Visio
Objetos en la API ECMAScript de Servicios de Visio
Ejemplos del SDK de SharePoint 2010

Servicios de Visio en Microsoft SharePoint Server 2010 le permite cargar, mostrar e interactuar mediante programación con documentos de Microsoft Visio 2010 hospedados en una instancia del elemento web de Visio Web Access en una página de Microsoft SharePoint Server 2010.

En este artículo se proporciona información acerca de cómo agregar un elemento web de Visio Web Access a una página de elementos web de SharePoint Server 2010, mostrar un dibujo web de Visio del elemento web e interactuar con ese dibujo mediante programación utilizando la API JavaScript de Servicios de Visio.

Introducción a la programación de un elemento web de Visio Web Access

Antes de que su solución pueda interactuar mediante programación con un dibujo web de Visio en una página de elementos web de SharePoint Server 2010, debe agregar un elemento web de Visio Web Access a la página, abrir un dibujo de Visio publicado como un archivo .vdw en el elemento web y agregar un elemento web Editor de contenido a la página que contiene el código ECMAScript (JavaScript, JScript).

Para este procedimiento se supone que tiene los derechos administrativos adecuados como un diseñador de páginas en SharePoint Server 2010.

Para empezar a programar el elemento web de Visio Web Access

En Visio, cree el dibujo que desea mostrar y, a continuación, guárdelo en una biblioteca de documentos de SharePoint como un archivo .vdw.
Cree el archivo JavaScript (.js) que contiene el código que desea utilizar para interactuar con el dibujo web y guárdelo en la misma biblioteca de documentos que contiene el archivo .vdw.
Cree una página de elementos web de SharePoint Server 2010 para mostrar el dibujo y tener el código.
Agregue un elemento web de Visio Web Access a la página y muestra el dibujo web en el elemento web.
Agregue un elemento web Editor de contenido a la página y vincúlelo al archivo JavaScript que creó anteriormente.
Actualice la página en el explorador.

En las siguientes secciones se proporcionan más detalles acerca de algunos de estos pasos. Puede encontrar información sobre la publicación de dibujos de Visio como archivos .vdw en la Ayuda de Visio. Puede crear un archivo JavaScript en Microsoft Visual Studio 2010 o en cualquier otro editor de texto o código.

Nota

Hay muchos libros y artículos en línea disponibles en los que se proporcionan instrucciones generales para la codificación con JavaScript. Tema que no se aborda en este artículo.

Creación de una página de elementos web

Después de publicar el dibujo de Visio como un archivo .vdw, guardarlo en una biblioteca de documentos, crear su archivo JavaScript (.js) y guardarlo en la misma biblioteca, el siguiente paso es crear una página de elementos web.

Para crear una página de elementos web

En el sitio de SharePoint en la que desea publicar el dibujo, en el menú Acciones del sitio, haga clic en Más opciones.
En Páginas y sitios, haga clic en Página de elementos web.
En la nueva página de elemento web, en el cuadro Nombre, escriba un nombre de archivo para la página.
Elija una plantilla de diseño y la ubicación donde desea guardar el archivo de paginación y, a continuación, haga clic en Crear.

Adición de un elemento web de Visio Web Access a la página de elementos web

Antes de poder interactuar mediante programación con un dibujo web en una página de elementos web de SharePoint Server 2010, debe agregar un elemento web de Visio Web Access a la página de elementos web que creó y abrir un dibujo Visio publicado como archivo .vdw en el elemento web.

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

En la Cinta de Server, en la página de elementos web de SharePoint Server 2010, haga clic en Editar página.
En la zona donde desea colocar el elemento web, haga clic en Agregar elemento web.
En la lista Categorías, haga clic en Datos profesionales.
Haga clic en Visio Web Access y, a continuación, haga clic en Agregar.
Haga clic en la flecha ubicada junto al Menú del elemento web y, a continuación, haga clic en Editar elemento web.
Escriba la dirección URL del dibujo web (archivo .vdw) que desea abrir y, a continuación, haga clic en Aceptar.

Adición de un elemento web Editor de contenido a la página de elementos web

El elemento web Editor de contenido sirve para dos fines: contiene el código de JavaScript y proporciona una interfaz de visualización y control que permite interactuar en tiempo real con el archivo .vdw en el elemento web de Visio Web Access.

Para agregar un elemento web Editor de contenido a una página de elementos web

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.
En la zona donde desea colocar el elemento web Editor de contenido, haga clic en Agregar elemento web.
En la lista Categorías, haga clic en Medios y contenido.
En la lista Elementos web, haga clic en Editor de contenido y, a continuación, haga clic en Agregar.
Haga clic en la flecha ubicada junto al menú del Elemento web Editor de contenido y, a continuación, haga clic en Editar elemento web.
Escriba la dirección URL del archivo .js que desea abrir y, a continuación, haga clic en Aceptar.
En la cinta de opciones, haga clic en Detener la edición.

API ECMAScript de Servicios de Visio

El modelo de objetos JavaScript en Servicios de Visio proporciona acceso mediante programación a los dibujos de Visio que se muestran como archivos .vdw en el elemento web de Visio Web Access. Mediante el modelo de objetos JavaScript de Servicios de Visio, puede tener acceso a datos de formas, hipervínculos y coordenadas del recuadro de selección de formas. También puede crear mashups para páginas de diagramas específicas, que resalten formas, coloquen superposiciones de revisiones en diagramas, respondan a eventos del mouse y cambien las propiedades panorámicas y de zoom de la ventanilla. (Un mashup es una aplicación que permite combinar la funcionalidad o los datos de varios orígenes en un servicio, aplicación o medio único e integrado).

Como sucede con muchas API JavaScript, la API ECMAScript de Servicios de Visio está basada en eventos. Para programar el elemento web de Visio Web Access, debe escribir controladores que llamen a funciones en respuesta a eventos generados en el diagrama.

Objetos en la API ECMAScript de Servicios de Visio

La API JavaScript de Servicios de Visio contiene sólo cuatro objetos y sus respectivos miembros:

Además, la API JavaScript de Servicios de Visio contiene cuatro enumeraciones:

Objeto VwaControl

El objeto VwaControl representa una instancia del elemento web de Visio Web Access. Mediante el uso de los métodos del objeto VwaControl, puede tener acceso a información sobre el elemento web y sobre el dibujo de Visio que se presentan en el elemento web. Además, mediante el uso de estos métodos puede realizar varias acciones, por ejemplo, abrir un documento de Visio en el elemento web, obtener y establecer la página activa que se muestra, agregar o eliminar controladores de eventos y mostrar u ocultar mensajes personalizados.

En el código JavaScript, puede tener una referencia al objeto VwaControl adjuntando un controlador al evento load de la clase Sys.Application de ASP.NET AJAX. En la función que implementa el controlador, se puede inicializar el objeto pasando el identificador (ID) HTML del elemento web de Visio Web Access que va a hospedar el objeto. Para obtener ese identificador mediante el análisis del código fuente de la página HTML que hospeda el elemento web y la búsqueda de la frase class="VisioWebAccess". El identificador tiene el formato "WebPartWPQ*#*", donde # representa el número de identificación del elemento web. En el siguiente código se muestra cómo hacerlo. Se asume que determinó que el identificador del elemento web sea WebPartWPQ3 y que abrió un dibujo de Visio publicado como un archivo .vdw en el elemento web.

Sys.Application.add_load(onApplicationLoad)

var webPartElementID = "WebPartWPQ3";
var vwaControl;

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

Cuando se obtiene una referencia a una instancia del objeto VwaControl, se puede utilizar el método openDiagram para abrir un diagrama nuevo, basado en un archivo de Visio .vdw publicado en el elemento web de Visio Web Access. Sin embargo, una vez que se llame al método openDiagram, no se puede tratar, posteriormente, la misma instancia del objeto VwaControl o cualquier otro en el espacio de nombres Vwa. Esto es debido a que el método openDiagram es una operación asincrónica, que abre el diagrama en el servidor y, a continuación, vuelve inmediatamente. Además, la operación asincrónica también invalida el objeto VwaControl actual. Para obtener información, vea Vwa.VwaControl.openDiagram Method.

La mejor forma de realizar un seguimiento de una llamada a openDiagram es crear un controlador para Vwa.diagramcomplete Event, que tiene lugar cuando el elemento web de Visio Web Access ha terminado de cargar el diagrama de Visio, y colocar el código en dicho controlador de eventos. Puede usar Vwa.VwaControl.addHandler Method para agregar un controlador de eventos para el evento diagramcomplete. El procedimiento recomendado es programar el objeto VwaControl escribiendo estos controladores de eventos para responder a los eventos generados por las acciones de usuario en el control. Otros eventos expuestos por el objeto VwaControl incluyen Vwa.shapemouseenter Event, Vwa.shapemouseleave Event y Vwa.shapeselectionchanged Event, que permiten responder a acciones de mouse del usuario; y Vwa.diagramerror Event, que permite responder a los errores devueltos por SharePoint Server 2010.

En el controlador para el evento diagramcomplete, puede obtener referencias a los otros objetos expuestos por la API, incluidos el objeto Page y el objeto Shape, así como la colección ShapeCollection. En el mismo controlador, también puede crear controladores para otros eventos, tal como se muestra en el siguiente ejemplo de código.

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

En este ejemplo de código se muestra cómo realizar las siguientes tareas de programación:

Cómo usar el método Vwa.VwaControl.getActivePage Method para obtener una referencia a una instancia del objeto Page que representa la página activa.
Cómo usar el método Vwa.Page.getShapes Method del objeto Page para obtener una instancia de la colección de ShapeCollection que representa la colección de formas en la página activa.
Cómo usar el método Vwa.ShapeCollection.getItemAtIndex Method de esa colección para obtener una instancia de la primera forma de la colección de formas en la página activa.
Cómo agregar un controlador para el evento shapeselectionchanged.

Para obtener más información acerca del dibujo que se muestra en el elemento web, puede usar varios métodos del objeto VwaControl. Por ejemplo, puede usar el método Vwa.VwaControl.getAllPageIds Method para obtener los nombres de todas las páginas incluidas en el diagrama. Puede usar el método Vwa.VwaControl.getDiagramUrl Method para obtener la dirección URL del diagrama que se muestra actualmente en el elemento web, y el método Vwa.VwaControl.getDisplayMode Method para determinar si la página de dibujo web actual se muestra mediante tecnología de trama o tecnología de Microsoft Silverlight. También puede usar el método Vwa.VwaControl.getVersion Method para obtener la versión del elemento web.

El método Vwa.VwaControl.removeHandler Method permite quitar un controlador de eventos agregado y el método Vwa.VwaControl.clearHandlers Method quita todos los controladores. Para mostrar y ocultar páginas de mensajes de error HTML personalizados, use los métodos Vwa.VwaControl.displayCustomMessage Method y Vwa.VwaControl.hideCustomMessage Method. También puede usar el método Vwa.VwaControl.setActivePage Method para cambiar la página mostrada actualmente en el elemento web y el método Vwa.VwaControl.refreshDiagram Method para actualizar la página actual del dibujo web con datos del servidor.

Objeto Page

El objeto Page representa la página de dibujo web activa que se muestra actualmente en el área de representación del elemento web de Visio Web Access. Puede usar los métodos del objeto Page para seleccionar formas en la página y para obtener acceso a información sobre las mismas, incluido el identificador de una forma, su posición y el tamaño del cuadro de límite alrededor de la misma. Asimismo, puede obtener y establecer el nivel de zoom y la posición de la página en la vista.

Los métodos del objeto Page son los siguientes:

Además del método getShapes que se muestra en el ejemplo de código anterior, los métodos Vwa.Page.getSelectedShape Method, Vwa.Page.setSelectedShape Method, Vwa.Page.centerViewOnShape Method y Vwa.Page.isShapeInView Method permiten el acceso a información sobre las formas de la página, así como la interacción con las mismas.
El método Vwa.Page.getZoom Method permite obtener el nivel de zoom de la página y el método Vwa.Page.setZoom Method permite establecerlo.
El método Vwa.Page.getPosition Method permite obtener la posición de la página en la vista y el método Vwa.Page.setPosition Method permite establecerla.
El método Vwa.Page.getId Method obtiene el identificador de la página que se muestra actualmente y el método Vwa.Page.getSize Method obtiene el alto y ancho de la página representada.

Objeto ShapeCollection

El objeto ShapeCollection representa la colección de objetos de forma de la página activa en el dibujo web que se muestra actualmente en el área de representación del elemento web de Visio Web Access.

Los métodos del objeto ShapeCollection son los siguientes:

El método Vwa.ShapeCollection.getCount Method, que devuelve el número de formas de la página activa.
Cuatro métodos que permiten obtener formas específicas en la colección mediante sus nombres de forma de Visio (Vwa.ShapeCollection.getItemByName Method), sus identificadores de forma de dibujo web (Vwa.ShapeCollection.getItemById Method), sus identificadores únicos de Visio (Vwa.ShapeCollection.getItemByGuid Method) y su posición de índice en la colección (Vwa.ShapeCollection.getItemAtIndex Method).

Objeto Shape

El objeto Shape representa una forma única en la página de dibujo web activa. Los métodos del objeto Shape permiten obtener información sobre una forma específica de la página activa e interactuar con la misma:

Entre los métodos que proporcionan información de la forma se incluyen el método Vwa.Shape.getName Method, que devuelve el nombre de la forma en Visio; el método Vwa.Shape.getId Method, que devuelve el identificador de la forma en el dibujo web; el método Vwa.Shape.getGuid Method, que devuelve el GUID de la forma en Visio; el método Vwa.Shape.getHyperlinks Method, que devuelve una matriz de todos los hipervínculos asociados con la forma; el método Vwa.Shape.getBounds Method, que devuelve la posición, el alto y el ancho del cuadro de límite de la forma; y el método Vwa.Shape.getShapeData Method, que devuelve una matriz de todos los elementos de datos asociados con la forma.
Entre los métodos que permiten interactuar con una forma se incluyen los métodos Vwa.Shape.addHighlight Method y Vwa.Shape.removeHighlight Method, que permiten agregar y quitar información destacada asociada con la forma; y los métodos Vwa.Shape.addOverlay Method, Vwa.Shape.addPredefinedOverlay Method y Vwa.Shape.removeOverlay Method, que permiten agregar y quitar superposiciones de formas visuales.

Ejemplos del SDK de SharePoint 2010

En el archivo de descarga del SDK de SharePoint 2010 (Referencia de SharePoint 2010: kit de desarrollo de software) se proporcionan tres archivos de ejemplo de JavaScript en los que se muestran los procedimientos recomendados para la programación del elemento web de Visio Web Access y que puede usar en sus propias páginas de elementos web. Cada ejemplo tiene un tema correspondiente en el SDK donde se explica cómo utilizar el ejemplo, y el código en cada archivo de ejemplo incluye amplios comentarios explicativos. Para descargar el SDK de SharePoint 2010, incluidos los ejemplos, vea el tema sobre la referencia de SharePoint 2010: kit de desarrollo de software. Después de instalar el SDK, puede encontrar los ejemplos en un archivo comprimido (.zip) en la siguiente ruta de acceso: C:\Program Files (x86)\Microsoft SDKs\SharePoint Server 2010\Samples\Visio Services.

Ejemplo de anotaciones

En el ejemplo de anotaciones se muestra cómo anotar una página de dibujo web de dos maneras: superponer forma y resaltar formas. En un elemento web Editor de contenido, el código de ejemplo agrega cuatro controles de lista que permiten a los usuarios elegir los parámetros de dibujo de las anotaciones. También agrega un botón que permite a los usuarios enviar sus elecciones y realizar la anotación.

Ejemplo de mensajes de error personalizados

El ejemplo de mensajes de error personalizados describe cómo utilizar el elemento web de Visio Web Access para mostrar u ocultar los mensajes de error HTML personalizados. Crea una interfaz de usuario para el ejemplo de código que se compone de dos cuadros de texto que se utilizan para capturar el título del mensaje de error y el cuerpo, y dos botones para mostrar u ocultar el mensaje de error.

Ejemplo de interacción con el mouse

El ejemplo de interacción con el mouse muestra cómo declarar controladores de eventos para los distintos eventos relacionados con el mouse en Visio Web Access y cómo controlar estos eventos cuando se producen. Muestra las notificaciones de acciones del mouse que se producen en un elemento web Editor de contenido, como agregar una forma, dejar una forma o cambiar la forma seleccionada.