9

Widget básico

17Nov
en Componente visual, Tutoriales

Esta edición será una introducción al uso del Add-on SDK, veremos un ejemplo muy sencillo de cómo usar el componente Widget el cual nos servirá para crear botones en la barra de add-ons.

Preparando

Lo primero es dirigirnos al directorio del Add-on SDK y activarlo para empezar a trabajar:

cd /home/docencia/Desktop/addon-sdk-1.11/
source ./bin/activate

En este caso lo descompacté en el escritorio. Ccreamos una carpeta donde queramos y nos dirigimos a esta(todo esto desde la terminal), luego creamos la plantilla del add-on:

cd /home/docencia/Desktop/miaddon/
cfx init

Hecho esto se creará la siguiente estructura de directorios en la carpeta miaddon:

miaddon/
    data/
    doc/
    lib/
        main.js
    test/
    package.json
    README.md

Descripción:

  • data: datos del add-on: imágenes, ficheros HTML, CSS, JS, etc, opcional.
  • doc: documentación del add-on en lenguaje Markdown, opcional.
  • lib/main.js: código principal del add-on, obligatorio.
  • test: código para propósitos de prueba y depuración, opcional.
  • package.json: define las características y propiedades del add-on tales como autores, preferencias, icono, etc, obligatorio.
  • README.md: es sólo una descripción del add-on u otro contenido que es especificado por el desarrollador, opcional.

El código

Como el add-on es muy básico sólo se va a implementar un simple Widget, editemos el fichero lib/main.js y copiemos ahí este código:

//---[ main.js
//-1
var widgets = require("widget");
//-2
var tabs = require("tabs");
//-3
var btn_correo = widgets.Widget({
	id: "developer-link",
	label: "Desarrollo Firefoxmania",
	contentURL: "https://developer.firefoxmania.uci.cu/wp-content/themes/developer/images/icon.png",
	onClick: function() {
		tabs.open("https://developer.firefoxmania.uci.cu/");
	}
});

¿Que hace?

  1. Importar la API de los widgets.
  2. Importar la API de las tabs.
  3. Construye un Widget que al hacer click abre un tab con url https://developer.firefoxmania.uci.cu/.

Probémoslo ejecutando:

cfx run

Verán que la primera ves aparece esto:

No 'id' in package.json: creating a new ID for you.
package.json modified: please re-run 'cfx run'

No se preocupen esto siempre pasa la primera ves, ejecuten el comando otra vez y verán su primer add-on.

Si todo sale bien verán un icono como este en la barra de complementos.

y un mensaje en la terminal como este:

Using binary at '/home/docencia/Desktop/firefox/firefox'.
Using profile at '/tmp/tmpT2Uo_7.mozrunner'.
Total time: 45.418384 seconds
Program terminated successfully.

Esto indica que todo se ejecutó si problemas.

9 Comentarios

  1. bjvalmaseda dice:

    y como lo guardo para que se pueda instalar en el firefox

  2. Solo debes de ejecutar el comando cfx xpi y listo.

  3. bjvalmaseda dice:

    tengo un problema ayer hice esto mismo en otra máquina y m epincho muy bien…hoy me esta dando un error con el comando cfx que me dice permiso denegado….que puede ser esto

  4. trololo dice:

    wenas ante todo wen tutorial ya lo probe en linux
    y kisiera saber como probarlo en win2…

  5. Dariel Bedey dice:

    Como hacerlo a través de Windows?
    No todos usamos Linux

    • abs dice:

      Es lo mismo solo que no haces el
      source ./bin/activate
      Sino, ejecutas esta linea
      bin\activate

      Lo demás es =. Ahh, tienes que tener instalado el python en windows.

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.