7

Paneles

18Nov
Escrito por en Componente visual, Tutoriales

Hola comunidad, en este artículos haremos una introducción a los paneles del Add-on SDK. ¿Que es?, se define como una ventana estilo diálogo cuyo contenido puede ser HTML, imágenes, etc, con la posibilidad de ejecutar scripts en este. La apariencia y el comportamiento solo están limitado según el uso que le de el usuario usando HTML,CSS y JavaScript.

Panel

Ejemplo de panel con contenido HTML

El contenido de un panel es cargado en cuanto se crea, cuando se oculta vía script no se pierde. El complemento puede capturar los eventos de mostrar y ocultar el panel vía javascript.

Contenido del panel

El contenido puede eser especificado como HTML, es opcional, puede ser cualquier contenido web el cual es cargado desde una url, ejemplo:

1
2
3
4
5
6
7
8
9
10
//-1
var paneles = require("panel");
//-2
var ventana = paneles.Panel({
    width: 500,
    height: 300,
    contentURL: "https://en.wikipedia.org/w/index.php?title=Jetpack&useformat=mobile"
});
//-3
ventana.show();

¿Que hace?

  1. Importa la API de paneles.
  2. Crea un panel cuyo contenido está dado según la dirección https://en.wikipedia.org/w/index.php?title=Jetpack&useformat=mobile.
  3. Muestra el panel, en forma de ventana.

También puedes cargar contenido desde el add-on, este se coloca en la carpeta /data del complemento y se accede utilizando el paquete self:

1
2
3
4
5
6
7
8
9
//-1
var datos = equire("self").data;
var paneles = require("panel");
//-2
var mi_panel = paneles.Panel({
    contentURL: datos.url("contenido.html");
});
 
mi_panel.show();

A continuación un ejemplo, un complemento que crea un widget y un panel que al hacer click en el widget se muestre el panel en forma de popup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var panel = require("panel").Panel({
    contentURL: "https://humanos.uci.cu/wp-content/themes/humanOS/web/images/favicon.ico",
    onHide: function () {
        panel.contentURL = "about:blank";
    }
});
 
require("widget").Widget({
    id: "humanos",
    label: "humanOS",
    contentURL: "https://humanos.uci.cu/wp-content/themes/humanOS/web/images/favicon.ico",
    panel: panel,
    onClick: function() {
        panel.contentURL = "https://humanos.uci.cu/wp-content/plugins/image-zoom/img/loader.white.gif";
    }
});

Implementando funcionalidad

Para acceder al contenido del panel necesitas cargar un archivo javascript en el panel; en el SDK estos script se llaman script de contenido, son los encargados de interactuar directamente con el contenido web. Mientras que estos scripts pueden acceder al contenido, no pueden acceder a las APs del SDK, para contrarrestar esto existe un mecanismo de paso de mensajes entre el script de contenido y el código principal del add-on.

Por ejemplo, aquí se muestra un complemento que captura el click del usuario cuando carga el contenido de https://eva.uic.cu, luego el script de contenido envía un mensaje para que sea capturado por el panel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Script que envía el mensaje
var miScript = "window.addEventListener('click', function(event) {" +
               "  var t = event.target;" +
               "  if (t.nodeName == 'A')" +
               "    self.port.emit('envio-mensaje', t.toString());" +
               "}, false);"
 
var panel = require("panel").Panel({
    contentURL: "https://eva.uci.cu/",
    contentScript: miScript
});
 
// Se recibe el mensaje
panel.port.on("envio-mensaje", function(url) {
    // muestra un mensaje en la terminal
    console.log(url);
});
 
// Mostrar el panel
panel.show();

Este ejemplo usa la propiedad contentScript para establecer directamente el script de contenido como una cadena de texto.

Ejemplo más completo:

Lo primero es crear la plantilla del add-on como se explico aquí, luego eliminar los ficheros que no necesitemos(es opcional), la estructura deberia ser como sigue:

