Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Australis UI + Addon-sdk

578 views

Published on

Una presentación donde se resumen los primeros pasos para construir addons para Firefox, compatibles con Australis UI.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Australis UI + Addon-sdk

  1. 1. AUSTRALISUI+ ADDON-SDK PRIMEROSPASOS Creado por /Abraham Calás @dogcalas
  2. 2. NOVEDADESENADD-ON SDK BOTONES Toggle button Action button
  3. 3. TOOLBARSY FRAMES
  4. 4. SIDEBAR
  5. 5. REQUISITOS Python 2.5 o 2.6 IDE (Sublime, Netbeans, Notepad++) Mozilla Firefox 29 o superior (Australis) Addon-SDK 1.16
  6. 6. ENLATERMINAL GNU/LINUX $ cd /user/abs/addon-sdk-1.16 $ source binactivate $ cd /user/abs/example $ cfx init
  7. 7. WINDOWS cd D:InstallersDesarrolloMozillaaddon-sdk-1.16 binactivate cd C:UsersabsDesktopTallerAustralisexample cfx init
  8. 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. 9. PACKAGE.JSON { "name": "example", "title": "example", "id": "jid1-ZB1jihyNYK2aiA", "description": "a basic add-on", "author": "", "license": "MPL 2.0", "version": "0.1" }
  10. 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.
  11. 11. CREANDORECURSOS ENLACARPETA/DATACREAMOS: Íconos: 16px y 32px
  12. 12. ENLACARPETA/DATACREAMOS: Fichero: panel.html <html> <body> <h1>Hola mundo!</h1> <img src="aurora-64.png" alt="img"> </body> </html>
  13. 13. ENLACARPETA/DATACREAMOS: Fichero: frame.html <html> <body> <strong>Hola mundo!</strong> <input type="number" name="num" value="0"> </body> </html>
  14. 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. 15. $ cfx run
  16. 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. 17. $ cfx run
  18. 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. 19. $ cfx run
  20. 20. TOOLBARSYFRAMES /LIB/MAIN.JS varbutton=require("sdk/ui/button/action").ActionButton({ id:"my-button", label:"Ejemplo", icon:"./aurora-16.png" }); varframe=require("sdk/ui/frame").Frame({ url:"./frame.html" }); vartoolbar=require("sdk/ui/toolbar").Toolbar({ title:"All", items:[button] });
  21. 21. FRAME $ cfx run
  22. 22. TOOLBAR $ cfx run
  23. 23. MUCHAS GRACIAS acalas@estudiantes.uci.cu @ffmania http://firefoxmania.uci.cu

×