4

Australis & Addon-SDK (+Presentación)

30May
en Add-on SDK, Firefox, Tutoriales

Hace algunas semanas estuvimos presentando en un taller las nuevas APIS que brinda el Addon-SDK 1.16 para la interfaz Australis, disponible ya en la última versión estable de Firefox. En este post vamos a ver cuáles son los nuevos componentes y cómo utilizarlos en nuestros addons.

Lo que necesitas para crear un addon es lo siguiente:

Desde la terminal nos movemos hacia la carpeta que tiene el addon-sdk que descargamos y escribimos lo siguiente:

GNU/Linux:

$ cd /user/abs/addon-sdk-1.16
$ source bin\activate

Windows:

cd D:\Installers\Desarrollo\Mozilla\addon-sdk-1.16
bin\activate

Ahora creamos una carpeta en la cual tendremos los ficheros del addon y hacemos lo siguiente:

GNU/Linux:

$ cd /user/abs/example
$ cfx init

Windows:

cd C:\Users\abs\Desktop\TallerAustralis\example
cfx init

Ya tenemos el esqueleto de nuestro addon. Ahora modifiquemos el fichero package.json para poner algunos detalles de nuestro addon como pueden ser: nombre, autor, versión, descripción, entre otros datos.

{
"name": "ejemplo",
"title": "El Ejemplo",
"id": "jid1-ZB1jihyNYK2aiA",
"description": "Un ejemplo",
"author": "abs",
"license": "MPL 2.0",
"version": "1.0"
}

El próximo paso será crear una serie de recursos que utilizaremos en nuestro ejemplo. Crearemos los íconos que utilizará el botón (aurora-32.png y aurora-16.png), una página para un panel (panel.html) y otra para el frame y el sidebar (frame.html). Podemos descargar aquí el ejemplo completo, y extraer los ficheros de la carpeta /data para ponerlos en nuestro propio ejemplo.

Todos los códigos que se muestran a continuación se definen dentro del fichero /lib/main.js. Este fichero es el encargado de encapsular toda la lógica del addon.

Ahora que ya estamos listos veamos cuáles son las novedades de Australis que podemos utilizar:

Botones (Buttons)

Se pueden crear botones para añadirlos a la barra de herramientas de Firefox o tus propias barras de herramientas. Estos botones se pueden programar para que respondan al ser clickeados.

Un botón también se puede posicionar en el menú principal.

//Incluimos la api que nos permite crear el botón
var {ActionButton} = require("sdk/ui/button/action");

//Inicializamos el botón que por defecto aparece
//en la barra de herramientas de Firefox.
var button = ActionButton({
    id: "mi-button",
    label: "Ejemplo",
    icon: {
      "16": "./aurora-16.png",
      "32": "./aurora-32.png"
    },

//al ocurrir un click, escribe hola mundo en la consola.
    onClick: function(state) {
        console.log("Hola mundo");
    }
  });

En este código creamos un botón que al hacer click sobre él, muestra en la consola un mensaje “Hola mundo”. Para probar nuestro addon escribimos en la consola:

cfx run

Botones (Toggle Buttons)

Tiene las mismas características que un botón normal pero además incluye dos estados, cuando se clickea pasa a activado y cuando vuelves a clickearlo se pone desactivado.

Veamos como mostramos un panel utilizando este componente.

//Incluimos las librerías necesarias.
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");

//Inicializamos el toggle button
var button = ToggleButton({
  id: "mi-button",
  label: "Ejemplo",
  icon: {
    "16": "./aurora-16.png",
    "32": "./aurora-32.png"
  },

//Al ocurrir alguna acción sobre el botón
//le decimos que ejecute la función handleChange.
  onChange: handleChange
});

//Inicializamos el panel, en el cargamos el fichero panel.html
var panel = panels.Panel({
  contentURL: self.data.url("panel.html"),
  onHide: handleHide
});

//Al clickear el botón, si está en estado activado
//mostramos el panel.
//NOTA: A partir de Firefox 30, se pueden ubicar los
//paneles a partir de la posición de un objeto.
//En Firefox 29 sino le asignamos una posición específica
//muestra el panel en el medio de la ventana
function handleChange(state) {
  if (state.checked) {
    panel.show({
      position: button
    });
  }
}

//Al ocultarse el panel, cambiamos el estado
//del botón a desactivado.
function handleHide() {
  button.state('window', {checked: false});
}

Marcos (Frames)

Permite crear marcos que pueden encapsular HTML, JavaScript y CSS. Estos marcos se pueden agregar a las barras de herramientas del Firefox o al menú principal.

var frame = require("sdk/ui/frame").Frame({
  url: "./frame.html"
});

Si probamos nuestro código, desde la vista de personalización podemos ver nuestro frame y agregarlo hacia la barra de herramientas.

Barras de herramientas (toolbars)

La barra de addons que aparecía en el fondo se eliminó, pero ahora tenemos la posibilidad crear nuestras propias barras más personalizables. Sobre estas barras de herramientas podemos agregar botones, widgets y frames.

var frame = require("sdk/ui/frame").Frame({
  url: "./frame.html"
});
var toolbar = require("sdk/ui/toolbar").Toolbar({
  title: "All",

//Agregamos a items todos los objetos que queramos mostrar
//en la barra de herramientas
  items: [frame]
});

En el ejemplo creamos una barra de herramientas y le agregamos un frame.

A una barra de herramientas solo se pueden agregar botones y marcos. En el caso de los botones solo es posible agregarlos a partir de la versión 30 de Firefox.

Por desgracia la lista de ítems es de solo lectura, por lo que en tiempo de ejecución no podemos agregar nuevos elementos a la barra de forma dinámica.

Sidebars

Permite la creación de barras laterales que cargan contenido web (HTML, JavaScript y CSS). Estas barras aparecen a la izquierda de la pantalla y se pueden ocultar o mostrar al igual que las barras laterales propias de Firefox.

var sidebar = require("sdk/ui/sidebar").Sidebar({
  id: 'mi-sidebar',
  title: 'Ejemplo',
  url: require("sdk/self").data.url("frame.html")
});

En este sidebar cargamos la página frame.html. Si queremos mostrar la barra accedemos a la siguiente opción:

Luego aperecerá en pantalla.

Esto es todo por ahora, si quieren más información pueden acceder aquí. También les dejo la presentación con la que hicimos el taller acá en la Universidad por si alguien se embulla y desea compartir el conocimiento.

En un próximo post hablaremos sobre el nuevo debugger que tenemos disponible para los desarrolladores de addons.

Descargar el ejemplo completo.

Abrir presentación “Australis UI + Addon-SDK”

4 Comentarios

  1. yaicel dice:

    es posible crear un addons parecido al de los marcadores que tiene como doble botones

  2. Mano para poder descargar el addon SDK necesito que me cambies la extensión del archivo a .pdf es que desde los joven clubs no se puede descargar nada con esa extensión.

    Saludos a mis colegas Erick , el Pochi, Manin Yunier, etc…
    Lidiexy, Pedro, Lara, El negro, ……

  3. Alberto Manuel Ochoa fabre dice:

    Si es posible cambien la extension a .tar.bz2 para que se peda descargar desde los jovenclub porque la extension .zip esta baneada.

    Salu2s

  4. krlos dice:

    HOlaaaa. Quiero aprender a desarrollar addons para firefox pero no se por donde empezar y no veo en el sitio bibliografia y herramientas. Alguien me puede ayudar??

Dejar un comentario