Comparar revisiones

Añadiendo los gestores de eventos

Revisión 270358:

Revisión 270358 de ibnkhaldun el

Revisión 219915:

Revisión 219915 de ibnkhaldun el

Título:
Añadiendo los gestores de eventos
Añadiendo los gestores de eventos
Enlace amigable (slug):
Tutorial_de_XUL/Añadiendo_los_gestores_de_eventos
Tutorial_de_XUL/Añadiendo_los_gestores_de_eventos
Etiquetas:
XUL, Todas_las_Categorías, páginas_a_traducir, Tutorial_de_XUL
Contenido:

Revisión 270358
Revisión 219915
t7    <p>t
8      &nbsp;
9    </p>
10    <p>
11      {{ Traducción("inglés", "XUL Tutorial:Adding Event Handlers
>", "en") }} 
12    </p>
13    <p>
14      The find files dialog so far looks quite good. We haven't c
>leaned it up much but we have created a simple user interface eas 
>ily. Next, we will show how to add scripts to it. 
15    </p>
16    <h3 id="Usando_scripts" name="Usando_scripts">
17      Usando scripts
18    </h3>
19    <p>
20      Para hacer funcional el diálogo de búsqueda de archivos, ne
>cesitaremos algunos scripts los cuales se ejecutarán cuando el us 
>uario interactúe con el diálogo. Podríamos querer agregar un scri 
>pt para manejar el botón Buscar, el botón Cancelar y manejar cada 
> comando del menú. Escribimos esto utilizando funciones <a href=" 
>/es/JavaScript" title="es/JavaScript">JavaScript</a> muchas de la 
> misma forma que en <a href="/es/HTML" title="es/HTML">HTML</a>. 
21    </p>
22    <p>
23      Puede utilizar el elemento <code><a href="/es/XUL/Elementos
>#script" title="es/XUL/Elementos#script">script</a></code> para i 
>ncluir scripts en archivos XUL. Puede incluir el código script di 
>rectamente en el archivo XUL entre la apertura y cierre de etique 
>tas <code>script</code> pero es mucho mejor incluir código en un  
>archivo separado ya que de esta manera la ventana XUL cargará lig 
>eramente más rápido. El atributo <code><a href="/Es/XUL/Atributos 
>#src" title="Es/XUL/Atributos#src">src</a></code> es utilizado pa 
>ra enlazar un archivo script externo. 
24    </p>
25    <div class="highlight">
26      <h5 id="Nuestro_ejemplo" name="Nuestro_ejemplo">
27        Nuestro ejemplo
28      </h5>
29      <p>
30        Agreguemos un script al diálogo buscar archivo. Aunque no
> importe cómo sea llamado el archivo script, generalmente debería 
> ser el mismo que el archivo XUL con una extensión <em>.js</em>.  
>En este caso, findfile.js será utilizado. Agregue la línea debajo 
> sólo <strong>después de la apertura de la etiqueta <code><a href 
>="/es/XUL/Elementos#window" title="es/XUL/Elementos#window">windo 
>w</a></code> y antes de cualquier otro elemento</strong>. 
31      </p>
32      <pre class="eval">
33<span class="highlightred">&lt;script src="findfile.js"/&gt;</spa
>n> 
34</pre>
35      <div class="note">
36        Nota: Al agregar el elemento <em>script</em> directamente
> bajo el elemento <em>window</em> su ámbito será el documento com 
>pleto. Si se anida bajo otra etiqueta su ámbito se restringirá a  
>los elementos anidados en ella, y no sera "visible" para otras zo 
>nas de documento. 
37      </div>
38      <p>
39        Crearemos el archivo script más tarde cuando conozcamos q
>ué queremos poner en él. Definiremos algunas funciones en el arch 
>ivo y podremos llamarlas desde un manejador de eventos. 
40      </p>
41    </div>
42    <p>
43      Puede incluir scripts múltiples en un archivo XUL utilizand
>o múltiples etiquetas <code>script</code>, cada una apuntando a u 
>n script diferente. Puede utilizar URLs relativas o absolutas. Po 
>r ejemplo, puede utilizar URLs de la siguiente forma: 
44    </p>
45    <pre class="eval">
46&lt;script src="findfile.js"/&gt;
47&lt;script src="<a class=" external" href="chrome://findfiles/con
>tent/help.js" rel="freelink">chrome://findfiles/content/help.js</ 
>a>"/&gt; 
48&lt;script src="<span class="nowiki">http://www.example.com/js/it
>ems.js</span>"/&gt; 
49</pre>
50    <p>
51      Este tutorial no intenta describir cómo utilizar JavaScript
> ya que esto es un tópico extenso y hay variedades de otras fuent 
>es que están disponibles para esto. 
52    </p>
53    <div class="tip">
54      Por defecto la consola JavaScript sólo muestra errores desd
>e contenido de red. Para mostrar errores en JavaScript chrome, es 
> necesario cambiar la preferencia <code>javascript.options.showIn 
>Console</code> a verdadero. Puede también cambiar la preferencia  
><code>javascript.options.strict</code> para la depuración. Establ 
>eciendo este valor a verdadero, la sintaxis propensa, pobremente  
>escrita y no estándar causa errores lógicos que son guardados en  
>la consola JavaScript. 
55    </div>
56    <h3 id="Respuesta_a_eventos" name="Respuesta_a_eventos">
57      Respuesta a eventos
58    </h3>
59    <p>
60      El script contendrá código que responderá a varios eventos 
>disparados por el usuario u otras situaciones. Hay más de treinta 
> eventos diferentes que pueden ser manejados de formas distintas. 
> Un evento típico es que el usuario presione un botón del ratón o 
> presione una tecla. Cada elemento XUL tiene la habilidad de disp 
>arar varios eventos en diferentes situaciones. Algunos eventos so 
>n disparados solamente por determinados elementos. 
61    </p>
62    <p>
63      Cada evento tiene un nombre, por ejemplo, 'mousemove' es el
> nombre del evento que es disparado cuando el usuario mueve el ra 
>tón sobre un elemento de la Interfaz de Usuario. XUL utiliza el m 
>ismo mecanismo de evento definido en <a class="external" href="ht 
>tp://www.w3.org/TR/DOM-Level-2-Events/">eventos DOM</a>. Cuando u 
>na acción ocurre que debería disparar un evento, tal como que el  
>usuario mueva el ratón, se crea un objeto evento correspondiente  
>a tal tipo de evento. Las propiedades de dicho objeto se establec 
>en de modo que ofrezca información asociada a la circunstancia en 
> que se produjo, tal como: la posición del ratón, la(s) tecla(s)  
>que fue(ron) presionada(s), el botón del ratón que se utilizó, et 
>c. 
64    </p>
65    <p>
66      El evento es enviado luego en fases al XUL.
67    </p>
68    <ul>
69      <li>En la fase de captura, el evento primero es enviado a l
>a ventana, luego al documento, seguido por cada ancestro del elem 
>ento XUL donde el evento ocurrió hacia abajo hasta que alcance el 
> elemento. 
70      </li>
71      <li>En la fase objetivo, el evento es enviado hacia el elem
>ento objetivo XUL. 
72      </li>
73      <li>En la fase burbujeante, el evento es enviado a cada ele
>mento de más atrás hasta que alcance nuevamente la ventana. 
74      </li>
75    </ul>
76    <p>
77      Puede responder a un evento durante la captura completa de 
>la fase burbujeante. Una vez que el evento ha finalizado de propa 
>garse, cualquier acción por defecto ocurrirá, la cual está inclui 
>da en comportamiento del elemento. 
78    </p>
79    <p>
80      Por ejemplo, cuando el ratón sea movido sobre un botón que 
>está dentro de un cuadro, un evento 'mousemove' es generado, y en 
>viado primero a la ventana, seguido por el documento, y luego al  
>cuadro. Eso completa la fase de captura. Luego, el evento 'mousem 
>ove' es enviado al botón. Finalmente, la fase burbujeante es esen 
>cialmente lo inverso a la fase de captura. Note que algunos event 
>os no hacen la fase burbujeante. 
81    </p>
82    <p>
83      Puede adjuntar oyentes a cada elemento a ser oído por los e
>ventos durante cada paso de la propagación de eventos. Debido a l 
>a forma en que un evento simple es pasado a todos los ancestros,  
>puede adjuntar un oyente a un elemento específico o a un elemento 
> más grande en la jerarquía. Naturalmente, un evento adjunto a un 
> elemento más grande recibirá la notificación de todos los elemen 
>tos dentro de él, mientras que un evento adjunto a un botón sólo  
>recibirá eventos preparados para ese botón. Esto es útil si hay v 
>arios elementos que querrían manejarse utilizando el mismo código 
> o similar. 
84    </p>
85    <p>
86      El evento más común utilizado es el evento 'command'. El ev
>ento command es disparado cuando un usuario activa un elemento, p 
>or ejemplo presionando un botón, cambiando una casilla de verific 
>ación o seleccionando un ítem desde un menú. El evento command es 
> un evento útil ya que automática maneja distintas formas de acti 
>var el elemento. Por ejemplo, el evento command ocurrirá sin impo 
>rtar si el usuario utiliza el ratón para seleccionar un botón o p 
>resionar la tecla Enter. 
87    </p>
88    <p>
89      Hay dos formas de adjuntar un evento oyente a un elemento. 
>Primero, utilizando un atributo con script como su valor. Segundo 
>, llamando a un método del evento addEventListener. El primero só 
>lo puede manejar eventos burbujeantes pero tiende a ser más simpl 
>e de escribir. El último puede manejar eventos en cualquier fase  
>y puede también ser utilizado para adjuntar múltiples oyentes par 
>a un evento en un elemento. Utilizando la forma atributo es más c 
>omún para la mayoría de eventos. 
90    </p>
91    <h3 id="Attribute_Event_Listeners" name="Attribute_Event_List
>eners"> 
92      Atributos controladores de eventos
93    </h3>
94    <p>
95      Para controlar eventos bajo la forma de atributos se debe a
>signar un atributo asociado con el evento a controlar en el eleme 
>nto en en que se desea atraparlo: el atributo será el nombre del  
>evento precedido del prefijo 'on' y se le asignará como valor un  
>llamado a la función o script que se desea ejecutar cuando ocurra 
> el evento. Por ejemplo, para el evento '<em>command</em>' el atr 
>ibuto correspondiente será '<em>oncommand</em>' y para '<em>mouse 
>over</em>' será '<em>onmouseove</em>r'. El código de llamado a la 
> función suele ser muy corto y generalmente llama a un procedimie 
>nto que ha sido definido en una etiqueta script o en un archivo s 
>eparado. A continuación se ofrece un ejemplo de tratamiento de ev 
>ento en respuesta a pulsar un botón: 
96    </p>
97    <p>
98      <strong>Ejemplo 1</strong>: {{ Xultu-sv("ex_events_1.xul") 
>}} 
99    </p>
100    <pre class="eval">
101&lt;button label="OK" oncommand="alert('Se apretó el botón!');"/&
>gt; 
102</pre>
103    <p>
104      Como el evento command permea las capas contenedoras (es bu
>rbujeante), también es posible ubicar el controlador de eventos e 
>n un elemento contenedor. En el ejemplo siguiente, el atributo co 
>ntrolador se establece en una caja y ésta atrapa eventos de los d 
>os elementos que contiene. 
105    </p>
106    <p>
107      <strong>Ejemplo 2</strong>&nbsp;: {{ Xultu-sv("ex_events_2.
>xul") }} 
108    </p>
109    <pre class="eval">
110&lt;vbox oncommand="alert(event.target.tagName);"&gt;
111  &lt;button label="OK"/&gt;
112  &lt;checkbox label="Muestra las imágenes"/&gt;
113&lt;/vbox&gt;
114</pre>
115    <p>
116      En este ejemplo, el evento command se filtrará desde el ele
>mento en que ocurra - button o checkbox - hasta el elemento vbox, 
> donde es controlado. Si se hubiese colocado un segundo controlad 
>or de eventos (atributo <code>oncommand</code>) en el elemento bu 
>tton, su código sería invocado antes, seguido del manejador situa 
>do en el elemento vbox. Los controladores de eventos reciben, com 
>o argumento implícito, un objeto event al que se puede hacer refe 
>rencia en código mediante la variable 'event'. Dicho objeto porta 
>, en sus propiedades, la información que específicamente conciern 
>e al evento. Cuando varios elementos comparten un controlador de  
>eventos (como en este ejemplo) es usual utilizar la propiedad 'ta 
>rget' del objeto event (<code>event.target</code>), que alberga u 
>na referencia al elemento en el que ocurrió. En el código de ejem 
>plo se hace un llamado a la ventana de mensajes para que muestre  
>el nombre de la etiqueta 'tagName' del elemento en que ocurra. La 
> propiedad target resulta útil para controlar la permeabilidad de 
> eventos burbujeantes, de modo que un conjunto de elementos, butt 
>ons por ejemplo, comparta y sea controlado mediante un único scri 
>pt. 
117    </p>
118    <div class="note">
119      <strong>Nota de traducción</strong>: Si se anida controlado
>res de eventos, para un mismo evento, en varias capas; se debe te 
>ner cuidado de cancelarlo, una vez controlado en una capa, para e 
>vitar que se dispare nuevamente en los controladores situados en  
>las capas contenedoras. A no ser que se desee realizar acciones e 
>n cascada. 
120    </div>
121    <p>
122      Se debe notar que la sintaxis para establecer los atibitos 
>controladores es similar a la empleada para asignar eventos en do 
>cumentos HTML. De hecho, HTML y XUL comparten el mismo mecanismo  
>de definición de eventos. No obstante, <strong>hay una diferencia 
> importante</strong>: mientras que en HTML se usa el evento 'clic 
>k' (o el atributo <code>onclick</code>) para responder a acciones 
> sobre los buttons, en XUL se debe usar el evento command en su l 
>ugar. XUL soporta el evento click, pero este sólo responde a acci 
>ones del ratón (mouse), no al uso del teclado. En consecuencia, s 
>e debe evitar el uso del evento click en XUL, a no ser que se ten 
>ga alguna razón para responder de modo exclusivo a acciones provo 
>cadas con el mouse (ratón). Adicionalmente, cuando se deshabilita 
> un elemento, este no disparará eventos command; mientras que el  
>evento click se produce con independencia de que el elemento en q 
>ue se dispare esté o no habilitado. 
123    </p>
124    <div class="highlight">
125      <h5 id="Nuestro_ejemplo_2" name="Nuestro_ejemplo_2">
126        Nuestro ejemplo
127      </h5>
128      <p>
129        Un gestor command se puede agregar a los botones Buscar y
> Cancelar del diálogo de búsqueda de archivos. Presionar el botón 
> Buscar debe iniciar la búsqueda. Como aún no vamos a implementar 
> el proceso de búsqueda, dejaremos esta parte fuera por un rato.  
>Presionar el botón Cancelar debe cerrar la ventana. El código de  
>abajo muestra como hacer esto. Mientras estamos aquí, añadimos el 
> mismo código al menuitem Cerrar. 
130      </p>
131      <pre class="eval">
132&lt;menuitem label="Cerrar" accesskey="c" <span class="highlightr
>ed">oncommand="window.close();"</span>/&gt; 
133...
134  
135&lt;button id="cancel-button" label="Cancelar"
136     <span class="highlightred">oncommand="window.close();</span>
>"/&gt; 
137</pre>
138      <p>
139        Aquí se añadieron dos gestores. El atributo <code>oncomma
>nd</code> fue añadido al menuitem Cerrar. Usando este gestor, el  
>usuario podrá cerrar la ventana dando click al menuitem con el mo 
>use o seleccionándolo con el teclado.El gestor <code>oncommand</c 
>ode> también fue añadido al botón Cancelar. 
140      </p>
141    </div>
142    <h3 id="DOM_Event_Listeners" name="DOM_Event_Listeners">
143      Controladores de eventos asignados mediante métodos del DOM
144    </h3>
145    <p>
146      Una segunda vía para asignar controladores de eventos a los
> elementos es usar su método addEventListener. Este camino permit 
>e agregarlos dinámicamente y escucharlos durante la fase de captu 
>ra. A continuación se ilustra la sintaxis: 
147    </p>
148    <p>
149      <strong>Ejemplo 3</strong>: {{ Xultu-sv("ex_events_3.xul") 
>}} 
150    </p>
151    <pre>
152&lt;button id="okbutton" label="OK"/&gt;
153 
154&lt;script&gt;
155function buttonPressed(event){
156  alert('Se apretó el botón!');
157}
158 
159var button = document.getElementById("okbutton");
160button.addEventListener('command', buttonPressed, true);
161&lt;/script&gt;
162</pre>
163    <p>
164      La función <code><a href="/es/DOM/document.getElementById" 
>title="es/DOM/document.getElementById">getElementById()</a></code 
>> devuelve el elemento cuyo Id sea pasado como parámetro; en este 
> caso, el button <code>"okbutton"</code>. Luego se llama a la fun 
>ción <code><a href="/es/DOM/element.addEventListener" title="es/D 
>OM/element.addEventListener">addEventListener()</a></code> de dic 
>ho elemento para agregarle un controlador de eventos: su primer a 
>rgumento es el nombre del evento al que se va a responder, el seg 
>undo es el mombre de la función a llamar cuando el evento ocurra  
>y finalmente, el último argumento debe ser <code>true</code> para 
> controladores en la fase de captura. Si se desea permitir que el 
> evento pase a otras fases se debe asignar el último argumenta co 
>mo false. La función pasada como segundo argumento, debe a su vez 
>, tener un argumento para pasar el objeto event, como se muestra  
>en la declaración de la función <code>buttonPressed</code> arriba 
>. 
165    </p>
166    <div class="highlight">
167      Nuestro ejemplo hasta aquí: {{ Xultu-sv("/findfile/findfile
>-events.xul") }} 
168    </div>
169    <p>
170      Seguimos con más detalles sobre <a href="/es/Tutorial_de_XU
>L/M%C3%A1s_gestores_de_eventos" title="es/Tutorial_de_XUL/Más_ges 
>tores_de_eventos">los eventos</a>. 
171    </p>
172    <p>
173      {{ AnteriorSiguiente("Tutorial de XUL:Menúes con desplazami
>ento", "Tutorial de XUL:Más gestores de eventos") }} 
174    </p>
175    <p>
176      {{ languages( { "en": "en/XUL_Tutorial/Adding_Event_Handler
>s", "fr": "fr/Tutoriel_XUL/Ajout_de_gestionnaires_d\'\u00e9v\u00e 
>8nements", "ja": "ja/XUL_Tutorial/Adding_Event_Handlers", "pl": " 
>pl/Kurs_XUL/Dodawanie_funkcji_obs\u0142ugi_zdarze\u0144" } ) }} 
177    </p>

Volver al historial