Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Australis UI + Addon-sdk

553 visualizaciones

Publicado el

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

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×