Rejillas

XUL posee un conjunto de elementos para crear rejilla tabulares.

Diseño tabular en XUL

Típicamente las páginas HTML utilizan tablas para diseñar o exhibir una rejillas de datos, XUL posee un conjunto de elementos para realizar este tipo de cosas. El elemento grid (rejilla) se utiliza para declarar una rejilla de datos, y posee algunas similitudes con el rótulo HTML table.

Una rejilla (grid) contiene elementos que son alineados en filas al igual que tablas. Dentro de la rejillaa se declaran dos cosas: las columnas y las filas que serán utilizadas. Tal como con las tablas HTML, dentro de las filas se inserta el contenido como ser etiquetas y botones. No se puede agregar contenido dentro de las columnas, pero pueden utilizarse para especificar el tamaño y apariencia de las mismas en la rejilla. Alternativamente, puede colocarse contenido dentro de las columnas y utilizarse las filas para especificar la apariencia. Primero veremos el método de organizar elementos por fila.

Para declarar un conjunto de filas se utiliza el rótulo rows (filas), el cual debe ser un elemento hijo del grid. Dentro de él añadiremos elementos row (fila), utilizados para especificar cada fila. Dentro de cada elemento row se agregará el contenido que se desee tener en esa fila.

Análogamente, las columnas se declaran con el elemento columns (columnas), que debe ser insertado como un elemento hijo de grid (la rejilla). Dentro de éste irán los elementos column (columna), uno por cada columna que se necesite en la rejilla. Esto debe ser fácil de entender con un ejemplo.

Ejemplo

<grid flex="1">
  <columns>
    <column flex="2"/>
    <column flex="1"/>
  </columns>

  <rows>
    <row>
      <button label="Conejo"/>
      <button label="Elefante"/>
    </row>
    <row>
      <button label="Koala"/>
      <button label="Gorila"/>
    </row>
  </rows>
</grid>

A una rejilla se le han añadido dos filas y dos columnas, cada columna es declarada con el rótulo column y se la ha dado el atributo flex. Cada fila contiene dos elementos, ambos botones. El primer hijo de cada elemento row es puesto en la primer columna de la rejilla y el segundo hijo se coloca en la segunda columna. Nótese que no se necesita un elemento para declarar una celda, o sea que no hay un equivalente al elemento tdde HTML. En lugar de esto, los contenidos de cada celda se ponen directamente en los elementos row.

Obviamente, además de un button (botón) puede agregarse cualquier tipo de elemento. Si se necesita que una celda en particular contenga múltiples elementos puede utilizarse un hbox (caja anidada) u otro elemento de caja. La hbox es un solo elemento pero dentro de ella pueden colocarse todos los elementos que se quiera. Por ejemplo:

Ejemplo

<grid flex="1">
  <columns>
    <column/>
    <column flex="1"/>
  </columns>

  <rows>
    <row>
      <label control="titulodoc" value="Título del documento:"/>
      <textbox id="titulodoc" flex="1"/>
    </row>
    <row>
      <label control="rutadoc" value="Ubicación:"/>
      <box flex="1">
        <textbox id="rutadoc" flex="1"/>
        <button label="Revisar..."/>
      </box>   
    </row>
  </rows>
</grid>

Note en la imagen de abajo cómo en la primer columna de elementos que contienen las etiquetas hay un solo elemento en cada fila. La segunda fila de la segunda columna contiene una caja, que a su vez contiene dos elementos, una textbox (caja de texto )y un button (botón). Dentro de una celda podrían insertarse cajas anidadas adicionales o incluso otra rejilla.

Si se redimensiona la ventana del ejemplo anterior se verá que las cajas de texto cambian su tamaño, pero los demás elementos no. Esto es porque se añadieron atributos code>flex</code> a las cajas de texto y a la segunda columna. La primer columna no necesita ser flexible porque las etiquetas no requieren cambiar de tamaño.

El ancho inicial de una columna es determinado por el elemento más grande en esa columna. Similarmente, la altura de una fila se determina por el tamaño de sus elementos. Para definir los tamaños pueden utilizarse las propiedades CSS minwidth y maxwidth, entre otras.

