mozilla

Revision 270353 of Añadiendo los gestores de eventos

  • Enlace amigable (slug) de la revisión: Tutorial_de_XUL/Añadiendo_los_gestores_de_eventos
  • Título de la revisión: Añadiendo los gestores de eventos
  • Id de la revisión: 270353
  • Creada:
  • Creador: Maharba
  • ¿Es la revisión actual? No
  • Comentario /* Nuestro ejemplo */

Contenido de la revisión

{{ Traducción("inglés", "XUL Tutorial:Adding Event Handlers", "en") }}

The find files dialog so far looks quite good. We haven't cleaned it up much but we have created a simple user interface easily. Next, we will show how to add scripts to it.

Usando scripts

Para hacer funcional el diálogo de búsqueda de archivos, necesitaremos algunos scripts los cuales se ejecutarán cuando el usuario interactúe con el diálogo. Podríamos querer agregar un script para manejar el botón Buscar, el botón Cancelar y manejar cada comando del menú. Escribimos esto utilizando funciones JavaScript muchas de la misma forma que en HTML.

Puede utilizar el elemento script para incluir scripts en archivos XUL. Puede incluir el código script directamente en el archivo XUL entre la apertura y cierre de etiquetas script pero es mucho mejor incluir código en un archivo separado ya que de esta manera la ventana XUL cargará ligeramente más rápido. El atributo src es utilizado para enlazar un archivo script externo.

Nuestro ejemplo

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 .js. En este caso, findfile.js será utilizado. Agregue la línea debajo sólo después de la apertura de la etiqueta window y DESPUES de cualquier otro elemento.

<script src="findfile.js"/>

Crearemos el archivo script más tarde cuando conozcamos qué queremos poner en él. Definiremos algunas funciones en el archivo y podremos llamarlas desde un manejador de eventos.

Puede incluir scripts múltiples en un archivo XUL utilizando múltiples etiquetas script, cada una apuntando a un script diferente. Puede utilizar URLs relativas o absolutas. Por ejemplo, puede utilizar URLs de la siguiente forma:

<script src="findfile.js"/>
<script src="chrome://findfiles/content/help.js"/>
<script src="http://www.example.com/js/items.js"/>

Este tutorial no intenta describir cómo utilizar JavaScript ya que esto es un tópico extenso y hay variedades de otras fuentes que están disponibles para esto.

Por defecto la consola JavaScript sólo muestra errores desde contenido de red. Para mostrar errores en JavaScript chrome, es necesario cambiar la preferencia javascript.options.showInConsole a verdadero. Puede también cambiar la preferencia javascript.options.strict para la depuración. Estableciendo este valor a verdadero, la sintaxis propensa, pobremente escrita y no estándar causa errores lógicos que son guardados en la consola JavaScript.

Respuesta a eventos

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 disparar varios eventos en diferentes situaciones. Algunos eventos son disparados solamente por determinados elementos.

Cada evento tiene un nombre, por ejemplo, 'mousemove' es el nombre del evento que es disparado cuando el usuario mueve el ratón sobre un elemento de la Interfaz de Usuario. XUL utiliza el mismo mecanismo de evento definido en eventos DOM. Cuando una acción ocurre que debería disparar un evento, tal como que el usuario mueva el ratón, un objeto evento se crea correspondiente a ese tipo de evento. Varias propiedades son establecidas en el objeto evento tal como ser la posición del ratón, la tecla que fue presionada, y así.

El evento es enviado luego en fases al XUL.

  • En la fase de captura, el evento primero es enviado a la ventana, luego al documento, seguido por cada ancestro del elemento XUL donde el evento ocurrió hacia abajo hasta que alcance el elemento.
  • En la fase objetivo, el evento es enviado hacia el elemento objetivo XUL.
  • En la fase burbujeante, el evento es enviado a cada elemento de más atrás hasta que alcance nuevamente la ventana.

Puede responder a un evento durante la captura completa de la fase burbujeante. Una vez que el evento ha finalizado de propagarse, cualquier acción por defecto ocurrirá, la cual está incluida en comportamiento del elemento.

