Comparar revisiones

Crear una extensión dinámica en la barra de estado

Change Revisions

Revisión 287763:

Revisión 287763 de Superruzafa el

Revisión 207617:

Revisión 207617 de Superruzafa el

Título:
Crear una extensión dinámica en la barra de estado
Crear una extensión dinámica en la barra de estado
Enlace amigable (slug):
Crear_una_extensión_dinámica_en_la_barra_de_estado
Crear_una_extensión_dinámica_en_la_barra_de_estado
Etiquetas:
Todas_las_Categorías, extensiones, Complementos
Contenido:

Revisión 287763
Revisión 207617
t7    <p>t
8      {{ AnteriorSiguiente("Crear una extensión en la barra de es
>tado", "Añadir preferencias a una extensión") }} 
9    </p>
10    <p>
11      <br>
12      Este artículo está basado en el artículo <a href="es/Crear_
>una_extensi%c3%b3n_en_la_barra_de_estado">Crear una extensión en  
>la barra de estado</a>, el cual crea un panel estático en la barr 
>a 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 minu 
>tos. Concretamente, el ejemplo muestra un stock quote en la barra 
> de estado y, cuando el ratón se mueve sobre él, muestra una ayud 
>a emergente que contiene información más detallada sobre el stock 
>. 
13    </p>
14    <p>
15      Los conceptos tratados en el ejemplo anterior no se explica
>rán de nuevo aquí. En vez de eso, descarga el código de ejemplo o 
> ve al anterior ejemplo para más detalles. 
16    </p>
17    <h2 id="Descargar_el_ejemplo" name="Descargar_el_ejemplo">
18      Descargar el ejemplo
19    </h2>
20    <p>
21      Puedes descargar una copia de este ejemplo para echarle un 
>vistazo o para utilizarlo como base para tu propia extensión. O s 
>i ya tienes el código del artículo [{{ mediawiki.external('Crear  
>una extensión en la barra de estado') }} puedes seguir este tutor 
>ial para actualizar dicho código existente con nuevas característ 
>icas. 
22    </p>
23    <p>
24      <a class="external" href="http://developer.mozilla.org/samp
>les/extension-samples/stockwatcher.zip">Descargar el ejemplo</a> 
25    </p>
26    <h2 id="Actualizar_el_manifiesto_de_instalaci.C3.B3n" name="A
>ctualizar_el_manifiesto_de_instalaci.C3.B3n"> 
27      Actualizar el manifiesto de instalación
28    </h2>
29    <p>
30      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. 
31    </p>
32    <p>
33      Véase <a href="es/Manifiestos_de_instalaci%c3%b3n">Manifies
>tos de instalación</a> para más detalles. 
34    </p>
35    <h2 id="Actualizar_el_manifiesto_chrome" name="Actualizar_el_
>manifiesto_chrome"> 
36      Actualizar el manifiesto chrome
37    </h2>
38    <p>
39      El manifiesto <a href="es/Chrome">chrome</a> sólo necesita 
>una pequeña modificación desde el ejemplo anterior. Simplemente r 
>eemplaza el ID del primer ejemplo ("status-bar-sample-1") con el  
>nombre del nuevo ejemplo ("stockwatcher"). 
40    </p>
41    <p>
42      Si necesitas un repaso, visita la sección <a href="es/Manif
>iesto_Chrome">Manifiesto Chrome</a>. 
43    </p>
44    <h2 id="Escribir_el_fichero_XUL" name="Escribir_el_fichero_XU
>L"> 
45      Escribir el fichero XUL
46    </h2>
47    <p>
48      Ahora necesitaremos complicar un poquito el fichero XUL par
>a poder añadir una referencia al código Javascript que hará el tr 
>abajo real: 
49    </p>
50    <pre class="eval">
51 &lt;?xml version="1.0" encoding="UTF-8"?&gt;
52   
53 &lt;!DOCTYPE overlay &gt;
54 &lt;overlay id="stockwatcher-overlay"
55   xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/g
>atekeeper/there.is.only.xul</span>"&gt; 
56   
57 &lt;script type="application/x-javascript"
58   src="<span class="nowiki">chrome://stockwatcher/content/stockw
>atcher.js</span>"/&gt; 
59   
60 &lt;!-- Firefox --&gt;
61 &lt;statusbar id="status-bar"&gt;
62   &lt;statusbarpanel id="stockwatcher"
63     label="Loading..."
64     tooltiptext="Current value"
65     onclick="StockWatcher.refreshInformation()"
66   /&gt;
67 &lt;/statusbar&gt;
68   
69 &lt;/overlay&gt;
70</pre>
71    <p>
72      También has de percatarte de que la definición del panel de
> la barra de estado incluye ahora una nueva propiedad, <code>oncl 
>ick</code> que referencia a la función Javascript que será ejecut 
>ada en el momento en el que el usuario pinche sobre el panel de l 
>a barra de estado. Nuestra extensión actualizará la información d 
>e stock cuando el usuario pinche en el panel. 
73    </p>
74    <h2 id="Escribir_el_c.C3.B3digo_JavaScript" name="Escribir_el
>_c.C3.B3digo_JavaScript"> 
75      Escribir el código JavaScript
76    </h2>
77    <p>
78      La tarea de obtener el stock quote y actualizar el visor de
>l panel de la barra de estado es manejado por el código JavaScrip 
>t en el fichero <code>stockwatcher.js</code> 
79    </p>
80    <p>
81      A diferencia de nuestro anterior ejemplo, éste está impleme
>ntado como un objeto. Lo hacemos así porque en futuros ejemplos d 
>e esta serie haremos cosas que son más fáciles de hacer si nuestr 
>a extensión está implementada así. 
82    </p>
83    <p>
84      Usamos la función del DOM <code>window.addEventListener()</
>code> para decirle a Firefox que llame a la función <code>StockWa 
>tcher.startup()</code> cuando se abra una nueva ventana del naveg 
>ador: 
85    </p>
86    <pre class="eval">
87 window.addEventListener("load", function(e) { StockWatcher.start
>up(); }, false); 
88</pre>
89    <p>
90      Nuestra nueva extensión posee dos funciones principales: <c
>ode>startup()</code> y <code>refreshInformation()</code>. La func 
>ión <code>refreshInformation()</code> contiene otra función llama 
>da <code>infoReceived()</code>. Las siguientes secciones las dise 
>ccionarán una a una. 
91    </p>
92    <h3 id="startup.28.29" name="startup.28.29">
93      startup()
94    </h3>
95    <p>
96      La función <code>startup()</code> es llamada cuando se abre
> una nueva ventana del navegador. <span class="comment">We end up 
> reloading data from each of the windows once in 10 minutes - fix 
>ing this by creating a JS component responsible for communication 
> with the server is a good idea for one of the future articles</s 
>pan> 
97    </p>
98    <pre class="eval">
99   startup: function()
100   {
101     this.refreshInformation();
102     window.setInterval(this.refreshInformation, 10*60*1000);
103   },
104</pre>
105    <p>
106      Esta función comienza llamando a nuestra función <code>refr
>eshInformation()</code> la cual es responsable de recuperar y mos 
>trar la información del stock ticker en el panel de la barra de e 
>stado. Hacemos esto ya que una vez cargada la información del sto 
>ck es mostrada tan pronto como sea posible. 
107    </p>
108    <p>
109      Tras hacer esto, instalamos una rutina de intervalo en la v
>entana del navegador llamando a <code><a href="es/DOM/window.setI 
>nterval">window.setInterval()</a></code>. Esto configura nuestra  
>rutina para que sea llamada cada 10 minutos (el intervalo de tiem 
>po se especifica en milisegundos). 
110    </p>
111    <h3 id="refreshInformation.28.29" name="refreshInformation.28
>.29"> 
112      refreshInformation()
113    </h3>
114    <p>
115      La función <code>refreshInformation()</code> es llamada sie
>mpre 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 l 
>a información. 
116    </p>
117    <pre class="eval">
118   refreshInformation: function()
119   {
120     var httpRequest = null;
121     var fullUrl = "<a class=" external" href="http://quote.yahoo
>.com/d/quotes.csv?f=sl1d1t1c1ohgv&amp;e=.csv&amp;s=GOOG" rel="fre 
>elink">http://quote.yahoo.com/d/quotes.csv?...&amp;e=.csv&amp;s=G 
>OOG</a>"; 
122     
123     ...
124     
125     httpRequest = new XMLHttpRequest();
126     
127     httpRequest.open("GET", fullUrl, true);
128     httpRequest.onload = infoReceived;
129     httpRequest.send(null);
130   }
131 }
132</pre>
133    <p>
134      La variable <code>httpRequest</code> contendrá un objeto <c
>ode><a href="es/XMLHttpRequest">XMLHttpRequest</a></code>. Este o 
>bjeto es usado para configurar y ejecutar una petición HTTP en un 
> servidor web el cual usaremos para conseguir los datos del stock 
> quote. 
135    </p>
136    <p>
137      La variable <code>fullUrl</code> es la URL completa que se 
>usa cuando se pide un stock quote. En este caso, utilizamos los v 
>alores separados por comas devueltos por Yahoo para analizar fáci 
>lmente los datos de stock quote para Google (símbolo de ticker GO 
>OG). 
138    </p>
139    <p>
140      <code>refreshInformation()</code> incrusta otra función, <c
>ode>infoReceived()</code>, que explicaremos en breve y de modo se 
>parado. 
141    </p>
142    <p>
143      Lo primero que hacemos es crear un nuevo objeto <code>XMLHt
>tpRequest</code> para poder procesar nuestra petición. Abrimos la 
> petición, especificando que deseamos realizar un comando HTTP "G 
>ET" con la URL <code>fullUrl</code>. El valor booleano <code>true 
></code> como tercer parámetro indica que queremos realizar la pet 
>ición asíncronamente. 
144    </p>
145    <p>
146      Al establecer la propiedad <code>httpRequest.onload</code> 
>a nuestra función <code>infoReceived()</code> hacemos que la peti 
>ción llame a <code>infoReceived()</code> cuando se reciba una res 
>puesta desde el servidor. Finalmente, enviamos la petición al ser 
>vidor y volvemos. 
147    </p>
148    <h3 id="infoReceived.28.29" name="infoReceived.28.29">
149      infoReceived()
150    </h3>
151    <p>
152      Cuando el servidor responda nuestra petición, nuestra funci
>ón <code>infoReceived()</code> que está incrustada dentro de <cod 
>e>refreshInformation()</code> será llamada automáticamente. 
153    </p>
154    <p>
155      Incrustamos esta función dentro de <code>refreshInformation
>()</code> para que el ámbito de su variable incluya a las variabl 
>es usadas por dicha función. Debido a la forma en la que funciona 
> JavaScript, si <code>infoReceived()</code> estuviese fuera de <c 
>ode>refreshInformation()</code> entonces no tendría acceso al mis 
>mo ámbito de variable. De hecho, incluso el valor <code>this</cod 
>e> no coincidiría por lo que no podemos obtener las mismas variab 
>les y funciones de ese modo. 
156    </p>
157    <pre class="eval">
158     function infoReceived()
159     {
160       var samplePanel = document.getElementById('stockwatcher');
161       var output = httpRequest.responseText;
162         
163       if (output.length)
164       {
165         // Remove whitespace from the end of the string;
166         // this gets rid of the end-of-line characters
167 
168         output = output.replace(/\W*$/, "");        
169       
170         // Build the tooltip string
171       
172         var fieldArray = output.split(","); <span class="comment
>">assert that fieldArray[0] == "GOOG"</span> 
173         samplePanel.label = "GOOG: " + fieldArray[1];
174         samplePanel.tooltipText = "Chg: " + fieldArray[4] + " | 
>" + 
175             "Open: " + fieldArray[5] + " | " +
176             "Low: " + fieldArray[6] + " | " +
177             "High: " + fieldArray[7] + " | " +
178             "Vol: " + fieldArray[8];
179       }
180     }
181</pre>
182    <p>
183      Lo primero que hacemos aquí es asignar el panel de la barra
> de estado a la variable <code>samplePanel</code> llamando a la f 
>unción del DOM <code><a href="es/DOM/document.getElementById">doc 
>ument.getElementById()</a></code>. Necesitamos esto para poder ha 
>cer cambios en el mismo panel de la barra de estado. 
184    </p>
185    <p>
186      Luego recuperaremos el resultado devuelto por el servidor w
>eb en la variable <code>output</code> desde la propiedad <code>XM 
>LHttpRequest.responseText</code> property. 
187    </p>
188    <p>
189      El texto recibido del servidor tendrá este aspecto:
190    </p>
191    <pre class="eval">
192 "GOOG",414.20,"5/1/2006","1:36pm",-3.74,417.85,419.44,412.19,476
>0215 
193</pre>
194    <p>
195      Luego analizaremos el texto. Usaremos la función <code>spli
>t()</code> para dividir los valores separados por comas en partes 
> individuales, con cada campo en un elemento separado en el array 
> <code>fieldArray</code>. En el índice 0 estará el símbolo del mi 
>smo ticker el cual no necesitamos debido a que sabemos el stock q 
>ue estamos utilizando. 
196    </p>
197    <p>
198      La etiqueta del panel de la barra de estado se establece pa
>ra que indique el valor actual del stock, el cual está almacenado 
> en <code>fieldArray{{ mediawiki.external(1) }}</code>, estableci 
>endo la propiedad <code>samplePanel.label</code>. 
199    </p>
200    <p>
201      Luego estableceremos la ayuda emergente para el panel de la
> barra de estado asignándole una cadena apropiada a la propiedad  
><code>samplePanel.tooltipText</code>. La cadena se construye a pa 
>rtir de una combinación de cadenas estáticas y varios elementos d 
>el array <code>fieldArray</code>. 
202    </p>
203    <h2 id="Verlo_en_acci.C3.B3n" name="Verlo_en_acci.C3.B3n">
204      Verlo en acción
205    </h2>
206    <p>
207      Ahora puedes instalar y probar la extensión. Deberías ver a
>lgo parecido a esto: 
208    </p>
209    <center>
210      <p>
211        <img alt="Image:stockwatcher.png" fileid="0" src="File:es
>/Media_Gallery/Stockwatcher.png"> 
212      </p>
213    </center>
214    <p>
215      En este pantallazo tenemos también el anterior ejemplo ejec
>utándose, mostrando el texto "Hello World". 
216    </p>
217    <p>
218      {{ AnteriorSiguiente("Crear una extensión en la barra de es
>tado", "Añadir preferencias a una extensión") }} 
219    </p>{{ languages( { "en": "en/Creating_a_dynamic_status_bar_e
>xtension", "pl": "pl/Tworzenie_rozszerzenia_dynamicznego_paska_st 
>anu" } ) }} 

Volver al historial