Beruflich Dokumente
Kultur Dokumente
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 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.
<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
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.
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
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
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