Australis UI + Addon-sdk

AUSTRALIS UI +ADDON-SDK

PRIMEROS PASOSCreado por / Abraham Calás @dogcalas

http://developer.firefoxmania.uci.cu/

http://twitter.com/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

http://firefoxmania.uci.cu/download/

http://firefoxmania.uci.cu/common/SDKs/addon-sdk-1.16.zip

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

MUCHASGRACIAS

[email protected]@ffmania

http://firefoxmania.uci.cu

http://firefoxmania.uci.cu/

Australis UI + Addon-sdk

Internet