René Pacios

No es ningún secreto que HTML5 y las nuevas bondades de CSS3 están revolucionando la Web y todo ello siempre vemos que va acompañado de una pizca Javascript, obteniendo unos resultados extraordinarios con unas pocas líneas de código.

Por otro lado, Microsoft ha hecho borrón y cuenta nueva con la forma de desarrollar para su nuevo sistema operativo Windows 8 y su entorno Metro, si es verdad que se puede seguir desarrollando aplicaciones clásicas y nuestras aplicaciones clásicas seguirán funcionando en el sistema, pero estás no se integrarán con el entorno Metro de este que es lo cool y que por otro lado nos servirá para desplegar nuestra app tanto en el desktop como en tabletas o teléfonos.

Como ya es costumbre Microsoft, quiere ponérselo fácil a todos los perfiles de desarrolladores, así que ha creado una API(creo que api se queda corto ya que es runtime completo), WinRT. Si tu perfil es de desarrollador de aplicaciones desktop tipo WinForms, WPF puedes utilizar lenguajes de la plataforma .NET (C# o VB) para desarrolladores de la plataforma, C++ si utilizas el lenguaje de los dioses, y usar XAML como capa de presentación, así que si tienes experiencia con WPF estás de suerte, o si por el contrario tu perfil es más de desarrollo Front-End Web puedes desarrollar sobre WinRT utilizando HTML5y JS, como veis nadie se queda fuera.

Y que pasa si yo tengo un componente o alguna librería hecha en .NET, que me costó un huevo montón implementar y parece inviable portarla a JavaScript, tengo que utilizar XALM? Pues la respuesta es no, y esto es lo que voy a contar en este post.

Lo primero que hacemos es crear una aplicación para la Windows Store utilizando Javascript. Abrimos Visual Studio Nuevo Proyecto->Javascript->Aplicación en blanco para este ejemplo más que suficiente.

Lo siguiente que haremos será agregar nuestro componente a la solución, para ello en el explorador de soluciones de Visual Studio, agregamos nuevo proyecto y esta vez seleccionamos [El lenguaje que más rabia nos de]->Windows Store->Windows Component Runtime (si os pasa como a mi en el portátil el VS en la lengua de cervantes, fijaros en la imagen)

Este nuevo proyecto aparentemente es como un proyecto clásico de biblioteca de clases, será visual studio quien se encargue de compilarlo para procesadores ARM o arquitecturas 64/x86. Otra cosa que llama la atención es que las clases expuestas por el componente están definidas como NotInheritable (Sealed en C# al final os pondré el código en C#, pero podríamos hacer un debate sobre que nombre es más intuitivo xD) Así que vamos a implementar o adaptar ese código que tanto me ha costado implementar en su día:

Como podéis ver es un código muy sencillo pero para el ejemplo nos va a servir perfectamente. El siguiente paso será añadir la referencia de nuestro componente “Sumador” a nuestra aplicación  WinRT JS, para ello el proceso es tal y como nos tiene acostumbrado Visual Studio, botón derecho en el proyecto->Agregar Refencia… Y en el cudro de diálogo seleccionamos Solucion->proyectos->[el componente que deseemos agregar]

Ya tenemos nuestro componente referenciado, pero ahora como accedo a las funciones de este desde mi aplicación HTML5?…. muy fácil, con JavaScript, para ello vamos a definir una función sumar en el lado cliente, para no complicarlo mucho crearemos la función en el archivo js/default.js que nos crea la plantilla de Visual Studio.

Antes vamos a diseñar el interfaz de nuestra calculadora, para ello vamos al archivo default.html y agregamos el siguiente código dentro del tag body.

Se nota que lo mio es el diseño, ahora nos vamos al fichero default.js y al final del fichero y crearemos nuestra función suma, que es llamada desde el click del botón definido en la parte html. Esto también se podría haber hecho obteniendo una referencia al botón desde el archivo js y asignando un listener al evento click para no mezclar los códigos, pero bueno se trata de un ejemplo sencillo :-)

Lo único que necesitamos es una instancia de nuestra clase sumador del componente, para ello creamos un objeto sumador y vemos que Visual Studio nos ayuda con el Intelisense

El código JavaScript resultante nos quedará algo así, sencillo verdad:

Si ahora lo vemos en ejecución, funciona!!!!!

Como vemos es una forma sencilla de reutilizar código .Net que hayamos implementado en nuestras nuevas aplicaciones WinRT basadas en JavaScript.

Os dejo el ejemplo de como quedaría nuestro componente implementado con C#, y la solución con el ejemplo y los componentes tanto en C# como en VB.

Lo siento, pero no me considero capacitado para mostraros el mismo ejemplo en el lenguaje de los dioses

Os dejo el enlace para que os descarguéis el ejemplo: Descargar

Espero que os haya parecido interesante,

Nos leemos, René Pacios