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” … ¿?
… 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)
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?
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’
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
y el segundo parámetro una colección de miembros en formato JSON, en nuestro caso, solo hace falta uno, el método saludar
y dentro de la función… una implementación de DOM y JavaScript de las de toda la vida
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
Y compilo
… y al hacer click… |
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!
Me va a gustar VS 11… Buen artículo
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?
@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 =)
Brutal