Por ejemplo, cuando el ratón sea movido sobre un botón que está dentro de un cuadro, un evento 'mousemove' es generado, y enviado primero a la ventana, seguido por el documento, y luego al cuadro. Eso completa la fase de captura. Luego, el evento 'mousemove' es enviado al botón. Finalmente, la fase burbujeante es esencialmente lo inverso a la fase de captura. Note que algunos eventos no hacen la fase burbujeante.

Puede adjuntar oyentes a cada elemento a ser oído por los eventos durante cada paso de la propagación de eventos. Debido a la 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 elementos 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 varios elementos que querrían manejarse utilizando el mismo código o similar.

El evento más común utilizado es el evento 'command'. El evento command es disparado cuando un usuario activa un elemento, por ejemplo presionando un botón, cambiando una casilla de verificación o seleccionando un ítem desde un menú. El evento command es un evento útil ya que automática maneja distintas formas de activar el elemento. Por ejemplo, el evento command ocurrirá sin importar si el usuario utiliza el ratón para seleccionar un botón o presionar la tecla Enter.

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 simple de escribir. El último puede manejar eventos en cualquier fase y puede también ser utilizado para adjuntar múltiples oyentes para un evento en un elemento. Utilizando la forma atributo es más común para la mayoría de eventos.

Attribute Event Listeners

To use the attribute form, place an attribute on the element where you want the event listener to be, the name of which should be the event name preceded by the word 'on'. For example, the corresponding attribute for the 'command' event is 'oncommand'. The value of the attribute should be some script that should be executed when the event occurs. Typically, this code will be short and just call a function defined in a separate script. An example of responding to a button being pressed:

Ejemplo 1: {{ Xultu-sv("ex_events_1.xul") }}

<button label="OK" oncommand="alert('Se apretó el botón!');"/>

Since the command event will bubble, it is also possible to place the event listener on an enclosing element. In the example below, the listener has been placed on a box and will receive events for both elements.

Ejemplo 2 : {{ Xultu-sv("ex_events_2.xul") }}

<vbox oncommand="alert(event.target.tagName);">
  <button label="OK"/>
  <checkbox label="Muestra las imágenes"/>
</vbox>

In this example, the command event will bubble up from the button or checkbox to the vbox, where it is handled. If a second listener (the oncommand attribute) were placed on the button, its code will be called first, followed by the handler on the vbox. Event handlers are passed the event object as an implied argument called 'event'. This is used to get specific information about the event. One commonly used property is the 'target' property of the event, which holds the element where the event actually occured. In the example we display an alert containing the target's tag name. The target is useful when using a bubbling event so that you could have a set of buttons which are all handled by a single script.

You might notice that the attribute syntax is similar to that used for events in HTML documents. In fact, both HTML and XUL share the same event mechanism. One important difference is that while the 'click' event (or the onclick attribute) is used in HTML to respond to buttons, in XUL the command event should be used instead. XUL does have a click event, but it only responds to mouse clicks, not to keyboard usage. Thus, the click event should be avoided in XUL, unless you have a reason to have an element that can only be handled with a mouse. In addition, whereas the command event will not be sent if an element is disabled, the click event will be sent regardless of whether the element is disabled or not.

Nuestro ejemplo

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.

<menuitem label="Cerrar" accesskey="c" oncommand="window.close();"/>
...
  
<button id="cancel-button" label="Cancelar"
     oncommand="window.close();"/>

Aquí se añadieron dos gestores. El atrinbuto oncommand fue añadido al menuitem Cerrar. Usando este gestor, el usuario podrá cerrar la ventana dando click al menuitem con el mouse o seleccionándolo con el teclado.El gestor oncommand también fue añadido al botón Cancelar.

DOM Event Listeners

The second way to add an event handler is to call an element's addEventListener method. This allows you to attach an event listener dynamically and listen for events during the capturing phase. The syntax is as follows:

Ejemplo 3: {{ Xultu-sv("ex_events_3.xul") }}

<button id="okbutton" label="OK"/>

<script>
function buttonPressed(event){
  alert('Se apretó el botón!');
}

var button = document.getElementById("okbutton");
button.addEventListener('command', buttonPressed, true);
</script>

