Este artículo está basado en el artículo Crear una extensión en la barra de estado, el cual crea un panel estático en la barra de estado de Firefox, mejorándolo con la actualización dinámica de su contenido con información traída de la web cada pocos minutos. Concretamente, el ejemplo muestra un stock quote en la barra de estado y, cuando el ratón se mueve sobre él, muestra una ayuda emergente que contiene información más detallada sobre el stock.
Los conceptos tratados en el ejemplo anterior no se explicarán de nuevo aquí. En vez de eso, descarga el código de ejemplo o ve al anterior ejemplo para más detalles.
Descargar el ejemplo
Puedes descargar una copia de este ejemplo para echarle un vistazo o para utilizarlo como base para tu propia extensión. O si ya tienes el código del artículo [[Crear una extensión en la barra de estado] puedes seguir este tutorial para actualizar dicho código existente con nuevas características.
Actualizar el manifiesto de instalación
Reemplaza todas las ocurrencias del ID del primer ejemplo ("status-bar-sample-1") con el ID del nuevo ejemplo ("stockwatcher") y actualiza los metadatos para describir nuestra nueva extensión.
Véase Manifiestos de instalación para más detalles.
Actualizar el manifiesto chrome
El manifiesto chrome sólo necesita una pequeña modificación desde el ejemplo anterior. Simplemente reemplaza el ID del primer ejemplo ("status-bar-sample-1") con el nombre del nuevo ejemplo ("stockwatcher").
Si necesitas un repaso, visita la sección Manifiesto Chrome.
Escribir el fichero XUL
Ahora necesitaremos complicar un poquito el fichero XUL para poder añadir una referencia al código Javascript que hará el trabajo real:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE overlay > <overlay id="stockwatcher-overlay" xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- Firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="Loading..." tooltiptext="Current value" onclick="StockWatcher.refreshInformation()" /> </statusbar> </overlay>
También has de percatarte de que la definición del panel de la barra de estado incluye ahora una nueva propiedad, onclick que referencia a la función Javascript que será ejecutada en el momento en el que el usuario pinche sobre el panel de la barra de estado. Nuestra extensión actualizará la información de stock cuando el usuario pinche en el panel.
Escribir el código JavaScript
La tarea de obtener el stock quote y actualizar el visor del panel de la barra de estado es manejado por el código JavaScript en el fichero stockwatcher.js
A diferencia de nuestro anterior ejemplo, éste está implementado como un objeto. Lo hacemos así porque en futuros ejemplos de esta serie haremos cosas que son más fáciles de hacer si nuestra extensión está implementada así.
Usamos la función del DOM window.addEventListener() para decirle a Firefox que llame a la función StockWatcher.startup() cuando se abra una nueva ventana del navegador:
window.addEventListener("load", function(e) { StockWatcher.startup(); }, false);
Nuestra nueva extensión posee dos funciones principales: startup() y refreshInformation(). La función refreshInformation() contiene otra función llamada infoReceived(). Las siguientes secciones las diseccionarán una a una.
startup()
La función startup() es llamada cuando se abre una nueva ventana del navegador. We end up reloading data from each of the windows once in 10 minutes - fixing this by creating a JS component responsible for communication with the server is a good idea for one of the future articles
startup: function()
{
this.refreshInformation();
window.setInterval(this.refreshInformation, 10*60*1000);
},
Esta función comienza llamando a nuestra función refreshInformation() la cual es responsable de recuperar y mostrar la información del stock ticker en el panel de la barra de estado. Hacemos esto ya que una vez cargada la información del stock es mostrada tan pronto como sea posible.
Tras hacer esto, instalamos una rutina de intervalo en la ventana del navegador llamando a window.setInterval(). Esto configura nuestra rutina para que sea llamada cada 10 minutos (el intervalo de tiempo se especifica en milisegundos).
refreshInformation()
La función refreshInformation() es llamada siempre que queramos actualizar la información del stock. Es llamada cuando el usuario hace clic sobre el panel de la barra de estado, cuando nuestra extensión es añadida a la ventana del navegador y periódicamente por el manejador del intervalo para actualizar la información.
refreshInformation: function()
{
var httpRequest = null;
var fullUrl = "https://quote.yahoo.com/d/quotes.csv?...&e=.csv&s=GOOG";
...
httpRequest = new XMLHttpRequest();
httpRequest.open("GET", fullUrl, true);
httpRequest.onload = infoReceived;
httpRequest.send(null);
}
}
La variable httpRequest contendrá un objeto XMLHttpRequest. Este objeto es usado para configurar y ejecutar una petición HTTP en un servidor web el cual usaremos para conseguir los datos del stock quote.
La variable fullUrl es la URL completa que se usa cuando se pide un stock quote. En este caso, utilizamos los valores separados por comas devueltos por Yahoo para analizar fácilmente los datos de stock quote para Google (símbolo de ticker GOOG).
refreshInformation() incrusta otra función, infoReceived(), que explicaremos en breve y de modo separado.
Lo primero que hacemos es crear un nuevo objeto XMLHttpRequest para poder procesar nuestra petición. Abrimos la petición, especificando que deseamos realizar un comando HTTP "GET" con la URL fullUrl. El valor booleano true como tercer parámetro indica que queremos realizar la petición asíncronamente.
Al establecer la propiedad httpRequest.onload a nuestra función infoReceived() hacemos que la petición llame a infoReceived() cuando se reciba una respuesta desde el servidor. Finalmente, enviamos la petición al servidor y volvemos.
infoReceived()
Cuando el servidor responda nuestra petición, nuestra función infoReceived() que está incrustada dentro de refreshInformation() será llamada automáticamente.
Incrustamos esta función dentro de refreshInformation() para que el ámbito de su variable incluya a las variables usadas por dicha función. Debido a la forma en la que funciona JavaScript, si infoReceived() estuviese fuera de refreshInformation() entonces no tendría acceso al mismo ámbito de variable. De hecho, incluso el valor this no coincidiría por lo que no podemos obtener las mismas variables y funciones de ese modo.
function infoReceived()
{
var samplePanel = document.getElementById('stockwatcher');
var output = httpRequest.responseText;
if (output.length)
{
// Remove whitespace from the end of the string;
// this gets rid of the end-of-line characters
output = output.replace(/\W*$/, "");
// Build the tooltip string
var fieldArray = output.split(","); assert that fieldArray[0] == "GOOG"
samplePanel.label = "GOOG: " + fieldArray[1];
samplePanel.tooltipText = "Chg: " + fieldArray[4] + " | " +
"Open: " + fieldArray[5] + " | " +
"Low: " + fieldArray[6] + " | " +
"High: " + fieldArray[7] + " | " +
"Vol: " + fieldArray[8];
}
}
Lo primero que hacemos aquí es asignar el panel de la barra de estado a la variable samplePanel llamando a la función del DOM document.getElementById(). Necesitamos esto para poder hacer cambios en el mismo panel de la barra de estado.
Luego recuperaremos el resultado devuelto por el servidor web en la variable output desde la propiedad XMLHttpRequest.responseText property.
El texto recibido del servidor tendrá este aspecto:
"GOOG",414.20,"5/1/2006","1:36pm",-3.74,417.85,419.44,412.19,4760215
Luego analizaremos el texto. Usaremos la función split() para dividir los valores separados por comas en partes individuales, con cada campo en un elemento separado en el array fieldArray. En el índice 0 estará el símbolo del mismo ticker el cual no necesitamos debido a que sabemos el stock que estamos utilizando.
La etiqueta del panel de la barra de estado se establece para que indique el valor actual del stock, el cual está almacenado en fieldArray[1], estableciendo la propiedad samplePanel.label.
Luego estableceremos la ayuda emergente para el panel de la barra de estado asignándole una cadena apropiada a la propiedad samplePanel.tooltipText. La cadena se construye a partir de una combinación de cadenas estáticas y varios elementos del array fieldArray.
Verlo en acción
Ahora puedes instalar y probar la extensión. Deberías ver algo parecido a esto:
<center>
En este pantallazo tenemos también el anterior ejemplo ejecutándose, mostrando el texto "Hello World".