You are on page 1of 8

visual, ya debera estar familiarizado con JavaScript.

Antes de utilizar JavaScript para interactuar con un diagrama de Visio en un sitio de SharePoint, debe guardar el diagrama como un dibujo web de Visio (archivo .vdw) en una biblioteca de documentos del sitio.

Para guardar un dibujo de Visio como archivo .vdw en un sitio de SharePoint


1. 2. 3. 4. 5. En Visio, cree el dibujo que desee mostrar en el sitio de SharePoint. En la ficha Archivo, haga clic en Guardar y enviar. En Guardar y enviar, haga clic en Guardar en SharePoint. En Guardar en SharePoint, seleccione el tipo de archivo Dibujo web (*.vdw) y, a continuacin, haga clic en Guardar como. Busque la biblioteca de documentos en el sitio de SharePoint en el que desee mostrar el archivo, asigne un nombre al archivo y, a continuacin, haga clic en Guardar. Tras publicar el dibujo web de Visio en el sitio de SharePoint, debe crear una pgina de elementos webSharePoint Server 2010 que contendr el elemento web de Visio Web Access.

Para crear una pgina de elementos web


1. 2. 3. 4. En el sitio de SharePoint en el que desee publicar el dibujo, en el men Acciones del sitio, haga clic en Ms opciones. En Filtrar por, haga clic en Pgina, seleccione Pgina de elementos web y, a continuacin, haga clic en Crear. En la nueva pgina de elementos web, en el cuadro Nombre, escriba un nombre de archivo para la pgina. Elija una plantilla de diseo y la ubicacin donde desea guardar el archivo de paginacin y, a continuacin, haga clic en Crear. Una vez creada una pgina de elementos web en el sitio de SharePoint, puede agregar un elemento web de Visio Web Access a la pgina de elementos web y abrir el dibujo web de Visio en dicho elemento web.

Para agregar un elemento web de Visio Web Access a una pgina de elementos web
1. 2. 3. 4. 5. En la Cinta de Server de la SharePoint Server 2010 pgina de elementos web, haga clic en Editar pgina. En la zona donde desea colocar el elemento web, haga clic en Agregar elemento web. En la lista Categoras, haga clic en Datos profesionales. Haga clic en Visio Web Access y, a continuacin, haga clic en Agregar. Haga clic en la flecha Men de elementos web de Visio Web Access y, a continuacin, haga clic en Editar elemento web.

6.

Escriba la direccin URL del dibujo web (archivo .vdw) que desea abrir y, a continuacin, haga clic en Aceptar.

La pgina de SharePoint Server 2010 tambin debe incluir un elemento web Editor de contenido que contendr el cdigo de JavaScript. En el ejemplo de cdigo incluido en esta ayuda visual, el elemento web Editor de contenido tambin proporciona una interfaz de visualizacin para mostrar los resultados del cdigo de JavaScript.

Para agregar un elemento web Editor de contenido a una pgina de elementos web
1. 2. 3. 4. 5. 6. 7. Si la pgina an no est en modo de edicin, en la Cinta de Server de la pgina de elementos webSharePoint Server 2010, haga clic en Editar pgina. En la zona donde desea colocar el elemento web Editor de contenido, haga clic en Agregar elemento web. En la lista Categoras, haga clic en Medios y contenido. En la lista Elementos web, haga clic en Editor de contenido y, a continuacin, haga clic en Agregar. Haga clic en la flecha Men de elementos web Editor de contenido y, a continuacin, haga clic en Editar elemento web. Escriba la direccin URL del archivo .js que desea abrir y, a continuacin, haga clic en Aceptar. En la cinta de opciones, haga clic en Detener la edicin. Con los elementos web de Visio Web Access y Editor de contenido agregados a la pgina de elementos web, puede comenzar a crear el archivo que contenga el cdigo de JavaScript.

Para crear un nuevo archivo de JavaScript en Microsoft Visual Studio 2010


1. 2. 3. 4. 5. En Visual Studio 2010, haga clic en Archivo, elija Nuevo y, a continuacin, haga clic en Archivo. En el cuadro de dilogo Nuevo archivo, en Plantillas instaladas, haga clic en Web. En la lista de plantillas, haga clic en Archivo JScript y, a continuacin, en Abrir. Una vez abierto el archivo, haga clic en Archivo y, a continuacin, en Guardar como. En el cuadro de dilogo Guardar archivo como, haga lo siguiente: a. Vaya a la biblioteca de documentos del sitio de SharePoint en la que se encuentra el dibujo web de Visio. b. c. En el cuadro Nombre de archivo, escriba un nombre para el archivo de JavaScript. Haga clic en Guardar.

Ahora podr agregar el cdigo de JavaScript al archivo de JavaScript (.js).

Para agregar JavaScript al archivo de JavaScript


1. Agregue la siguiente etiqueta HTML al principio del archivo. HTML Copiar