The getElementById() function returns the element with a given id, in this case the button. The addEventListener() function is called to add a new capturing event listener. The first argument is the name of the event to listen to. The second argument is the event listener function which will be called when the event occurs. Finally, the last argument should be true for capturing listeners. You can also listen during the bubbling phase by setting the last argument to false. The event listener function passed as the second argument should take one argument, the event object, as shown in the declaration for the buttonPressed function above.

Nuestro ejemplo hasta aquí: {{ Xultu-sv("/findfile/findfile-events.xul") }}

Seguimos con más detalles sobre los eventos.

{{ AnteriorSiguiente("Tutorial de XUL:Menúes con desplazamiento", "Tutorial de XUL:Más gestores de eventos") }}

{{ languages( { "en": "en/XUL_Tutorial/Adding_Event_Handlers", "fr": "fr/Tutoriel_XUL/Ajout_de_gestionnaires_d\'\u00e9v\u00e8nements", "ja": "ja/XUL_Tutorial/Adding_Event_Handlers", "pl": "pl/Kurs_XUL/Dodawanie_funkcji_obs\u0142ugi_zdarze\u0144" } ) }}

Fuente de la revisión

<p>
</p><p>{{ Traducción("inglés", "XUL Tutorial:Adding Event Handlers", "en") }}
</p><p>The find files dialog so far looks quite good. We haven't cleaned it up much but we have created a simple user interface easily. Next, we will show how to add scripts to it.
</p>
<h3 name="Usando_scripts"> Usando scripts </h3>
<p>Para hacer funcional el diálogo de búsqueda de archivos, necesitaremos algunos scripts los cuales se ejecutarán cuando el usuario interactúe con el diálogo. Podríamos querer agregar un script para manejar el botón Buscar, el botón Cancelar y manejar cada comando del menú. Escribimos esto utilizando funciones <a href="es/JavaScript">JavaScript</a> muchas de la misma forma que en <a href="es/HTML">HTML</a>.
</p><p>Puede utilizar el elemento <code><a href="es/XUL/Elementos#script">script</a></code> para incluir scripts en archivos XUL. Puede incluir el código script directamente en el archivo XUL entre la apertura y cierre de etiquetas <code>script</code> pero es mucho mejor incluir código en un archivo separado ya que de esta manera la ventana XUL cargará ligeramente más rápido. El atributo <code><a href="es/XUL/Atributos#src">src</a></code> es utilizado para enlazar un archivo script externo.
</p>
<div class="highlight">
<h5 name="Nuestro_ejemplo"> Nuestro ejemplo </h5>
<p>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 <i>.js</i>. En este caso, findfile.js será utilizado. Agregue la línea debajo sólo después de la apertura de la etiqueta <code><a href="es/XUL/Elementos#window">window</a></code> y DESPUES de cualquier otro elemento.
</p>
<pre class="eval"><span class="highlightred">&lt;script src="findfile.js"/&gt;</span>
</pre>
<p>Crearemos el archivo script más tarde cuando conozcamos qué queremos poner en él. Definiremos algunas funciones en el archivo y podremos llamarlas desde un manejador de eventos.
</p>
</div>
<p>Puede incluir scripts múltiples en un archivo XUL utilizando múltiples etiquetas <code>script</code>, cada una apuntando a un script diferente. Puede utilizar URLs relativas o absolutas. Por ejemplo, puede utilizar URLs de la siguiente forma:
</p>
<pre class="eval">&lt;script src="findfile.js"/&gt;
&lt;script src="<a class=" external" href="chrome://findfiles/content/help.js" rel="freelink">chrome://findfiles/content/help.js</a>"/&gt;
&lt;script src="<span class="nowiki">http://www.example.com/js/items.js</span>"/&gt;
</pre>
<p>Este tutorial no intenta describir cómo utilizar JavaScript ya que esto es un tópico extenso y hay variedades de otras fuentes que están disponibles para esto.
</p>
<div class="tip">Por defecto la consola JavaScript sólo muestra errores desde contenido de red. Para mostrar errores en JavaScript chrome, es necesario cambiar la preferencia <code>javascript.options.showInConsole</code> a verdadero.
Puede también cambiar la preferencia <code>javascript.options.strict</code> para la depuración. Estableciendo este valor a verdadero, la sintaxis propensa, pobremente escrita y no estándar causa errores lógicos que son guardados en la consola JavaScript.</div>
<h3 name="Respuesta_a_eventos"> Respuesta a eventos </h3>
<p>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 disparar varios eventos en diferentes situaciones. Algunos eventos son disparados solamente por determinados elementos.
</p><p>Cada evento tiene un nombre, por ejemplo, 'mousemove' es el nombre del evento que es disparado cuando el usuario mueve el ratón sobre un elemento de la Interfaz de Usuario. XUL utiliza el mismo mecanismo de evento definido en <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">eventos DOM</a>. Cuando una acción ocurre que debería disparar un evento, tal como que el usuario mueva el ratón, un objeto evento se crea correspondiente a ese tipo de evento. Varias propiedades son establecidas en el objeto evento tal como ser la posición del ratón, la tecla que fue presionada, y así.
</p><p>El evento es enviado luego en fases al XUL.
</p>
<ul><li> En la fase de captura, el evento primero es enviado a la ventana, luego al documento, seguido por cada ancestro del elemento XUL donde el evento ocurrió hacia abajo hasta que alcance el elemento.
</li><li> En la fase objetivo, el evento es enviado hacia el elemento objetivo XUL.
</li><li> En la fase burbujeante, el evento es enviado a cada elemento de más atrás hasta que alcance nuevamente la ventana.
</li></ul>
<p>Puede responder a un evento durante la captura completa de la fase burbujeante. Una vez que el evento ha finalizado de propagarse, cualquier acción por defecto ocurrirá, la cual está incluida en comportamiento del elemento.
</p><p>Por ejemplo, cuando el ratón sea movido sobre un botón que está dentro de un cuadro, un evento 'mousemove' es generado, y enviado primero a la ventana, seguido por el documento, y luego al cuadro. Eso completa la fase de captura. Luego, el evento 'mousemove' es enviado al botón. Finalmente, la fase burbujeante es esencialmente lo inverso a la fase de captura. Note que algunos eventos no hacen la fase burbujeante.
</p><p>Puede adjuntar oyentes a cada elemento a ser oído por los eventos durante cada paso de la propagación de eventos. Debido a la 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 elementos 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 varios elementos que querrían manejarse utilizando el mismo código o similar.
</p><p>El evento más común utilizado es el evento 'command'. El evento command es disparado cuando un usuario activa un elemento, por ejemplo presionando un botón, cambiando una casilla de verificación o seleccionando un ítem desde un menú. El evento command es un evento útil ya que automática maneja distintas formas de activar el elemento. Por ejemplo, el evento command ocurrirá sin importar si el usuario utiliza el ratón para seleccionar un botón o presionar la tecla Enter.
</p><p>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 simple de escribir. El último puede manejar eventos en cualquier fase y puede también ser utilizado para adjuntar múltiples oyentes para un evento en un elemento. Utilizando la forma atributo es más común para la mayoría de eventos.
</p>
<h3 name="Attribute_Event_Listeners"> Attribute Event Listeners </h3>
<p>To use the attribute form, place an attribute on the element where you want the event listener to be, the name of which should be the event name preceded by the word 'on'. For example, the corresponding attribute for the 'command' event is 'oncommand'. The value of the attribute should be some script that should be executed when the event occurs. Typically, this code will be short and just call a function defined in a separate script. An example of responding to a button being pressed:
</p><p><b>Ejemplo 1</b>: {{ Xultu-sv("ex_events_1.xul") }}
</p>
<pre class="eval">&lt;button label="OK" oncommand="alert('Se apretó el botón!');"/&gt;
</pre>
<p>Since the command event will bubble, it is also possible to place the event listener on an enclosing element. In the example below, the listener has been placed on a box and will receive events for both elements.
</p><p><b>Ejemplo 2</b> : {{ Xultu-sv("ex_events_2.xul") }}
</p>
<pre class="eval">&lt;vbox oncommand="alert(event.target.tagName);"&gt;
  &lt;button label="OK"/&gt;
  &lt;checkbox label="Muestra las imágenes"/&gt;
