Australis UI + Addon-sdk

50 %
50 %
Information about Australis UI + Addon-sdk
Internet

Published on May 30, 2014

Author: AbrahamCalsTorres

Source: slideshare.net

Description

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

AUSTRALISUI+ ADDON-SDK PRIMEROSPASOS Creado por /Abraham Calás @dogcalas

NOVEDADESENADD-ON SDK BOTONES Toggle button Action button

TOOLBARSY FRAMES

SIDEBAR

REQUISITOS Python 2.5 o 2.6 IDE (Sublime, Netbeans, Notepad++) Mozilla Firefox 29 o superior (Australis) Addon-SDK 1.16

ENLATERMINAL GNU/LINUX $ cd /user/abs/addon-sdk-1.16 $ source binactivate $ cd /user/abs/example $ cfx init

WINDOWS cd D:InstallersDesarrolloMozillaaddon-sdk-1.16 binactivate cd C:UsersabsDesktopTallerAustralisexample 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" }

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.

CREANDORECURSOS ENLACARPETA/DATACREAMOS: Íconos: 16px y 32px

ENLACARPETA/DATACREAMOS: Fichero: panel.html <html> <body> <h1>Hola mundo!</h1> <img src="aurora-64.png" alt="img"> </body> </html>

ENLACARPETA/DATACREAMOS: Fichero: frame.html <html> <body> <strong>Hola mundo!</strong> <input type="number" name="num" value="0"> </body> </html>

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"); } });

$ cfx run

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});

$ cfx run

PROGRAMANDOUNSIDEBAR /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

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] });

FRAME $ cfx run

TOOLBAR $ cfx run

MUCHAS GRACIAS acalas@estudiantes.uci.cu @ffmania http://firefoxmania.uci.cu

Add a comment

Related presentations

Online rank tracker!

Online rank tracker!

October 20, 2014

Rank tracker is a tool that helps everyone to find the traffic which a particular ...

Facebook y sus avances

Facebook y sus avances

November 11, 2014

facebook y sus avances

Preguntas Investigación

Preguntas Investigación

November 11, 2014

es una presentación de preguntas interesantes

Cartes interactives, frises chronologiques, diaporamas, carte Google Streetview in...

Related pages

New Add-on SDK Australis UI features in Firefox 29 ...

Update: the ability to attach a panel to a button, and the ability to include buttons in toolbars, are not included in Firefox 29 (the current Beta release).
Read more

Firefox/Australis Meeting Notes - MozillaWiki

Firefox/Australis Meeting Notes. From MozillaWiki ... https://github.com/mozilla/addon-sdk/pull/1223; ... Adjust focus-rect on tabs for Australis - ui ...
Read more

Add-ons for Firefox

Speed up the development process by using add-ons to troubleshoot, edit, and debug web projects without ever clicking away from Firefox.
Read more

javascript - Addon SDK. How I can make popup like this ...

How I can make popup like this? ... I then provided additional information regarding Australis View Panels, ... How to manipulate Firefox UI with Addon SDK?
Read more

JEP Add on UI Integration · mozilla/addon-sdk Wiki · GitHub

addon-sdk - The Add-on SDK ... JEP Add on UI Integration. ZER0 ... they are making to how customization and overflow work as part of the Australis ...
Read more

firefox - Error in browser console "DEPRECATED: The widget ...

Error in browser console “DEPRECATED: The widget ... I am using addon-sdk for ... https://blog.mozilla.org/addons/2014/03/13/new-add-on-sdk-australis-ui ...
Read more

Ghostery :: Versions :: Add-ons für Firefox

- Reimplemented button UI to solve several toolbar button related issues. ... - Android, Australis and SeaMonkey compatibility improvements - Bug fixes
Read more

Add-on SDK 1.16发布 蚊仔部屋

这个小版本更新主要是针对 Firefox 29 的兼容,使用新Australis UI 和 API。 下载: addon-sdk-1.16.zip. addon-sdk-1.16.tar.gz.
Read more

firefoxアドオン開発 超実践的 ...

firefox29で搭載されたAustralisという新UI ... Add-on SDK :: 開発者センター :: Add-ons for Firefoxからaddon-sdk ...
Read more

Add-on SDK | Desarrollo Mozilla Cuba

Hace algunas semanas estuvimos presentando en un taller las nuevas APIS que brinda el Addon-SDK 1.16 para la interfaz Australis, ... UI para CuentaFOX.
Read more