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:
1 2 | $ cd /user/abs/addon-sdk-1.16$ source bin\activate |
Windows:
1 2 | cd D:\Installers\Desarrollo\Mozilla\addon-sdk-1.16bin\activate |
Ahora creamos una carpeta en la cual tendremos los ficheros del addon y hacemos lo siguiente:
GNU/Linux:
1 2 | $ cd /user/abs/example$ cfx init |
Windows:
1 2 | cd C:\Users\abs\Desktop\TallerAustralis\examplecfx 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.
1 2 3 4 5 6 7 8 9 | {"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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //Incluimos la api que nos permite crear el botónvar {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:
1 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | //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 buttonvar 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.htmlvar 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 ventanafunction 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.
1 2 3 | 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.
1 2 3 4 5 6 7 8 9 10 | 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.
1 2 3 4 5 | 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.
es posible crear un addons parecido al de los marcadores que tiene como doble botones
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, ……
Si es posible cambien la extension a .tar.bz2 para que se peda descargar desde los jovenclub porque la extension .zip esta baneada.
Salu2s
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??