&lt;/vbox&gt;
</pre>
<p>In this example, the command event will bubble up from the button or checkbox to the vbox, where it is handled. If a second listener (the <code>oncommand</code> attribute) were placed on the button, its code will be called first, followed by the handler on the vbox. Event handlers are passed the event object as an implied argument called 'event'. This is used to get specific information about the event. One commonly used property is the 'target' property of the event, which holds the element where the event actually occured. In the example we display an alert containing the target's tag name. The target is useful when using a bubbling event so that you could have a set of buttons which are all handled by a single script.
</p><p>You might notice that the attribute syntax is similar to that used for events in HTML documents. In fact, both HTML and XUL share the same event mechanism. One important difference is that while the 'click' event (or the <code>onclick</code> attribute) is used in HTML to respond to buttons, in XUL the command event should be used instead. XUL does have a click event, but it only responds to mouse clicks, not to keyboard usage. Thus, the click event should be avoided in XUL, unless you have a reason to have an element that can only be handled with a mouse. In addition, whereas the command event will not be sent if an element is disabled, the click event will be sent regardless of whether the element is disabled or not.
</p>
<div class="highlight">
<h5 name="Nuestro_ejemplo_2"> Nuestro ejemplo </h5>
<p>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.
</p>
<pre class="eval">&lt;menuitem label="Cerrar" accesskey="c" <span class="highlightred">oncommand="window.close();"</span>/&gt;
...
  