1
2
3
4
mi-addon/
    lib/main.js
    data/ui.html
        /tomar-texto.js

Luego poner el siguiente contenido en los archivos:

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var data = require("self").data;
 
// Crea un panel con el contenido "ui.html".
// Adiciona un script de cotenido "tomar-texto.js".
var texto = require("panel").Panel({
    width: 212,
    height: 200,
    contentURL: data.url("ui.html"),
    contentScriptFile: data.url("tomar-texto.js")
});
 
// Envia el contenido del scrit co un mensaje llamado "show"
// cuando el panel es motrado
texto.on("show", function() {
    text_entry.port.emit("show");
});
 
// Se matiene atento al mensaje "text-entered" enviado desde "tomar-texto" from
texto.port.on("text-entered", function (text) {
    // Muestra el texto en la terminal y cierra el panel
    console.log(text);
    text_entry.hide();
});
 
// Create a widget, and attach the panel to it, so the panel is
require("widget").Widget({
    label: "Entrada de texto",
    id: "text-entry",
    contentURL: "https://developer.firefoxmania.uci.cu/wp-content/themes/developer/images/icon.png",
    panel: texto
});

tomar-texto.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
self.port.on("show", function (arg) {
    var textArea = document.getElementById('edit-box');
    textArea.focus();
    // Cuando el suario presiona "Enter" envia el mensaje a "main.js"
    // con el contenido del elemento
    textArea.onkeyup = function(event) {
        if (event.keyCode == 13) {
            // Remove the newline.
            text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
            self.port.emit("text-entered", text);
            textArea.value = '';
        }
    };
});

ui.html

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
    <style type="text/css" media="all">
    textarea {
      margin: 10px;
    }
    </style>
</head>
<body>
    <textarea rows="10" cols="20" id="edit-box"></textarea>
</body>
</html>

Hecho esto solo queda probarlo:

1
cfx run

El estilo del panel varia segun el sistema operativo:

panel-default-style

7 Comentarios

  1. Yosbel Rodriguez dice:
    enero 18, 2013 a las 12:35 pm

    Buenos dias Comunidad, he visto muchos complementos basados en codigos HTML, CSS y otros, referente a los servicios de mensajeria instantanea y en tiempo real como Facebook o IRC, pero aun no he encontrado uno que me de la posibilidad de trabajar con el Pandion o el Jabber desde el mismo navegador de Mozilla. Si alguien tiene o conoce la posibilidad de llevar esto a cabo seria ideal que lo compartiera.

    Responder
    • R0B3RT dice:
      febrero 1, 2014 a las 7:08 pm

      Mira Yosbel, yo tambien quiciera tener un addon q me facilitara el jabber, y de hecho los hay, pero muchos son incompatibles pues estan hechos para versiones muy viejas de firefox y otros simplemente no se como usarlos o no funcionan bien. Te recomiendo q vayas a la pagina de addons de mozilla y en la busqueda pongas xmpp(protocolo jabber) para q veas q si hay, y muchos, pero son practicamente inservibles. Si por casualidad de funciona alguno, please, responde aqui mismo para q todos podamos tenerlo.Saludos

      Responder
  2. Matatan dice:
    enero 18, 2013 a las 11:12 pm

    Hola, revisen la ortografía y que esten bien escrito el artículo

    aquí le falta una r
    //-1
    var datos = require(«self»).data;

    Responder
  3. jorgeN dice:
    enero 21, 2013 a las 4:18 pm

    así mismo pues al principio en la primera linea de codigo pusieron «peneles» donde va paneles

    1 var peneles = require(«panel»);

    Responder
  4. hyuugaquigua dice:
    enero 25, 2013 a las 2:49 pm

    mano yo soy principiante en esto y tengo alguans preguntillas que a lo mejor parecen tontas pero es que no logro ubicarme porfa me las pueden responder¿?ç
    1- donde (en que carpeta) cohnfiguro y reprogramo esto¿?
    2- donde los guardo después

    Responder

Dejar un comentario