XUL tiene una cantidad de tipos de elementos para la cración de cajas de listas.
Cajas de listas
Una caja de listas de usa para mostrar un número de elementos en una lista. El usuario puede seleccionar un elemento de la lista.
XUL provee dos tipos de elementos para crear listas, un elemento listbox para crear cajas de listas de multiples filas, y un elemento menulist para crear listas desplegables. Trabajan de forma muy similar al elemento de HTML select, el cual permite embas funciones, pero los elementos XUL tienes caracteristicas adicionales.
La caja de listas más simple usa el elemento listbox para su propia caja, y el elemento listitem para cada elemento. Por ejemplo, esta lista tendrá cuatro filas, una por cada elemento.
Ejemplo 1 Código Ver en funcionamiento
<listbox> <listitem label="Butter Pecan"/> <listitem label="Chocolate Chip"/> <listitem label="Raspberry Ripple"/> <listitem label="Squash Swirl"/> </listbox>
Similar al elemento HTML option, Puedes asignar un valor para cada elemento usando el atributo value. Puedes entonces usar el valor en un script. La caja de listas tendrá por defecto el tamaño de las filas de la lista, pero puedes controlar el tamaño con el atributo rows. Seleccionando el número de rows a mostrar en la caja de lista. Una barra de desplazamiento aparecerá para mostrar al usuario las filas adicionales.
El siguiente ejemplo demuestra estas características adicionales:
Ejemplo 2 Código Ver en funcionamiento
<listbox rows="3"> <listitem label="Butter Pecan" value="bpecan"/> <listitem label="Chocolate Chip" value="chocchip"/> <listitem label="Raspberry Ripple" value="raspripple"/> <listitem label="Squash Swirl" value="squash"/> </listbox>
El ejemplo fue cambiado para mostrar sólo 3 filas a la vez. Los valores se han añadido a los elementos de la lista. Las cajas de listas tienen algunas características adicionales, las cuales se describirán más adelante.
Cajas de lista multi-columna
Las cajas de listas tambien soportan multiples columnas. Cada celda puede tener un contenido arbitrario dentro, aunque generalmente sólo se usa texto. Cuando el usuario selecciona un elemento de la lista, la fila entera se selecciona. No tendrás una sola celda seleccionada.
Se usan dos campos para especificar las columnas en la caja de listas. El elemento listcols se usa para mantener la información de la columna, cada una de las cuales se especifica usando un elemento listcol . Necesitas un elemento listcol para cada columna en la caja de listas.
Las cajas de lista no poseen un equivalente al elemento rows de las grillas. De hecho, hay un equivalente, pero es creado y puesto en la caja de lista automáticamente. También está oculto para que no se sepa que está allí.
El elemento listcell (celda de lista) puede ser utilizado para cada celda en una fila. Si se quiere tener tres columnas, se necesita adicionar tres elementos listcell dentro de cada listitem. Para especificar el texto contenido en una celda debe colocarse dentro del elemento un atributo label. Para el simple caso donde hay una sola columna, también puede ponerse los atributos label directamente en los elementos listitem (ítem de lista) correspondientes y no utilizar elementos listcell, como se muestra en el siguente ejemplo.
(Cuando el usuario selecciona un item, toda la fila es seleccionada. No es posible seleccionar una celda individualmente.)
El siguiente ejemplo es de una caja de lista con dos columnas y tres filas:
Ejemplo 3
<listbox> <listcols> <listcol flex="1"/> <listcol flex="2"/> </listcols> <listitem> <listcell label="Jorge"/> <listcell label="Pintor de casas"/> </listitem> <listitem> <listcell label="María Elena"/> <listcell label="Fabricante de velas"/> </listitem> <listitem> <listcell label="Rogelio"/> <listcell label="Matón"/> </listitem> </listbox>
Esta caja de lista posee dos columnas, siendo la segunda el doble de flexible que la primera. Si se reduce el tamaño horizontalmente, las etiquetas en las celdas se recortarán automáticamente. Como con otros elementos, puede utilizarse el atributo crop en las celdas o en los ítems para controlar el recorte.
Filas de encabezado
Las cajas de lista también permiten la utilización de una fila especial, la fila encabezado. Es muy parecida a una fila regular excepto que se la muestra de manera distinta. Puede ser aprovechada para crear encabezados en las columnas. Se utilizan dos elementos.
El elemento cabeza de lista (listhead) se usa para las filas de encabezado, al igual que el elemento listitem se utiliza para filas comunes. Sin embargo la fila de encabezado no es una fila normal, por lo que si se usara un guión para obtener la primer fila en una caja de lista, la fila de encabezado no sería tenida en cuenta.
El elemento listheader (encabezado de lista) indica cada celda en la fila de encabezado. Para indicar el texto dentro de la celda de encabezado se utiliza el atributo label
Este sería el ejemplo anterior pero con una fila de encabezado:
Ejemplo 4
<listbox> <listhead> <listheader label="Nombre"/> <listheader label="Ocupación"/> </listhead> <listcols> <listcol flex="1"/> <listcol flex="2"/> </listcols> <listitem> <listcell label="Jorge"/> <listcell label="Pintor de casas"/> </listitem> <listitem> <listcell label="María Elena"/> <listcell label="Fabricante de velas"/> </listitem> <listitem> <listcell label="Rogelio"/> <listcell label="Matón"/> </listitem> </listbox>
En este ejemplo, el atributo flex se usa para hacer la columna flexible. Este atributo será descrito en una sección posterior, pero aqui permite que la columna rellene todo el espacio horizontal disponible. Puedes redimensionar la ventana para ver que la columna se estrecha cuando la ventana lo hace. Si cortas el tamaño horizontalmente, las etiquetas de las celdas se cortarán automáticamente usando una elipsis. Puedes usar el atributo crop en las celdas o elementos seleccionados con el valor none para deshablitar la elipsis.
Listas desplegables
Las listas desplegables se crean en HTML usando el elemento select . El usuario puede ver una sola elección en una caja de texto y hacer click en la flecha o algo similar como un botón pegado a la caja de texto para realizar una selección diferente. Las otras opciones aparecerán en una ventana emergente. XUL tiene un elemento [[XUL:Elemento#menulista|lista de menú}} que puede usarse para este proposito. Consiste en una caja de texto con un btón adjunto. El nombre se eligió porque muestra un menu emergente con las opciones en el.
Se necesitan tres elementos para describir una lista desplegable. El primero es el elemento menulist , que crea la caja de texto con el botón adjunto. El segundo, menupopup, crea la ventana de menu emergente que aparecerá cuando el botón sea pulsado. El tercero, menuitem, crea cada opción individual.
Su sintaxis se describe mejor con el siguiente ejemplo:
Ejemplo 5 Código Ver en funcionamiento
<menulist label="Bus">
<menupopup>
<menuitem label="Coche"/>
<menuitem label="Taxi"/>
<menuitem label="Bus" selected="true"/>
<menuitem label="Tren"/>
</menupopup>
</menulist>
Esta lista de menu contiene cuatro opciones, una por cada elemento menuitem . Para mostrar las opciones, haz click en el botón de flecha en la lista de menu. Cuando se seleccione uno, este aparecerá como la opción en la lista de menu. El atributo selected se usa para indicar el valor que tendrá la selección por defecto.
Lista de menú editable
Por defecto, solo puedes seleccionar opciones de la lista. No puedes introducir tu propio texto tecleandolo dentro. Una variante del menulist permite editar el texto dentro del campo. Por ejemplo, el campo URL en el navegador tiene una lista desplegable para seleccionar URLs tecleadas anteriormente, pero puedes teclaearla tu mismo.
Para clear un menulist editable, añada el atributo editable como sigue:
Ejemplo 6
Código Ver en funcionamiento
<menulist editable="true">
<menupopup>
<menuitem label="www.mozilla.org"/>
<menuitem label="www.xulplanet.com"/>
<menuitem label="www.dmoz.org"/>
</menupopup>
</menulist>
El campo URL creado aqui tiene tres opciones predefinidas que el usuario puede seleccionar o puede introducir una propia escribiendo en el campo. El texto que el usuario introduzca no se añadirá como nueva opción. Porque el atributo label no se usa en este ejemplo, el valor por defecto será en blanco.
Categorías
links interwikis