&lt;button id="cancel-button" label="Cancelar"
     <span class="highlightred">oncommand="window.close();</span>"/&gt;
</pre>
<p>Aquí se añadieron dos gestores. El atrinbuto <code>oncommand</code> fue añadido al menuitem Cerrar. Usando este gestor, el usuario podrá cerrar la ventana dando click al menuitem con el mouse o seleccionándolo con el teclado.El gestor <code>oncommand</code> también fue añadido al botón Cancelar.
</p>
</div>
<h3 name="DOM_Event_Listeners"> DOM Event Listeners </h3>
<p>The second way to add an event handler is to call an element's addEventListener method. This allows you to attach an event listener dynamically and listen for events during the capturing phase. The syntax is as follows:
</p><p><b>Ejemplo 3</b>: {{ Xultu-sv("ex_events_3.xul") }}
</p>
<pre>&lt;button id="okbutton" label="OK"/&gt;

&lt;script&gt;
function buttonPressed(event){
  alert('Se apretó el botón!');
}

var button = document.getElementById("okbutton");
button.addEventListener('command', buttonPressed, true);
&lt;/script&gt;
</pre>
<p>The <code><a href="es/DOM/document.getElementById">getElementById()</a></code> function returns the element with a given id, in this case the button. The <code><a href="es/DOM/element.addEventListener">addEventListener()</a></code> function is called to add a new capturing event listener. The first argument is the name of the event to listen to. The second argument is the event listener function which will be called when the event occurs. Finally, the last argument should be <code>true</code> for capturing listeners. You can also listen during the bubbling phase by setting the last argument to false. The event listener function passed as the second argument should take one argument, the event object, as shown in the declaration for the <code>buttonPressed</code> function above.
</p>
<div class="highlight">
Nuestro ejemplo hasta aquí: {{ Xultu-sv("/findfile/findfile-events.xul") }}</div>
<p>Seguimos con más detalles sobre <a href="es/Tutorial_de_XUL/M%c3%a1s_gestores_de_eventos">los eventos</a>.
</p><p>{{ AnteriorSiguiente("Tutorial de XUL:Menúes con desplazamiento", "Tutorial de XUL:Más gestores de eventos") }}
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/XUL_Tutorial/Adding_Event_Handlers", "fr": "fr/Tutoriel_XUL/Ajout_de_gestionnaires_d\'\u00e9v\u00e8nements", "ja": "ja/XUL_Tutorial/Adding_Event_Handlers", "pl": "pl/Kurs_XUL/Dodawanie_funkcji_obs\u0142ugi_zdarze\u0144" } ) }}
Revertir a esta revisión