Agregar un Bot贸n a la Barra de Herramienta

This is an archived page. It's not actively maintained.

Para realizar los pasos que se describen a continuaci贸n es necesario tener instalado el SDK y conocimientos b谩sico de cfx.

Este manual usa la API action button, que esta disponible solo para Firefox 29 en adelante.

Para agregar un bot贸n a la barra de herramientas, use los m贸dulos action button o toggle button.

Cree un nuevo directorio, accese al directorio recien creado, y ejecute cfx init.

Luego guarde estos tres iconos en el directrio "data":

icon-16.png
icon-32.png
icon-64.png

Luego abra el archivo llamado "main.js" en el directorio "lib" y agregue el siguiente c贸digo:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("https://www.mozilla.org/");
}

Ahora ejecute el add-on con cfx run. El bot贸n es agregado a la barra de herramientas en la parte superior de la ventana del navegador:

Puede fijar la localizaci贸n inicial del bot贸n, pero el usuario puede moverlo usando la funci贸n para personalizar del navegador. El atributo id es obligatorio, y es usado para recordar la posici贸n del bot贸n, por lo tanto no deber铆a cambiarse en las versiones siguientes del add-on.

Hacer clic en el bot贸n cargar谩 la p谩gina https://www.mozilla.org/ en una nueva pesta帽a.

Especificar el icono

La propiedad del icono puede especificar un solo icono o una colecci贸n de iconos de diferentes tama帽os, como en el ejemplo anterior. Si se especifica una colecci贸n de iconos de diferentes tama帽os el navegador autom谩ticamente seleccionar谩 el que mejor se ajuste a la resoluci贸n de pantalla y el lugar en la IU del navegador que alberga el bot贸n. Lea mas sobre especificar m煤ltiples iconos.

El archivo del icono debe ser empacado con el add-on: no debe referenciar a una archivo remoto.

Puede cambiar el icono en cualquier momento estableciendo la propiedad del icono del bot贸n. Puede cambiar el icono, y otros atributos de estado, incluso globalmente, para una ventana o pesta帽a espec铆fica. Lea mas sobre la actualizaci贸n de estado.

Fijando un panel

Si necesita fijar un panel a un bot贸n, use la API toggle button. Esta es similar a la API action button pero agrega la propiedad booleana checked cuyo estado cambia cuando el bot贸n es seleccionado. Para fijar el panel, pase el bot贸n al m茅todo show() del panel. Para m谩s detalles sobre esto, vea la documentaci贸n de toggle button.

Mostrar contenido mas sofisticado

Para crear interfaces de usuario m谩s complejas de las que son posibles con solo un bot贸n, use la AIP toolbar. Con la API toolbar obtiene una franja horizontal completa de la interfaz de usuario. Puede agregar botones a la barra de herramientas y tambi茅n marcos, que pueden contener HTML, CSS, y JavaScript.

Aprender m谩s