Hola Metro en JavaScript para Windows 8

Puedes descargar las herramientas, la versión consumer preview del sistema operativo y ejemplos desde la página de windows 8 para desarrolladores

 

Let’s Go!!

Arrancamos Visual Studio 11 y empezamos con una plantilla de proyecto en blanco para JS. Nos va a pedir una licencia de desarrollador, cuando le confirmamos que queremos una e introducimos nuestros datos, nos abre la plantilla del proyecto.

Empezamos con la plantilla en blanco, como al abrirla no tenemos ni idea de lo que significa, de cuál es el punto de entrada, de que significa ese “use strict” … ¿?

 

image

… pues sin que sirva de precedente me leo la documentación de la plantilla que referencia en el archivo ^^

http://msdn.microsoft.com/en-us/library/windows/apps/hh758331.aspx 

Y a grandes rasgos, lo que explica es esto:

Archivos del proyecto

default.html

  La página principal de la aplicación. Un HTML5 con referencias a las librerías de WinJS y a las librerías por defecto de la aplicación (default.css y default.js)

image

default.js

Es el code behind, donde tenemos el código que va a ser ejecutado al arrancar la aplicación. Es el punto de entrada de la aplicación, al referenciarlo solo tiene una llamada a función anónima que se ejecuta sola.

Me explico… cuando en Javascript declaramos una llamada anónima, normalmente va como parámetro en una función, para que se ejecute automáticamente, como por ejemplo actuando de callback

   function miFuncion (1,2, function() { ….. } );

Pero si la declaramos entre paréntesis, estamos declarándola y ejecutándola en la misma sentencia.

    ( function ( ) { console.log(‘hola’); } ) ( );

Y podríamos incluirle otras funciones dentro, propiedades, asignar valores de retorno… y en definitiva construir un objeto/módulo… ¿no?

image

Pues esta es la estructura aproximada que vamos a utilizar en Windows8 con Javascript, ahora con el ejemplo veremos los cambios, pero no tiene mucho misterio =) Si quieres leer sobre el tema, busca sobre el module pattern en JavaScript

En esa función que vemos, se obtiene una referencia a la propia aplicación   var app = WinJS.Application, se hacen un par de tareas relacionadas con la gestión de eventos de la aplicación (onactivated, oncheckpoint), se gestiona cómo se ha activado la aplicación (launch) y se arranca con app.start()

Podríamos decir que el default.js, es el main de nuestra aplicación metro en JS

default.css

  La plantilla de estilos. prácticamente vacía con 4 media queries predefinidas para que pongamos nuestros estilos

 

Entonces… ¿el ciclo de eventos?

Con la estructura de la aplicación definida tenemos que ver dónde meter nuestro mensaje de hola mundo y cómo mostrarlo en el HTML, hay otra página que nos cuenta cómo funciona el ciclo de eventos, pero a grandes rasgos, lo que nos viene a decir es:

activated. WINRT activado

loaded. Se ha cargado el DOM

ready. … pues eso… ready

checkpoint… pasamos a suspendido

unload… a punto de ser descargada

 

Hola Metro

En base a lo que hemos comentado, para hacer el Hola Metro se me ocurren varias opciones

Capturar el evento onReady para que llame a una función que meta en alguna “clase” /módulo y que se muestre el hola mundo en algún elemento del DOM… pero realmente no quiero que sea automático, quiero que el usuario pulse… así que lo descarto.

En lugar de capturar un evento de la aplicación, capturar alguno de un evento del DOM y que llame a una función JS y ponerla en línea en el HTML… ok… pero el código en línea s para gente triste y yo soy un espíritu alegre

En lugar de capturar un evento de la aplicación, capturar alguno de un evento del DOM y que llame a una función JS definida en un módulo… oh yeah!  ESTA es la opción que escojo.

 

Tras trastear en diferentes aplicaciones de ejemplo, me crezco y me decido a intentarlo. Lo primero es aplicar crear una función que se ejecute automáticamente. Me creo saludos.js y empiezo. El “use strict” es una funcionalidad de ECMAScript 5 que hace más “estricto” el Javascript, por ejemplo no permitiéndonos declarar variables sin ‘var

image

Luego vamos a registrar el contenido de esa función en la aplicación. Según la ayuda en MSDN El primer parámetro es el nombre del namespace… escojo Saludetes

image

y el segundo parámetro una colección de miembros en formato JSON, en nuestro caso, solo hace falta uno, el método saludar

image

y dentro de la función… una implementación de DOM y JavaScript de las de toda la vida

image

Bien… ahora me voy al .html e incluyo varias cosas. Una referencia a saludos.js que acabo de crear, un botón para iniciar la acción y un span que actuará de label

 

image

Y compilo

 

image

… y al hacer click…

image

 

funciona! ^^

 

Para cerrar la aplicación:

pulso la tecla de inicio y vuelvo al visual studio para parar la depuración

la cierro arrastrando hacia abajo desde el margen superior

la cierro desde el menú izquierdo

 

No ha sido tan difícil como parecía, verdad? Espero que haya podido servir como referencia para ese primer ‘hola metro’ que tengáis que hacer en Win8 con JS

 

Happy Hacking!

Publicado por

4 comentarios en “Hola Metro en JavaScript para Windows 8”

  1. Pero con javascript se pueden hacer aplicaciones completas o sólo widgets o así?

    Si se pueden hacer aplicaciones serias en javascript para windows de forma nativa como en Adobe Air con Html y js puedo ponerme muy cachondo…

    De ser así también, ¿qué pasa con WPF?

  2. @Asier Las aplicaciones nativas Metro las puedes hacer o bien con HTML/JavaScript y luego tirando del runtime de win8 … o bien con XAML/.NET o XAML/C++

    Pero la respuesta es SI. Con HTML y JavaScript te haces una aplicación nativa Windows 8 completa que se distribuye por la Windows Store =)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *