Complementos para la pantalla de inicio de Firefox para Android

8 marzo, 2015 5:40 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

El API de Firefox Hub permite a complementos añadir nuevos paneles a la pantalla de inicio de Firefox para Android, donde los usuarios normalmente encuentran listados los sitios mas visitados, marcadores e historial. Estas APIs fueron introducidas en Firefox 30, pero en las versiones 31 y 32 se añadieron mas características y arreglos. De hecho, ya puedes encontrar algunos de estos complementos en addons.mozilla.org y existe una plantilla inicial de código en github para ayudarte a comenzar.

image01
image00

Visión general

Existen dos principales componentes para construir un complemento en la pantalla de inicio: crear un panel, y almacenar datos para ser mostrados en ese panel. Los paneles en la pantalla de inicio consisten en diferentes vistas, donde cada una muestra información obtenida desde un conjunto de datos.

Creando un nuevo panel

Para crear paneles en el inicio de Firefox para Android, se utiliza el API Home.panels para registrar panel. La llamada de registro requiere un identificador del panel y una llamada de retorno (función) como parámetros. Esta última es llamada para generar dinámicamente un objeto de opciones cuando un panel se instala o actualiza, permitiendo realizar cambios dinámicos sobre el mismo.

function optionsCallback() {
   return {
      title: "Mi Panel",
      views: [{
        type: Home.panels.View.LIST,
        dataset: "mi.conjuntodatos@midominio.org"
      }]
   };
}

Home.panels.register("mi.panel@midominio.org", optionsCallback);

Siempre se debe registrar el panel en el inicio, pero cuando realmente se desea que aparezca por primera vez en la página de inicio del usuario (por ejemplo cuando tu complemento se está instalando), también es necesario instalar explícitamente el panel mediante:

Home.panels.install("mi.panel@midominio.org");

Se pueden modificar las opciones de la llamada de retorno para personalizar la forma en que los datos son mostrados en el panel. Por ejemplo, puedes escoger mostrar tus datos en una malla o en una lista, personalizar la vista a mostrar cuando no hay datos o ejecutar una acción cuando el usuario toca uno de los elementos.

Almacenando datos para el panel

Para mostrar algo en tu nuevo panel de inicio, utiliza HomeProvider API para guardar datos. Esta llamada permite almacenar y borrar datos de forma asíncrona, así como también registrar una llamada de retorno para permitir al navegador sincronizar periódicamente los datos por ti.

La API de HomeProvider te da acceso a objetos de tipo HomeStorage, los cuales puedes interactuar con ellos para guardar y borrar datos desde un conjunto de datos. Estos métodos son diseñados para ser usados con Task.jsm para ejecutar transacciones asíncronas en una tarea.

let storage = HomeProvider.getStorage("mi.conjuntodatos@midominio.org");
Task.spawn(function() {
  yield storage.save(items);
}).then(null, Cu.reportError)

Desde Firefox 31, se expandió el soporte de API para guardar, remplazando los datos existentes por ti de forma conveniente, con el fin de refrescar periódicamente tu conjunto de datos.

function refreshDataset() {
  let items = fetchItems();
  Task.spawn(function() {
        yield storage.save(items, { replace: true });
  }).then(null, Cu.reportError);
}
 
HomeProvider.addPeriodicSync("my.dataset@mydomain.org", 3600, refreshDataset);

Esta porción de código se asegurará de que los conjuntos de datos sean refrescados cada 3600 segundos (1 hora).

Novedades en Firefox 32

En Firefox 32 se agregaron las siguientes características al conjunto de APIs de Firefox Hub:

Controlador de actualizaciones

Adicionalmente al soporte de actualizar periódicamente los datos, hemos agregado soporte para «hale para refrescar», dando poder a los usuarios para refrescar manualmente los datos del panel. Si deseas expandir esta funcionalidad, puedes agregar una propiedad onrefresh para ver tu declaración.

function optionsCallback() {
  return {
    title: "Mi Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: "mi.conjuntodatos@midominio.org",
      onrefresh: refreshDataset
    }]
  };
}

Con esta nueva línea, al deslizar hacía abajo en tu panel lanzará un indicador que llamará a la función refreshDataset. El indicador desaparecerá después que se termine una llamada de almacenamiento, hecha para ese conjunto de datos.

Vista de autenticación

Se ha añadido soporte para una vista de autenticación, para facilitar a tu complemente el acceso a datos que requieren autenticación. Esta vista incluye espacios para textos e imágenes, así como también un botón que lanza un flujo de autenticación. Para usar esta funcionalidad, puedes añadir una propiedad auth en la declaración del panel.

function optionsCallback() {
  return {
    title: "Mi Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: "mi.conjuntodatos@midominio.org"
    }],
    auth: {
     authenticate: function authenticate() {
        //Código para autenticar
       Home.panels.setAuthenticated("mi.panel@midominio.org", true);
     },
     messageText: "Por favor inicia sesión para mostrarte datos",
     buttonText: "Iniciar sesión"
   }
  };
}

Por defecto, la vista de autenticación aparecerá la primera vez que tu panel es instalado, y la función para autenticar será llamada cuando el usuario toca el botón en la vista. Queda como tarea tuya, llamar a setAuthenticated(true) cuando el usuario realice exitosamente el flujo de autenticación o llamar a setAuthenticated(false) cuando el usuario ya no está identificado. Estos estados persisten entre ejecuciones del programa, así que queda a tu criterio reiniciarlos cuando sea necesario.

Trabajo futuro

Tenemos ideas de como expandir estas APIs, pero por favor, ¡danos a conocer si hay algo que te gustaría ver! También estamos buscando nuevos contribuidores para Firefox para Android, y nos gustaría ayudarte a empezar escribiendo parches.

The following two tabs change content below.
Colaborador de Mozilla Venezuela e Hispano en las áreas de desarrollo y medios sociales, entre otros. También soy desarrollador Web, Skateboarder, Profesor universitario, jugador de Playstation y PC, usuario Linux, Blogger, Geek, entre otros.

Compartir artículo:

  • ¡Participa!

    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa