Australis UI + Addon-sdk
•
0 likes•610 views
Una presentación donde se resumen los primeros pasos para construir addons para Firefox, compatibles con Australis UI.
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (15)
Similar to Australis UI + Addon-sdk
Similar to Australis UI + Addon-sdk (20)
Recently uploaded
Recently uploaded (20)
Australis UI + Addon-sdk
- 1. AUSTRALISUI+ ADDON-SDK PRIMEROSPASOS Creado por /Abraham Calás @dogcalas
- 4. SIDEBAR
- 5. REQUISITOS Python 2.5 o 2.6 IDE (Sublime, Netbeans, Notepad++) Mozilla Firefox 29 o superior (Australis) Addon-SDK 1.16
- 6. ENLATERMINAL GNU/LINUX $ cd /user/abs/addon-sdk-1.16 $ source binactivate $ cd /user/abs/example $ cfx init
- 8. * 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!
- 9. PACKAGE.JSON { "name": "example", "title": "example", "id": "jid1-ZB1jihyNYK2aiA", "description": "a basic add-on", "author": "", "license": "MPL 2.0", "version": "0.1" }
- 10. CFX cfx 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.
- 12. ENLACARPETA/DATACREAMOS: Fichero: panel.html <html> <body> <h1>Hola mundo!</h1> <img src="aurora-64.png" alt="img"> </body> </html>
- 13. ENLACARPETA/DATACREAMOS: Fichero: frame.html <html> <body> <strong>Hola mundo!</strong> <input type="number" name="num" value="0"> </body> </html>
- 14. PROGRAMANDOUNBOTÓ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"); } });
- 15. $ cfx run
- 16. AGREGANDO UNPANEL AL BOTÓN /LIB/MAIN.JS var{ActionButton}=require("sdk/ui/button/action"); varpanels=require("sdk/panel"); varself=require("sdk/self"); varbutton=ActionButton({ id:"my-button", label:"Ejemplo", icon:{ "16":"./aurora-16.png", "32":"./aurora-32.png" }, onClick:function(state){ panel.show(); } }); varpanel=panels.Panel({ contentURL:self.data.url("panel.html"), position:button});
- 17. $ cfx run
- 18. PROGRAMANDOUNSIDEBAR /LIB/MAIN.JS var sidebar = require("sdk/ui/sidebar").Sidebar({ id: 'my-sidebar', title: 'Ejemplo', url: require("sdk/self").data.url("frame.html") });
- 19. $ cfx run
- 21. FRAME $ cfx run