René Pacios

/* Overflow My Brain & More */

Utilizando componentes C# o VB con HTML5 JS y WinRT

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.Metro-App

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.

newJsApp

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)

image

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:

Public NotInheritable Class Sumador
    Public Property NumA As Integer
    Public Property NumB As Integer

Public Sub New()
End Sub

Public Function Sumar() As Integer
    Return NumA + NumB
End Function

End Class

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]

image

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.

 <h2>Prueba de sumador</h2>

    <input type="text" name="name"id="txtNumA" value=" " />
    <span style="font-size: 2em">+</span>
    <input type="text" name="name"id="txtNumB" value=" " />
    <span style="font-size: 2em">=</span>
    <input type="text" name="name"id="txtResult" value=" " />
    <button onclick="suma()">Calcular</button>

Se nota que lo mio es el diseño, Sonrisa 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 :-)

var suma = function () {

};

y 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

IntelisenseComponent

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

 

var suma = function () {
    var sumador = new SumadorComponent.Sumador();
    sumador.numA = document.getElementById('txtNumA').value;
    sumador.numB = document.getElementById('txtNumB').value;
    document.getElementById('txtResult').value = sumador.sumar();
};

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

image

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.

   public sealed class Sumador
    {
        public Int32 NumA { get; set; }
        public Int32 NumB { get; set; }

        private Sumador()
        {        }

        public Int32 Sumar()
        {
            return NumA + NumB;
        }
    }

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

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

 

Espero que os haya parecido interesante,

Nos leemos, René Pacios

Acerca de René

René Pacios es un apasionado de la tecnología, autodidacta, emprendedor, le encanta el desarrollo web, para moviles, aplicaciones, todo aquello que automatice tareas y haga que las máquinas trabajen para él. Es un gran fan de las tecnologías Microsoft, y le encanta estar a la última siempre que el tiempo se lo permite. Siempre quiso ser cantante, pero creo que en esta vida se va a quedar sólo en canta-mañanas

               

Comentarios (2) -

  • Freire

    19/12/2012 17:11:43 | Responder

    Jojojo como me mola el blog!!!!

    Tas echo un crack!!!!

  • René

    04/05/2013 10:44:23 | Responder

    Muchas Gracias Freire

Agregar comentario

Loading