Eventos en WinJS


En el desarrollo de software es indispensable el manejo de eventos que se tiene X tecnología, en algunos se llaman triggers, events, delegates, en fin… En JavaScript estándar existen varios métodos, sin embargo cuando se está construyendo una aplicación WinJS nativa es necesario implementar el API de Microsoft.

Así que para ello y sin dar tantos rodes se necesita un disparador y un escuchador de eventos.

Dispatcher

Para disparar un evento solo es necesario declarar alguno de los dos ejemplos a continuación, el primero si es un evento básico y el segundo por si es necesario adjuntar información a este evento.

Método 1

WinJS.Application.queueEvent("nameOfEvent");

Método 2

WinJS.Application.queueEvent({ type: "nameOfEvent", information: { someProperty: "someValue" } });

Listener

 WinJS.Application.addEventListener("nameOfEvent", function (data) {
     console.log(data.information);
 });

Ejecutar Socket.io en Xamarin.Android


Es muy frecuente querer ejecutar esta grandiosa tecnología en la mayoría de recursos que usamos, por lo que esta vez les enseñaré a implementar Socket.io sin necesidad de usar terceros y sacarse las canas entre versiones y dependencias en servidor, etc etc… como me pasó a mi.

La ejecución es muy sencilla, tenemos un WebView donde se ejecuta código en Razor, HTML y un poco de JS donde se hará un hilo de comunicación de doble vía entre el WebView y el Code-Behind, a esta técnica la llamé BlackOps, ya que aquí se harán todas estas tareas oscuras y transparentes al usuario final, la cual darán una sensación de que corre de manera nativa.

  • En Xamarin Studio crear un nuevo proyecto tipo “Android WebView Application”, en este caso lo llamaré “EtonMessy_And”. 
  • En la carpeta Assets crear otra carpeta llamada “js” y crear un archivo llamado “blackOpsHelper”, descargar el cliente de Socket.io desde https://cdn.socket.io/socket.io-1.0.4.js y JQuery desde http://code.jquery.com/jquery-1.11.0.min.js 
  • En el archivo RazorView.cshtml agregar las referencias necesarias a los script.
  • Como buena práctica es encapsular toda la lógica en un archivo *.js que podría llamarse BlackOpsHelper.js, sin embargo, por razones del diseño del control WebView en Xamarin no es posible ejecutar llamados a Internet (probablemente se corrija más adelante), por el momento..  añadir el código base que he diseñado en una etiqueta “script”.

Sigue leyendo

Crear un backend rápido y poderoso con Socket.io en Azure


Siguiendo con el demo del 11 de diciembre el siguiente paso es crear un backend donde todo orquestará y hará armonía; pero para ello decidí usar Socket.io, ya que es una tecnología muy flexible y desde mi punto de vista, muy sencilla de implementar.

Básicamente en Socket.io se generan eventos y listener de estos eventos donde se necesite, si necesito ejecutar un evento en el backend, simplemente defino el emisor y el receptor, con sus lógicas de negocio dependiendo de como sea el callback.

Para comenzar es vital generar una máquina virtual en el ambiente que nosotros deseemos, sin embargo, con fines de esta práctica todo se hizo en Microsoft Azure y su implementación de Virtual Machines.

  • Ir al portal de administración, Seleccionar nuevo>Proceso>Máquina virtual>De la galería 
  • Sigue leyendo

Crear Website básico en Microsoft Azure


El pasado jueves 11 de Diciembre en Microsoft Branch Colombia se estaba llevando a cabo unas sesiones técnicas para emprendedores del país, en esta sesión accedí a dictar la charla donde se tomarán los siguientes temas:

  • Websites Azure
  • Virtual Machines Azure
  • Windows Phone
  • Xamarin

Por lo cual decidí compartir este código usado durante la sesión en varias secciones, la primera es acerca de la creación básica de Websites en Azure.

Creando el Front End

En esta ocasión se decidió hacer un sitio muy básico y estático que a la final solo se conectará con un Backend publicado en otro lado.

En este caso se simulará un negocio de una disquera musical, sin embargo aclaro que todos los logos y nombres de marca son propiedad registrada.

  • Seleccionar una plantilla adecuada, en este caso ir a http://startbootstrap.com/template-overviews/freelancer/
  • Descomprimir el contenido y renombrar la carpeta a algún nombre fácil de recordar.
  • Modificar las imágenes primarias, donde aparece el muñeco por una foto de algún Dj y agregarle un background a esa sección, esto se hace en el archivo freelancer.css
