Cajas de grupo

Esta sección describe un método para incluir elementos dentro de grupos.

Cajas de grupo

HTML provee un elemento, fieldset, que puede ser usado para agrupar otros elementos. Generalmente un borde es trazado alrededor de los elementos para demostrar que están relacionados entre sí. Un ejemplo sería un grupo de casillas de verificación. XUL provee un elemento equivalente, groupbox (caja de grupo), que se utiliza para propósitos similares.

Como su nombre implica, la groupbox es un tipo de caja, esto significa que los elementos dentro de ella se alinean de acuerdo a las reglas de las cajas. Hay dos diferencias entre las cajas de grupo y las cajas regulares:

1. Un borde biselado es dibujado alrededor de la caja de grupo de manera predeterminada. Puede cambiarse este comportamiento corrigiendo el estilo CSS.
2. La caja de grupo permite un encabezado que es colocado a lo largo del borde superior.

Como las cajas de grupo son un tipo de caja pueden utilizarse los mismos atributos, como orient y flex. Puede insertarse cualquier elemento dentro de la caja, pero normalmente estos elementos estarán relacionados de alguna manera.

La etiqueta en el borde superior puede ser creada utilizando el elemento caption, esto funciona de manera similar al elemento HTML legend. Un simple elemento caption puesto como el primer hijo será suficiente.

El ejemplo siguiente muestra una simple caja de grupo:

Ejemplo

<groupbox>
  <caption label="Respuesta"/>
  <description value="Banana"/>
  <description value="Mandarina"/>
  <description value="Casilla telefónica"/>
  <description value="Kiwi"/>
</groupbox>

Esto causará que se vean cuatro segmentos de texto rodeados por una caja con la etiqueta “Respuesta�?. Nótese que la caja de grupo posee orientación vertical por omisión, lo que es necesario para apilar los elementos en una sola columna.

También pueden agregarse elementos hijos dentro del elemento caption para crear un encabezado más complejo. Por ejemplo, el panel de preferencias para tipos de letra de Mozilla utiliza un menú desplegable como encabezado. A pesar de que se puede hacer uso de cualquier contenido, usualmente se usa una casilla de verificación o un menú desplegable.

Ejemplo

<groupbox flex="1">
  <caption>
    <checkbox label="Habilitar copias de seguridad"/>
  </caption>
  <hbox>
    <label control="dir" value="Directorio:"/>
    <textbox id="dir" flex="1"/>
  </hbox>
  <checkbox label="Comprimir archivos almacenados"/>
</groupbox>

En este ejemplo se ha utilizado como encabezado una casilla de verificación. Podríamos usar un guión para habilitar o deshabilitar los contenidos de la caja de grupo cuando la casilla de verificación sea marcada y desmarcada. La caja de grupo contiene una caja horizontal con una etiqueta y una caja de texto. Tanto la caja de texto como la caja de grupo fueron hechas flexibles así la caja de texto se expandirá cuando la ventana se expanda. La casilla de verificación adicional aparece debajo de la caja de texto por la orientación vertical de la caja de grupo. En la siguiente sección añadiremos una caja de grupo a la ventana de diálogo “Buscar archivos�?.

Grupos radiales

Puede usarse el elemento radiogroup (grupo radial) para agrupar varios elementos radio (botón radial). El radiogroup es un tipo de caja. Puede agregarse cualquier elemento al mismo, y aparte de su manejo especial de botones radio estos funcionan como cualquier otra caja.

Todos los botones radiales insertados en el grupo radial serán agrupados entre sí, aún si se encuentran dentro de cajas anidadas. Esto podría aprovecharse para agregar elementos extras dentro de la estructura, como en el siguiente ejemplo:

Ejemplo

<radiogroup>
  <radio id="no" value="no" label="Sin número"/>
  <radio id="aleatorio" value="aleatorio" label="Número aleatorio"/>
  <hbox>
    <radio id="especificado" value="especificado" label="Especifique un número:"/>
    <textbox id="numeroespecifico"/>
  </hbox>
</radiogroup>

Obsérvese que el elemento radiogroupno dibuja un borde a su alrededor, si se desearan bordes y encabezado deberá ser colocado dentro de una groupbox (caja de grupo).

A continuación utilizaremos lo aprendido hasta el momento y añadiremos algunos elementos adicionales a la ventana de diálogo “Buscar archivos�?.

Categorías

links interwikis