Agregando controles Silverlight a un diagrama de Visio Services

Hasta el momento he omitido intencionalmente el mencionar uno de los hechos mas relevantes, y que tiene que ver con la forma en que el diagrama es dibujado (rendereado) en el navegador.

Existen dos únicas formas en las que el diagrama de Visio puede ser dibujado en el navegador, en formato Raster ó usando Silverlight!!!.

Así es, una de las tecnologías favoritas de este humilde desarrollador, vuelve a hacerse presente en un escenario en el que la interacción del usuario con el navegador es parte fundamental de la experiencia final de uso. Ahora bien, habrá quienes en este punto aún no tengan claro el porqué de mi exaltación por el uso de Silverlight para renderear el diagrama de Visio, es decir, si, todos ya sabíamos que Silverlight es usando ampliamente en varios aspectos de SharePoint 2010 porque esto brinda, sin lugar a dudas, una experiencia de usuario mejorada. Pero… volviendo a Visio Services… y qué más da que se use Silverlight para dibujar el diagrama en el navegador?

Pues el hecho relevante es, como todos sabemos, que Silverlight expone una API en JavaScript para la manipulación y creación de objetos desde el lado del cliente (JavaScript), puede sonar redundante puesto que Silverlight de por sí se ejecuta del lado del cliente (navegador). Ahora sí, las piezas comienzan a encajar en este rompecabezas.

La razón de este post es demostrar cómo podemos, mediante el uso de la API de Silverlight en JavaScript, agregar objetos al diagrama, una vez que ha sido dibujado en el navegador. Este es el punto medular, ya que con un poco de imaginación y algunas líneas de código (en su mayoría JavaScript) podemos crear diagramas muy atractivos al usuario final.

Dado que ha sido demasiado preámbulo, nada mejor que algunas líneas de código que ejemplifiquen mucho mejor de que estamos hablando.

Agregando objetos Silverlight(xaml) al diagrama

Tomando como base el diagrama del post anterior, vamos a modificar un poco el código que utilizamos para contar los shapes que existen dentro del diagrama para agregar los objetos Silverlight.

Sys.Application.add_load(onApplicationLoad)

//declaramos algunas variables globales que ocuparemos
var vwaControl;
var vwaPage;
var vwaShapes;
var vwaShapeCount;


function onApplicationLoad() {
    //obtenemos la instancia de la Visio Web Access Web Part
    getVwaControl();

    //Nos subscribimos a dos de los eventos que son expuesto por la API
    if (vwaControl != null) {
        vwaControl.addHandler("diagramcomplete", onDiagramComplete);
        vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);           
    }
    else {
        alert("Error connecting to Visio Web Part.  Please contact the site administrator.");
    }
}

function onDiagramComplete() {
 vwaPage = vwaControl.getActivePage();
    //obtenemos la pagina activa con el metodo getActivePage()
    vwaPage.setZoom(80);
 
 //buscamos el contenedor del diagrama, casi siempre un objeto 
 var visioSilverlightID = findVwaRenderingObject();
    var visioSLObject = document.getElementById(visioSilverlightID);
    var canvaselement = visioSLObject.content.findName("Workspace");
 
 try
 {
 //agregamos un objeto 
 var xaml = "";
 //agregamos un objeto 
 xaml+="";
 //agregamos un objeto 
 xaml+=" " ;
 //agregamos un objeto 
 xaml+="";
 //agregamos un objeto 
 xaml+="";
 xaml+="";

 xaml+="";
    var newControls  = visioSLObject.content.CreateFromXaml(xaml,true);
    canvaselement.Children.Add(newControls);
 }
 catch(ex)
 {
  alert(ex.toString());
  throw ex;
 }
}

function onShapeSelectionChanged(source, args){

}

En realidad el código es muy simple, sin mebargo es importante hacer mención aparte de la función que se encarga de crear los controles Silverlight a partir del código XAML, la función createFromXaml, acto seguido solo basta agregarlos al contenedor del diagrama (un objeto Canvas).

Es importante tambien mencionar que no todos los controles Silverlight se pueden crear a partir de esta API (aunque si se pueden manipular, si ya existen). Aquí puedes checar que objetos se pueden crear y cuales no, a través de la API de Silverlight en JavaScript.

Por último algunas referencias y el código js

JavaScript API for Silverlight
Objetos Silverlight expuesto por la API en JavaScript
Visio Services API
Función createFromXaml



Happy Coding!