<script type="text/javascript">

2.

Use el cdigo siguiente para crear el botn HTML que muestra u oculta las instrucciones de HTML personalizadas. JavaScript Copiar

// Use the document.write method to write HTML to the Content Editor W eb Part. document.write('<br><input type="button" id="instructions"' + 'value="Show instructions" style="width:200px" ' + 'onclick="toggleInstructions();">');
3. Use el siguiente cdigo para declarar las variables globales para JavaScript. JavaScript Copiar

// Declare variables for the Visio Web Access Web Part, the currently // displayed page, and the current status of the HTML instructions. var vwaControl; var vwaPage; var instructionsDisplayed;

4.

Use el siguiente cdigo para agregar un controlador al evento Sys.Application.load de AJAX. JavaScript Copiar

// Add the onApplicationLoad handler to the Sys.Application.load event .

Sys.Application.add_load(onApplicationLoad)

5.

Use el siguiente cdigo para crear la funcin de controlador onApplicationLoad. La funcin crea una referencia al elemento web de Visio Web Access al crear una instancia de la clase Vwa.VwaControl (en ingls) y agrega un controlador al evento Vwa.diagramcomplete (en ingls) de ese objeto Vwa.VwaControl. JavaScript Copiar

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

Use el siguiente cdigo para crear el controlador para el evento Vwa.diagramcomplete. Esta funcin inicializa las variables globales y establece el zoom de la pgina que se muestra en ese momento en el diagrama. La variable global instructionsDisplayed se establece en false para indicar que las instrucciones estn ocultas. JavaScript Copiar

// Assign values to the global variables when the drawing finishes ren dering. function onDiagramComplete() { try { vwaPage = vwaControl.getActivePage(); vwaPage.setZoom(-1); instructionsDisplayed = false; } catch(err){ } }

7.

Use el siguiente cdigo para mostrar u ocultar un mensaje HTML personalizado en el elemento web de Visio Web Access. JavaScript Copiar