También pueden colocarse los elementos dentro de las column en lugar de las filas. Si se hace esto, las filas serán declaradas únicamente para especificar cuántas filas existen.

Ejemplo

<grid>
  <rows>
    <row/>
    <row/>
    <row/>
  </rows>

  <columns>
    <column>
      <label control="primero" value="Primer Nombre:"/>
      <label control="segundo" value="Segundo Nombre:"/>
      <label control="apellido" value="Apellido:"/>
    </column>
    <column>
      <textbox id="primero"/>
      <textbox id="segundo"/>
      <textbox id="apellido"/>
    </column>
  </columns>

</grid>

Esta rejilla posee tres filas y dos columnas, los elementos row son solamente marcadores de posición para especificar cuántas hay. Puede añadirse el atributo flex a alguna fila para volverla flexible. El contenido es puesto dentro de cada column, el primer elemento dentro de cada elemento column es ubicado en la primer fila, el segundo en la segunda fila y el tercero en la tercer fila.

Si se agrega contenido tanto en filas como en columnas, un contenido se superpondrá con el otro, aunque ambos se alinearán correctamente en la rejilla. Esto crea un efecto muy parecido a una rejilla de elementos stack (pila).

El orden de los elementos en la grid determina cuál se presentará encima y cuál será ubicado debajo. Si el elemento rows es puesto después del elemento columns, el contenido de las rows será mostrado por encima del contenido de las columns; si se ubica primero el elemento columns, su contenido se verá primero. Análogamente, los eventos como presiones en las teclas del ratón o del teclado se enviarán únicamente al grupo que se encuentre encima. Esta es la razón por la cual en el ejemplo anterior las columnas fueron declaradas después que las filas. Si las columnas se hubieran puesto primero, las filas recibirían los eventos y no podría escribirse en los campos correspondientes.

Una de las principales ventajas que tienen las rejilla sobre las cajas anidadas es que pueden crearse celdas que son flexibles tanto horizontal como verticalmente. Esto puede lograrse fijando el atributo flex tanto en el elemento row como en el elemento column correspondientes. El siguiente ejemplo lo demuestra:

Ejemplo

<grid flex="1">
 <columns>
  <column flex="5"/>
  <column/>
  <column/>
 </columns>
 <rows>
  <row flex="10">
    <button label="Cereza"/>
    <button label="Limón"/>
    <button label="Uva"/>
  </row>
  <row flex="1">
    <button label="Frutilla"/>
    <button label="Frambuesa"/>
    <button label="Durazno"/>
  </row>
 </rows>
</grid>

La primer columna y ambas filas fueron hechas flexibles, esto produce que cada celda de la primer columna sea flexible horizontalmente. Además, cada celda será flexible verticalmente porque ambas filas son flexibles, pero la primer fila es bastante más. La celda en la primer fila y columna (el botón "Cereza"?) será flexible horizontalmente por un factor de 5 y verticalmente por un factor de 10. La siguiente celda (Limón) sólo será flexible verticalmente. El atributo flex también fue añadido al elemento grid por lo que la rejilla completa será flexible, de lo contrario crecería en una sola dirección.

The flex attribute has also been added to the grid element so that the entire grid is flexible, otherwise it would only grow in one direction.

Column Spanning

There is no means of making a cell span a particular number of multiple columns or rows (See Discussion for a way of achieving the same effect). However, it is possible to make a row or column that spans the entire width or height of the grid. To do this, just add an element inside the rows element that isn't inside a row element. You can use a box type for example, and put other elements inside it if you want to use several elements. Here is a simple example:

Example

Código Ver en funcionamiento

<grid>
  <columns>
    <column flex="1"/>
    <column flex="1"/>
  </columns>

  <rows>
    <row>
      <label value="Northwest"/>
      <label value="Northeast"/>
    </row>
    <button label="Equator"/>
    <row>
      <label value="Southwest"/>
      <label value="Southeast"/>
    </row>
  </rows>
</grid>

The button will stretch to fit the entire width of the grid as it is not inside a grid row. You can use a similar technique to add an element in-between two columns. It would stretch to fit the height of the grid. You could also do both if that is desired.

(Siguiente) A continuación veremos características adicionales de las cajas de lista.

Categorías

links interwikis