header {
    text-align: center;
    color: #fff;
    background: #18bc9c;

    background-image: url(../img/DJ-Background.jpg);
  
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
  
    /* Background image doesn't tile */
    background-repeat: no-repeat;
  
    /* Background image is fixed in the viewport so that it doesn't move when 
       the content's height is greater than the image's height */
    background-attachment: fixed;
  
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
}

Sigue leyendo

Windows Phone 8.1: WebView – DefaultBackgroundColor & DOMContentLoaded


En Windows Phone 8.1 Microsoft nos proporciona otro método y dos eventos sumamente importantes para dominar a nuestro antojo el control WebView el cual he dedicado un tiempo para mostrar el potencial de este.

DefaultBackgroundColor

Para comenzar ahora podemos cambiar el color que trae el control por defecto si y solo si, la página no define un background porque ahí si no podemos modificarlo. Esto nos puede servir para modificar una aplicación Web a la identidad de la aplicación, con esto y con las técnicas anteriores podemos tener este WebApp totalmente modificable y parametrizable desde la aplicación de Windows, esto es simplemente magnífico!.

Yendo al grano, DefaulBackgroundColor es una propiedad que se puede leer y escribir (Get, Set) donde pide por parámetro a modificación un objeto tipo Windows.UI.Color y así mismo se puede obtener este tipo de dato.

El uso de esta propiedad es la siguiente:

// Get
Windows.UI.Color myColor = myWebView.DefaultBackgroundColor;

// Set
myWebView.DefaultBackgroundColor = Color.FromArgb(255, 0, 0, 0);

Sigue leyendo

Windows Phone 8.1: WebView – ScriptNotify & InvokeScriptAsync


En WinRT el control WebView proporciona dos métodos el cual hace que le suba el poder casi hasta que las páginas Web podrían interactuar directamente con la aplicación, proporcionando así una visión totalmente distinta de que este control podría comportarse como una especie de IFRAME o un sandbox dentro de nuestra aplicación.

Este detalle es maravilloso pero así mismo puede ser un gran dolor de cabeza ya que podría ser una puerta trasera (backdoor) de nuestra aplicación y así podríamos afectar completamente la seguridad ya que estamos dejando un portal abierto hacia la Web.

“Puesto que este evento se activa mediante código externo, debe tener cuidado sobre lo que se coloca en el controlador de eventos. Para evitar que los scripts malintencionados aprovechen este evento, asegúrese de habilitarlo solo para los URI de confianza” – MSDN

Teniendo en cuenta estas recomendaciones y tomando las medidas de seguridad necesarias procederemos a implementar estos poderosos métodos.

InvokeScriptAsync

Este método como su nombre lo indica es capaz de ejecutar un script declarado en el fuente destino, por lo general sería una función de JavaScript; adicional puede retornar un mensaje tipo string de modo callback.

En C#

await myWebView.InvokeScriptAsync("scriptName", new string[] { "Parameter1", "Parameter2" });

En JS

function scriptName(Param1, Param2) {
    // ..
}

Sigue leyendo

Windows Phone 8.1: WebView


El control WebView hospeda contenido Web en la aplicación el cual está en el ensamblado Windows.UI.Xaml.Controls.WebView definido en las librerías compartidas entre Windows y Windows Phone; mediante este control es posible renderizar código HTML y poderlo visualizar, por lo tanto podemos embeber una página Web en nuestra aplicación la cual nos puede traer grandes beneficios a la hora de desarrollar aplicaciones multiplataforma, sin embargo si se usa sin control o de manera desmedida puede convertirse en un dolor de cabeza ya que se puede volver un vector de ataque a nuestra aplicación.

He ahí el motivo de dedicarle una serie de artículos a este aparente sencillo control del cual podremos aprovechar para sacarle su máximo potencial.

Comenzando, dedicaré este artículo a explicar los ámbitos sencillos.

Primeros pasos

Para implementar un control tipo WebView nuestro proyecto de Windows Phone 8.1 debe tener referenciado el ensamblado Windows.UI.Xaml.Controls.WebView el cual si lo construimos con la ayuda de Visual Studio 2015 o 2013 ya lo tendremos referenciado por defecto.

Es decisión nuestra declararlo en la interfaz gráfica o en el code behind, sin embargo la documentación de las API de Microsoft oficial (MSDN) nos recomienda declarar todos los controles a través de XAML porque ya este fue optimizado para administrar la memoria y demás, sin embargo en casos particulares se puede declarar que en este caso será C#.

Code behind:
Windows.UI.Xaml.Controls.WebView webView = new Windows.UI.Xaml.Controls.WebView();
webView.Name = "myWebView";
XAML:
<WebView x:Name="myWebView" />

Sigue leyendo