Poniendo en funcionamiento la UI[]

Mozilla ha liberado todo Gaia (que como ya comentamos es la última capa del sistema, la que sirve la interfaz) y tiene disponible en sus entrañas toda la UI que pondremos en funcionamiento.[]

Se puede conseguir desde GitHub (está distribuido en dos carpetas:style para los estilos que están terminados y style_unestablecon todo el CSS que puede sufrir cambios, está incompleto o mal documentado) y debemos de descargar los bloques de la UI que queramos usar, o mejor descargar todos los estilos y añadir los que nos hagan falta.[]

Podemos probar el ejemplo funcionando y podemos instalarlo en Firefox OS o si tenemos Firefox en Android (que tras instalar unaapp nos crea un acceso directo en el escritorio del móvil o tablet).[]

Componentes[]

Tenemos que tener en cuenta que los componentes solo incorporan el diseño básico, debemos de controlar nosotros cuando aparecen y desaparecen y las transiciones entre elementos.[]

Estos componentes se pueden llamar desde la propia página o importándolo desde las hojas de estilos (esta es la opción que expone Mozilla). La siguiente lista está compuesta por todos los componentes que podemos añadir en nuestro archivo CSS si todos los componentes que hemos descargado desde GitHub están en la carpeta “resources”.[]

@import url(resources/action_menu.css);     /* menús de acciones */

@import url(resources/buttons.css);         /* botones */

@import url(resources/confirm.css);         /* panel de confirmación */

@import url(resources/headers.css);         /* cabeceras */

@import url(resources/status.css);          /* panel de alerta de estado */

@import url(resources/switches.css);        /* int
erruptores, radio y checkbox */   

               ===Menú de acciones===

El menú de acciones muestra una lista simple, que se debe de mostrar tras un evento desde la interfaz principal y desde este escogeríamos alguna opción de la lista de l[]

a que disponemos.[]

Podemos añadir las opciones que queramos añadiendo nuevos<button> y []

automáticamente el último aparecerá como un botón más destacado, que está pensado para []

cancelar la acción. También tiene un bloque para el título.[]

<form role="dialog" data-type="action" id="sample-menu">

  <header id="sample-title"> Título </header> 

  <menu>

    <button > Acción </button>

    '<button disabled'> Acción </button>

    <button > Acción </button>

    <button > Cancelar </button>

  </menu>

</form>

Botones  Esta UI nos proporciona tres tipos de botones: el estándar, el de la acción recomendada y el de alerta o peligroso (gris, azul y rojo respectivamente). Que pueden ser añadidos en cualquier lugar y reaccionan al pasar por encima y varían también al estar deshabilitados.====También se pueden crear listas de botones compactas, que redondea las esquinas del primer y último elemento automáticamente.====

En la prueba de la UI los botones son los protagonistas, con un interruptor podemos mostrarlos u ocultarlos y con un checkbox podemos deshabilitarlos.[]

<button> Normal </button>

<button class="recommend">Recomendado</button>

<button class="danger">Peligroso</button>



<ul class="compact">

' '

 

Confirmacion.[]

Es un panel similar al del menú de acciones, pero incorpora dos botones en la parte inferior de la pantalla donde nos permite elegir entre continuar la acción o cancelarla, y nos permite añadir un cuadro de texto. []

Podemos añadir distintos títulos, imágenes y bloques a nuestro antojo, como en la imagen lateral..[]

Este bloque de la UI no lo he puesto en funcionamiento porque no actuaba del todo correctamente al añadir textos o imágenes.

<form role="dialog" data-type="confirm">  


  <menu>

    <button>Cancelar</button>                 

    <button class="danger">Borrar</button>    

  </menu>

</form>

Cabecera.[]

Las cabeceras son totalmente personalizables, son el punto fuerte de la UI, tienen tres temas que podemos cambiar y la parte importante está en el botón de la esquina superior izquierda, que es con el que en todo el sistema operativo se retrocede o se accede a los menús.

Podemos añadir varios botones o textos, sin contar el título tenemos tres botones que pueden llevar a otras acciones (uno en la izquierda y otros dos en la derecha) y además podemos añadir una subcabecera.

Disponemos del tema naranja por defecto, el tema oscuro (class="skin-dark") y el tema org

anicque es grisáceo (class="skin-organic").

En la app de demostración de la UI si pulsamos el botón de menú (el botón superior izquierdo) nos sale un menú de acciones para cambiar el color de la cabecera.

<section role="region">

  <header>

    <a href="#"><span class="icon icon-back">Atrás</a> 

    <menu type="toolbar">

      <button><span class="icon icon-edit">Editar</button> 

    </menu>

   

Aplicación

  </header>

  <header>

  </header>

</section>

<label>

  <input type="checkbox">

  

</label>



<label class="danger">

  <input type="checkbox">

  

</label>



<label>

  <input type="radio">

  

</label>



<label class="danger">

  <input type="radio">

  

</label>



<label>

  <input type="checkbox" data-type="switch">

  

</label>