// Display or hide the custom HTML message over the Visio Web Access W eb Part. function toggleInstructions() { // Check the state of the instructions. if (instructionsDisplayed) { // If the instructions are displayed, hide them and change the state variable. vwaControl.hideCustomMessage(); instructionsDisplayed = false; document.getElementById("instructions").value = "Show instruct ions";

} else { // The instructions are hidden, so display them and change the state variable. vwaControl.displayCustomMessage( "<h1> Instructions for using this Web Part: </h1>" /* Insert your instructions here. */); instructionsDisplayed = true; document.getElementById("instructions").value = "Hide instruct ions"; } }
8. Bajo el cdigo de JavaScript, agregue una etiqueta HTML </script> de cierre.

Tras terminar de editar el archivo de JavaScript y guardarlo en el sitio de SharePoint, debe insertarlo en el elemento web Editor de contenido de la pgina de elementos web.

Para insertar el archivo de JavaScript en el elemento web Editor de contenido


1. 2. En la pgina de SharePoint, haga clic en la flecha Men de elementos web Editor de contenido y, a continuacin, haga clic en Editar elemento web. Escriba la direccin URL del archivo .js que desea insertar y, a continuacin, haga clic en Aceptar.

Servicios de Visio introduce una nueva forma de mostrar y compartir diagramas y datos en un sitio de SharePoint 2010. Es posible personalizar cmo se muestran estos diagramas en la pgina de elementos web de SharePoint. El Modelo de objetos de JavaScript para Servicios de Visio incluye mtodos que le permiten mostrar su propio contenido HTML en el elemento web de Visio Web Access. Escritura de contenido en un elemento web Editor de contenido El ejemplo de cdigo que se muestra en esta ayuda visual crea un botn HTML para mostrar u ocultar las instrucciones de visualizacin para el elemento web de Visio Web Access. Para ello, el ejemplo usa el mtodo de document.write del elemento web Editor de contenido para crear una entrada HTML <input> con el atributo type="button" (al igual que un elemento HTML

<frame>, el elemento web Editor de contenido contiene un objeto de documento que se puede
usar para obtener acceso al contenido en el mbito del propio elemento web). Cuando se genera el evento onclick del botn, el ejemplo de cdigo llama a la funcin toggleInstructions que muestra u oculta el mensaje HTML personalizado. Aunque el botn de entrada no es necesario para mostrar u ocultar un mensaje HTML personalizado en el elemento web de Visio Web Access, debe usar un elemento web Editor de contenido para

obtener acceso al Modelo de objetos de JavaScript para Servicios de Visio. El elemento web Editor de contenido funciona como un contenedor de su script y lo inserta en la pgina cuando se carga la pgina de SharePoint. Adicin de un controlador al evento Sys.Application.load de AJAX Para cargar su script cuando la pgina cargue, debe agregar un controlador al evento Sys.Application.load de AJAX, que se genera despus de que se hayan cargado el resto de scripts y se hayan creado e inicializado los objetos de la aplicacin. En el ejemplo de cdigo, el evento Sys.Application.load llama a la funcin onApplicationLoad. La funcin onApplicationLoad captura en primer lugar una referencia al elemento web de Visio Web Access al crear un nuevo objeto Vwa.VwaControl y asignarlo a la variable vwaControl. A continuacin, la funcin onApplicationLoad registra la funcin onDiagramComplete como controlador del evento Vwa.diagramcomplete del objeto vwaControl (el Vwa.diagramcomplete evento se genera cuando se carga, se actualiza o se modifica el diagrama). Captura de una referencia al elemento web de Visio Web Access Antes de obtener acceso a la mayor parte de Modelo de objetos de JavaScript para Servicios de Visio, debe capturar primero una referencia a la instancia actual del elemento web de Visio Web Access mediante la creacin de una instancia de la clase Vwa.VwaControl. El ejemplo de cdigo utiliza el controlador del evento Sys.Application.load de AJAX para capturar dicha referencia al crear una instancia de la clase Vwa.VwaControl. El mtodo constructor de la clase Vwa.VwaControl requiere un parmetro: el identificador de elemento web del elemento web de Visio Web Access. El identificador de elemento web del elemento web de Visio Web Access (que tiene el formato WebPartWPQ#) est incluido en el atributo id de la etiqueta primaria principal <div> de la etiqueta <div> que contiene el atributo

class="VisioWebAccess" en la pgina de elementos web.


Nota: Si hay varios elementos web de Visio Web Access en la pgina de elementos web, habr etiquetas

<div> correspondientes con el atributo class="VisioWebAccess".


Existen un par de maneras de averiguar el identificador del elemento web de Visio Web Access:

En el explorador, puede ver el cdigo fuente HTML de la pgina de elementos web de SharePoint y buscar la frase class="VisioWebAccess".

Puede hacer que el cdigo de JavaScript obtenga el identificador del elemento web cuando el script se cargue.

El ejemplo de cdigo utiliza la funcin getVWAWebPartID para obtener el identificador de elemento web del elemento web de Visio Web Access. La funcin usa el mtodo

document.getElementsByTagName para crear una matriz de todas las etiquetas <div> de la


pgina (tambin se puede usar el mtodo document.getElementsByClassName si el explorador lo admite). La funcin recorre cada elemento de la matriz hasta que encuentra el primer

elemento con el atributo class="VisioWebAccess" y devuelve el nodo primario principal de ese elemento. Creacin del controlador para el evento Vwa.diagramcomplete En el ejemplo de cdigo, la funcin onDiagramComplete inicializa la mayora de las variables globales y define el zoom de la pgina mostrada en ese momento en el dibujo. La funcin crea instancias de la clase Vwa.Page (en ingls) y captura una referencia a la pgina en la variable vwaPage. Asimismo, establece el valor inicial de la variable instructionsDisplayed para indicar que las instrucciones no se muestren cuando el dibujo se represente por primera vez. Aunque este ejemplo de cdigo deja oculto el mensaje HTML personalizado cuando el dibujo termina de representarse, puede agregar cdigo a esta funcin onDiagramComplete para que el mensaje HTML personalizado se muestre cuando el dibujo termine de representarse en el explorador. Para ello, es necesario que llame al mtodo VwaControl.displayCustomMessage (en ingls) del objeto vwaControl de la funcin del controlador para el evento Vwa.diagramcomplete. El VwaControl.displayCustomMessage mtodo se aborda en la siguiente seccin. Mostrar mensajes HTML personalizados en el elemento web de Visio Web Access En el ejemplo de cdigo, al hacer clic en el botn HTML del elemento web Editor de contenido, se llama a la funcin toggleInstructions, que muestra u oculta las instrucciones en funcin de su estado actual. La funcin determina primero si el mensaje HTML personalizado se est mostrando al comprobar el valor de la variable instructionsDisplayed. Si el mensaje se muestra, la funcin llama al mtodo VwaControl.hideCustomMessage (en ingls) para descartar el mensaje HTML personalizado. A continuacin, la funcin cambia el valor de la variable instructionsDisplayed a false y modifica el texto que se muestra en el botn del elemento web Editor de contenido. Si el HTML personalizado no se muestra en este momento (es decir, la variable

instructionsDisplayed est establecida en false), la funcin toggleInstructions llama


al mtodo VwaControl.displayCustomMessage para escribir y mostrar el mensaje HTML. El mtodo VwaControl.displayCustomMessage tiene un parmetro requerido, HTML, que debe ser una cadena que contenga el mensaje que mostrar en HTML bien formado. El contenido puede incluir muchos tipos distintos de elementos HTML, como, listas, imgenes o vnculos. Tras mostrar el mensaje HTML, la funcin toggleInstructions establece la variable

instructionsDisplayed en true y cambia el texto que se muestra en el botn del elemento


web Editor de contenido.

You might also like