- El ejemplo desarrollado en el artículo y su código fuente
- El anterior artículo de esta serie, en el que usamos los estilos de FirefoxOS para hacer la ventana principal
- Nuestra introducción a LungoJS y un pequeño tutorial de JSON
- Las páginas de LungoJS y QuoJS, en donde podréis encontrar información sobre estos frameworkx
LungoJS
Para comenzar vamos a hacer un esquema simple de navegación con LungoJS: La pantalla principal, con una lista a modo de menú con un único elemento que llevará a otra pantalla en blanco con una cabecera que tendrá un botón de volver a la pantalla anterior. Vamos a ver el resultado, antes de hablar del código:
Naturalmente en las capturas no se aprecia la transición de las pantallas, para lo que podéis probar el prototipo. Por lo demás es un caso muy simple. Veamos ahora la parte del código necesario para que esto funcione (solo muestro el contenido del <body>, dado que el resto son simples referencias a archivos de la librería):
<section id="main" data-transition=""> <header data-title="Learn Experiment"> </header> <article id="menu" class="active list scroll"> <ul>
<li class="arrow">
<a href="#menu" data-router="section">
<strong>Choose the hiragana</strong>
</a>
</li>
</ul>
</article>
</section>
<section id="menu" data-transition="slide">
<header data-title="Choose the hiragana">
<nav class="left">
<a href="#back" data-router="section" class="left">
<span class="icon left blue"></span>
</a>
</nav>
</header>
<article id="menu-article" class="active list scroll">
</article>
</section>
Anteriormente dije que en la programación con HTML casi podríamos funcionar solo con etiquetas <div>, pero esto no es así para LungoJS, que aprovecha las nuevas etiquetas de HTML5 para simplificar el código dando mayor expresividad:
- Las dos pantallas de la aplicación se distinguen por los dos bloques <section> (líneas 1 y 17). Tienen un identificador cada una y la segunda usa una propiedad "data-transiution" que define la animación entre una y otra como un "slide".
- Dentro de cada pantalla hay una cabecera <header> y un <article>. El segundo es el contenido de la pantalla, mientras que el primero es la barra azul de la parte superior que contiene el título, definido con el atributo "data-title"
- Además la segunda contiene un elemento <nav> (línea 19) que sirve para definir los botones de navegación. En este caso un enlace a la página anterior (href="#back").
- En la primera pantalla se puede ver, dentro del artículo, una lista (línea 7) con un único elemento con el texto "Choose the Hiragana" (línea 10) que es un enlace a la segunda pantalla gracias de nuevo al atributo "href", que apunta a "#menu"
- Hay mochos otros atributos que no he comentado por ser simples cuestiones de diseño, pero si voy a comentar el atributo "data-router". En resumen, indica la manera en que se abre el enlace en LungoJS. En este caso, en el que el valor es "section", lo que hace es abrir una nueva sección según el "id" indicado, pero hay otras opciones. Es un tema importante por que el comportamiento normal de los enlaces es muy distinto a este.
Así que hemos visto como con LungoJS es fácil definir un menú de navegación entre dos pantallas con solo editar el HTML, sin necesidad de meter programación. Y lo que es más: Este interfaz se verá igual, y funcionará bien en cualquier dispositivo moderno.
Creando el menú dinámico
Definir así toda la navegación de la aplicación sería posible. Pero en nuestro caso tenemos muchas cosas comunes de una pantalla a otra, y por ello nos viene mejor crear una definición simple de la estructura de la aplicación con JSON y generar el contenido dinámicamente, de tal manera que reutilizaremos más el código que hagamos.
Empecemos por ver la estructura en JSON:
var menus=[
{
'titulo':'Escoger el hiragana',
'ejercicios':[
{'titulo':'Vocales, k & s'},
{'titulo':'Sonidos t, n & h'},
{'titulo':'Sonidos m, y, r & w'},
{'titulo':'Sonidos k, g, t & d'},
{'titulo':'Sonidos s, z, h, b & p'},
{'titulo':'Kanas similares'},
{'titulo':'Diptongos 1'},
{'titulo':'Diptongos 2'},
]
},
{
'titulo':'Escribir el romaji',
'ejercicios':[
{'titulo':'Vocales, k & s'},
{'titulo':'Sonidos t, n & h'},
{'titulo':'Sonidos m, y, r & w'},
{'titulo':'Sonidos k, g, t & d'},
{'titulo':'Sonidos s, z, h, b & p'},
{'titulo':'Kanas similares'}
]
},
{
'titulo':'Escribir el hiragana',
'ejercicios':[
{'titulo':'Vocales, k & s'},
{'titulo':'Sonidos t, n & h'},
{'titulo':'Sonidos m, y, r & w'},
{'titulo':'Sonidos k, g, t & d'},
{'titulo':'Sonidos s, z, h, b & p'},
{'titulo':'Kanas similares'}
]
}
]
En resumen: Es una lista de menús, y cada menú tiene un título y una lista de ejercicios, cada uno de los cuales tiene a su vez su propio título. La idea es que a partir de esta estructura se genere el interfaz de navegación de la aplicación de manera automática. La ventaja, además del código que nos ahorramos, es que mañana podremos cambiar cosas muy fácilmente al reutilizar el código.
A partir de esta información creamos un proceso que genera el menú principal:
for(var menu in menus){
var opcion=$$('<li class="arrow"><a id="menu'+menu+
'" href="#ejercicios" data-router="section"><strong>'+
menus[menu].titulo+'</strong></a></li>');
$$('#menu ul').append(opcion);
}
- La línea 1 abre un bucle "foreach" sobre la lista de menús, lo que viene a significar que "para cada menú en menús, hacemos esto". Es decir, el contenido entre corchetes se repite tres veces, una por cada menú que tenemos.
- Conviene aclarar que en los bucles "foreach" de javascript no sacamos el elemento en si, sino su clave. En este caso la variable "menu" tomará los valores 0, 1 y 2 en cada repetición. Gracias a ello podremos acceder a cada elemento como menus[menu], como veremos a continuación.
- La segunda línea crea una variable "opcion" con el código necesario para hacer cada uno de los elementos de la lista principal. Aquí reside una de las potencias de la programación dinámica, pues de haberlo hecho de manera estática habríamos tenido que repetir este código por cada elemento, mientras que cualquier cambio que queramos hacer ahora nos basta con hacerlo aquí.
- En esta misma línea de código tenemos dos variables que intercalamos: la variable "menu" en el "id", lo que hará que se generen los identificadores "menu0", "menu1" y "menu2", y el título de cada uno de los menús, al que accedemos mediante "menus[menu].titulo"
- Por último añadimos la opción a la lista del artículo identificado como "menu" (línea 6). Quizás os hayáis fijado que estamos usando "$$" para acceder a las funciones. La sintaxis es prácticamente la misma que la de jQuery, pero no se trata de esta librería, sino otra de los mismos creadores de LungoJS: "QuoJS", y por ello el uso de "$$" en lugar de "$" que usa jQuery.
Con esto, al ejecutar el programa, aparecerá el menú principal con las tres opciones iniciales. Pero ahora toca ir un paso más allá: Que al pulsar en cada una de las opciones aparezcan los submenús con sus respectivas opciones.
Respondiendo a eventos
En la función de inicialización escribiremos la siguiente instrucción: "$$('#menu a').tap(pulsaOpcion)". De nuevo las dos "$$" nos indican que es una función de QuoJS, que actua sobre "#menu a", es decir, los enlaces del menú principal. Y aquí aparece algo nuevo, la función "tap". Es algo que es también propio de QuoJS, un manejador de evento para el evento de pulsar sobre la pantalla en un móvil. Y es que QuoJS está pensado para móviles. En realidad este manejador en el ordenador no es distinto al "click" de jQuery, pero con QuoJS nos aseguramos de que funcione bien en móviles, y además su librería de eventos es mucho más amplia en función de los gestos típicos que podemos realizar sobre la pantalla del móvil.Pero en esta ocasión no necesitamos saber más. Simplemente sirve para detectar cuando el usuario abre un menú para cargar sobre el los datos correspondientes:
function pulsaOpcion(){
var menu=$$(this).attr('id').substr(4)
$$('#ejercicios header .title').text(menus[menu].titulo);
$$('#ejercicios ul').empty()
for(var ejercicio in menus[menu].ejercicios){
var opcion=
$$('<li class="arrow"><a id="ejercicio'+menu+'-'+ejercicio+
'" href="#ejercicio" data-router="section"><strong>'+
menus[menu].ejercicios[ejercicio].titulo+
'</strong></a></li>');
$$('#ejercicios ul').append(opcion);
}
}
- En cuanto se pulsa una opción lo primero que hacemos es obtener el identificador de la opción pulsada (línea 1). Como este identificador es del tipo "menuN", podemos obtener de esta manera los datos correspondientes a dicha opción.
- A continuación ponemos el título de la opción pulsada en la segunda pantalla "ejercicios" (línea 3).
- En la línea 5 vaciamos cualquier elemento que haya en la lista de la segunda pantalla para así insertarlos de nuevo.
- Esto se hace a continuación, con un bucle similar al que ya hemos visto solo que en este caso recorremos las opciones del submenú ("menus[menu].ejercicios")
Con esto ya obtenemos todo el menú de navegación de la aplicación: Tres opciones en el menú principal que nos dan acceso a 20 ejercicios:
Ese será el siguiente paso, crear la pantalla del ejercicio, que para cada opción recibirá diferentes contenidos, igualmente definidos mediante JSON. Veremos con ello mucha más funcionalidad, como reproducir sonido. Poco a poco iremos definiendo una aplicación real, que espero terminar por incluir en el market de FirefoxOS y en otras plataformas, para poder ver así un ejemplo completo de todos los pasos del desarrollo.
