En la última sección vimos cómo crear un menú en una barra de menú. XUL tiene además la capacidad de crear menús emergentes. Los menús emergentes normalmente se muestran cuando el usuario presiona el botón derecho del ratón.
Crear un menú emergente (menú popup)
XUL tiene tres tipos diferentes de elementos emergentes, los cuales se describen a continuación. La principal diferencia entre ellos es la manera en la que aparecen.
-
- Menús emergentes simples (Plain Popups)
- El menú emergente simple es una ventana emergente que aparece al presionar el botón izquierdo del ratón sobre un elemento. Son como los menús que aparecen en las barras de menú, excepto que pueden ponerse en cualquier lugar y se les puede poner cualquier contenido. Un buen ejemplo es el menú con despliegue hacia abajo que aparece cuando haces clic sobre la pequeña flecha hacia abajo que sigue a los botones adelante y atrás en una ventana del explorador.
-
- Menús emergentes de contexto (Context Popups)
- El menú emergente de contexto es una ventana emergente que aparece cuando el usuario presiona el botón de menú contextual, el cual es usualmente el botón derecho del ratón. La forma exacta en que un menú contextual es abierto varía en cada plataforma. En Macintosh, por ejemplo, el usuario puede bien presionar la tecla Control y hacer clic con el ratón o mantener presionado el botón del ratón por un momento. Además, es posible abrir un menú contextual sin usar el ratón, por ejemplo presionando la tecla Menú en un teclado.
-
- Ventanas emergentes de información (Tooltips)
- Una ventana emergente de información aparecerá cuando el usuario pasa el ratón sobre un elemento. Este tipo de emergentes puede usarse para proporcionar una descripción de un botón con mayor detalle del que puede ofrecer el botón mismo.
Los tres tipos de elementos emergentes difieren en la forma en que son invocados por el usuario. El tipo de elemento emergente es determinado por el elemento que lo invoca.
Declarar el contenido de un emergente
Un elemento emergente se describe usando el elemento menupopup. No tiene atributos especiales y es un tipo de caja. Cuando es invocado, aparecerá una ventana conteniendo lo que sea que hayas puesto dentro del elemento menupopup. Sin embargo, deberías poner siempre un atributo id en el menupopup ya que sirve para asociar el elemento emergente con un elemento. Veremos lo que esto significa pronto. Pero primero, un ejemplo:
<popupset>
<menupopup id="clipmenu">
<menuitem label="Cortar"/>
<menuitem label="Copiar"/>
<menuitem label="Pegar"/>
</menupopup>
</popupset>
Como puede verse aquí, se ha creado un menú emergente simple con tres órdenes. El elemento menupopup contiene los tres elementos del menú . Además, como observarás, el menuitemid se ha puesto en el elemento menupopup.
El elemento popupset contiene toda la declaración del menú emergente. Este es un contenedor genérico de emergentes y es opcional. Este no aparece en pantalla sino que se usa como un apartado en donde puedes declarar todos tus emergentes. Como su mismo nombre implica (popupset), puedes poner múltiples declaraciones de elementos emergentes dentro de éste. Solamente tienes que añadir, detrás del primer elemento popupset, todos los que quieras adicionalmente. Puedes tener más de un popupset en un archivo, pero lo normal es que tengas únicamente uno.
Asociar un emergente con un elemento
Ahora que hemos creado el elemento emergente, es hora de hacer que se muestre. Para hacerlo necesitamos asociar el emergente con un elemento en donde debería aparecer. Hacemos esto porque queremos que el emergente aparezca únicamente cuando el usuario haga clic en una determinada área de la ventana. Habitualmente será un botón o una caja concretos.
Para asociar el emergente con un elemento agrega un atributo de entre tres posibles al elemento. El atributo que agregues dependerá del tipo de emergente que quieras crear. Para un menú emergente simple, agrega un atributo popup al elemento. Para un menú emergente de contexto, agrega un atributo context. Por último, para un emergente de información, agrega un atributo tooltip.
El valor del atributo debe ser el id del menupopup que quieras que aparezca. Este es el porqué de poner un id en el emergente. De esa manera es fácil tener múltiples menús emergentes en un archivo.
En el ejemplo de arriba, queremos hacer que el emergente sea un menú contextual. Eso significa que necesitamos usar el atributo context y agregarlo al elemento con el cual queremos tener asociado el emergente. El ejemplo de abajo muestra cómo debemos hacer esto:
var el = env.locale; Ejemplo 1 : Código Ver en funcionamiento
<popupset>
<menupopup id="clipmenu">
<menuitem label="Cortar"/>
<menuitem label="Copiar"/>
<menuitem label="Pegar"/>
</menupopup>
</popupset>
<box context="clipmenu">
<label value="Haz clic con el botón derecho para ver el menú"/>
</box>
Aquí, el menú emergente ha sido asociado con una caja. Cada vez que hagas clic contextual (clic con el botón derecho) en cualquier lugar de la caja, aparecerá el menú emergente. El emergente también aparecerá aun si haces clic sobre los descendientes de la caja, así que también funcionará si haces clic en el elemento label. El atributo context se ha usado para asociar la caja con un menú emergente con el mismo id. En este caso, aparecerá el menú emergente clipmenu. De esta forma, puedes tener varios emergentes y asociar cada uno con diferentes elementos.
Podrías asociar múltiples emergentes con el mismo elemento poniendo más atributos de diferente tipo en un elemento. Podrías además asociar el mismo emergente con múltiples elementos, lo cual es una ventaja de esta sintaxis. Los emergentes solamente pueden asociarse a elementos XUL; no pueden asociarse con elementos HTML.
Informativos (Tooltips)
Aquí veremos una forma simple de crear emergentes de información. Hay dos maneras de crearlos. La manera más simple, que es la más común, es agregar un atributo tooltiptext a un elemento para el que quieres asignar un emergente de información.
El segundo método es usar un elemento tooltip que tenga el contenido de un emergente de información. Esto requiere que tengas un bloque de contenido separado para cada emergente de información o que tengas un script que establezca el contenido. Sin embargo, esto te permite usar cualquier contenido además de texto en el emergente de información.
Ejemplo 2: Código Ver en funcionamiento
<button label="Guardar" tooltiptext="Haz clic aquí para guardar tu trabajo"/>
<popupset>
<tooltip id="moretip" orient="vertical" style="background-color: #33DD00;">
<description value="Ver más información"/>
<description value="¿De verdad?" style="color: red;"/>
</tooltip>
</popupset>
<button label="Más" tooltip="moretip"/>
Estos dos botones tienen un emergente de información cada uno. El primero usa el estilo por defecto. El segundo usa un estilo personalizado que tiene un fondo de diferente color y estilos aplicados al texto. El emergente ha sido asociado al botón Más usando el atributo tooltip, el cual ha sido establecido al correspondiente id del elemento tooltip. Observa que el elemento tooltip sigue estando ubicado dentro de un elemento popupset, como los otros tipos de emergentes.
Alineación del emergente
Por defecto, las ventanas emergentes y de contexto aparecerán donde esté el puntero del ratón. Los emergentes de información se ubicarán ligeramente por debajo del elemento de tal forma que el puntero del ratón no los oculte. Hay casos sin embargo, en los que vas a querer indicar con mayor detalle dónde debe aparecer el emergente. Por ejemplo, el menú emergente que aparece cuando haces clic en el botón Atrás en un explorador debería aparecer por debajo del botón Atrás y no donde está el puntero del ratón.
Para cambiar la posición del emergente, puedes usar un atributo adicional, position, en el menupopup. Puedes incluso agregarlo al elemento menupopup. Este atributo se usa para indicar el lugar del emergente relativo al elemento que lo invoca. Puede establecerse en distintos valores, que se describen brevemente a continuación:
- after_start
- El emergente aparece debajo del elemento con los bordes izquierdos de éste y la ventana emergente alineados. Si la ventana emergente es más grande que el elemento, se extiende hacia la derecha. Este es el valor usado para los menús colgantes asociados con los botones Atrás y Adelante de los exploradores.
- after_end
- El emergente aparece debajo del elemento con los bordes derechos de éste y la ventana emergente alineados.
- before_start
- El emergente aparece arriba del elemento con los bordes izquierdos de éste y la ventana emergente alineados.
- before_end
- El emergente aparece arriba del elemento con los bordes derechos de éste y la ventana emergente alineados.
- end_after
- El emergente aparece a la derecha del elemento con los bordes inferiores de éste y la ventana emergente alineados.
- end_before
- El emergente aparece a la derecha del elemento con los bordes superiores de éste y la ventana emergente alineados.
- start_after
- El emergente aparece a la izquierda del elemento con los bordes inferiores de éste y la ventana emergente alineados.
- start_before
- El emergente aparece a la izquierda del elemento con los bordes superiores de éste y la ventana emergente alineados.
- overlap
- El emergente aparece encima del elemento.
- at_pointer
- El emergente aparece en la posición del puntero del ratón.
- after_pointer
- El emergente aparece en la misma posición horizontal del puntero del ratón pero debajo del elemento. Así es como aparecen los emergentes de información.
Al agregar el atributo position al elemento emergente, puedes especificar con precisión dónde aparece el emergente. No puedes especificar la posición exacta de un píxel. El atributo position puede usarse con los tres tipos de emergentes, aunque probablemente no cambiarás el valor de un emergente de información. El ejemplo de abajo demuestra cómo crear un botón Atrás con un menú emergente:
Ejemplo 3: Código Ver en funcionamiento
<popupset>
<menupopup id="backpopup" position="after_start">
<menuitem label="Página 1"/>
<menuitem label="Página 2"/>
</menupopup>
</popupset>
<button label="Hazme aparecer" popup="backpopup"/>
Nuestro ejemplo con un buscador de archivos
Agreguemos un menú emergente simple al dialogo de búsqueda de archivos. Por simplicidad, solo repetiremos los contenidos del menú Editar. Hagamos que el emergente aparezca cuando se haga clic sobre la primera pestaña del panel:
<popupset>
<menupopup id="editpopup">
<menuitem label="Cortar" accesskey="t"/>
<menuitem label="Copiar" accesskey="c"/>
<menuitem label="Pegar" accesskey="p" disabled="true"/>
</menupopup>
</popupset> <vbox flex="1"> . . . <tabpanel id="searchpanel" orient="vertical" context="editpopup">
Aquí se ha agregado un emergente simple similar al del menú Editar. Si haces clic derecho (Control-clic en Macintosh) en cualquier lugar del primer panel, aparecerá el emergente. Sin embargo, el emergente no aparecerá si haces clic en otro lugar. Observa que la caja de texto tiene su propio contenido para el menú emergente, el cual prevalecerá sobre el especificado por nosotros.
Otro ejemplo : Código Ver en funcionamiento
A continuación seguiremos con la creación de menús con desplazamiento.