australis ui + addon-sdk
DESCRIPTION
Una presentación donde se resumen los primeros pasos para construir addons para Firefox, compatibles con Australis UI.TRANSCRIPT
AUSTRALIS UI +ADDON-SDK
PRIMEROS PASOSCreado por / Abraham Calás @dogcalas
NOVEDADES EN ADD-ONSDKBOTONES
Toggle buttonAction button
TOOLBARS Y FRAMES
SIDEBAR
REQUISITOS
Python 2.5 o 2.6IDE (Sublime, Netbeans, Notepad++)
Mozilla Firefox 29 o superior (Australis)
Addon-SDK 1.16
EN LA TERMINALGNU/LINUX
$ cd /user/abs/addon-sdk-1.16
$ source bin\activate
$ cd /user/abs/example
$ cfx init
WINDOWScd D:\Installers\Desarrollo\Mozilla\addon-sdk-1.16
bin\activate
cd C:\Users\abs\Desktop\TallerAustralis\example
cfx init
* lib directory created* data directory created* test directory created* doc directory created* README.md written* generated jID automatically: jid1-ZB1jihyNYK2aiA* package.json written* test/test-main.js written* lib/main.js written* doc/main.md written
Your sample add-on is now ready.Do "cfx test" to test it and "cfx run" to try it. Have fun!
PACKAGE.JSON{ "name": "example", "title": "example", "id": "jid1-ZB1jihyNYK2aiA", "description": "a basic add-on", "author": "", "license": "MPL 2.0", "version": "0.1"}
CFXcfx init: crea el esqueleto del addon.cfx test: corre pruebas sobre addon.cfx run: ejecuta Firefox con el addon instalado.cfx xpi: genera el xpi.
CREANDO RECURSOSEN LA CARPETA /DATA CREAMOS:
Íconos: 16px y 32px
EN LA CARPETA /DATA CREAMOS:Fichero: panel.html
<html> <body> <h1>Hola mundo!</h1> <img src="aurora-64.png" alt="img"> </body></html>
EN LA CARPETA /DATA CREAMOS:Fichero: frame.html
<html> <body> <strong>Hola mundo!</strong> <input type="number" name="num" value="0"> </body></html>
PROGRAMANDO UN BOTÓN/LIB/MAIN.JS
var {ActionButton} = require("sdk/ui/button/action");
var button = ActionButton({ id: "my-button", label: "Example", icon: { "16": "./aurora-16.png", "32": "./aurora-32.png" }, onClick: function(state) { console.log("Hola mundo"); } });
$ cfx run
AGREGANDO UN PANEL AL BOTÓN/LIB/MAIN.JS
var {ActionButton} = require("sdk/ui/button/action");var panels = require("sdk/panel");var self = require("sdk/self");var button = ActionButton({ id: "my-button", label: "Ejemplo", icon: { "16": "./aurora-16.png", "32": "./aurora-32.png" }, onClick: function(state) { panel.show(); } });var panel = panels.Panel({ contentURL: self.data.url("panel.html"), position: button});
$ cfx run
PROGRAMANDO UN SIDEBAR/LIB/MAIN.JS
var sidebar = require("sdk/ui/sidebar").Sidebar({ id: 'my-sidebar', title: 'Ejemplo', url: require("sdk/self").data.url("frame.html")});
$ cfx run
TOOLBARS Y FRAMES/LIB/MAIN.JS
var button = require("sdk/ui/button/action").ActionButton({ id: "my-button", label: "Ejemplo", icon: "./aurora-16.png" });
var frame = require("sdk/ui/frame").Frame({ url: "./frame.html"});
var toolbar = require("sdk/ui/toolbar").Toolbar({ title: "All", items: [button]});
FRAME$ cfx run
TOOLBAR$ cfx run
