9

Widget básico

17Nov
Escrito por 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:

1
2
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:

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

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

1
2
3
4
5
6
7
8
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//---[ 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:

1
cfx run

Verán que la primera ves aparece esto:

1
2
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.

primer-addon

y un mensaje en la terminal como este:

1
2
3
4
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:
    enero 17, 2013 a las 9:32 pm

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

    Responder
  2. Alberto Mauel dice:
    enero 18, 2013 a las 8:56 am

    Solo debes de ejecutar el comando cfx xpi y listo.

    Responder
  3. bjvalmaseda dice:
    enero 18, 2013 a las 10:39 am

    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

    Responder
  4. trololo dice:
    marzo 2, 2013 a las 1:26 am

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

    Responder
  5. Dariel Bedey dice:
    noviembre 30, 2013 a las 1:45 pm

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

    Responder
    • abs dice:
      diciembre 2, 2013 a las 7:13 pm

      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.

      Responder

Dejar un comentario