Añadiendo más elementos

Concluiremos la discusión de cajas adicionando algunas al diálogo de encontrar archivos.

Añadiendo elementos al ejemplo de encontrar archivos

Vamos a agregar ahora algunos elementos al diálogo de encontrar archivos. Primero, vamos a adicionar la capacidad de búsqueda por otra información, tal como el tamaño y la fecha del archivo.

<hbox>
  <menulist id="searchtype">
    <menupopup>
      <menuitem label="Name"/>
      <menuitem label="Size"/>
      <menuitem label="Date Modified"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <menulist id="searchmode">
    <menupopup>
      <menuitem label="Is"/>
      <menuitem label="Is Not"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</hbox>

Dos cajas de listas desplegables son añadidas al diálogo. Un espaciador ha sido adicionado en medio de cada elemento para separarlos. Estos espaciadores han dado un ancho específico de 10 pixeles cada uno. Usted notará que si la ventana es redimensionada, la caja de texto crece pero los otros componentes no. Igualmente notará que la etiqueta fué removida.

Si usted redimensiona la ventana verticalmente, el elemento no cambia su tamaño. Esto es debido a que está dentro de cajas horizontales. Lo mas apropiado sería que los botones de Encontrar y Cancelar permanecieran siempre al fondo de la ventana. Esto es fácil de hacer agregando un espaciador en medio de las dos cajas horizontales.

<spacer style="height: 10px"/>
<hbox>
  <menulist id="searchtype">
    <menupopup>
      <menuitem label="Nombre"/>
      <menuitem label="Medida"/>
      <menuitem label="Fecha de modificación"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <menulist id="searchmode">
    <menupopup>
      <menuitem label="Es"/>
      <menuitem label="No es"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</hbox>

<spacer style="height: 10px" flex="1"/>

<hbox>

Ahora cuando el diálogo es redimensionado, los dos botones se moverán ya que estan siempre a lo largo del fondo del diálogo. El primer espaciador añade espacio extra en medio de la etiqueta del título y los elementos del criterio de búsqueda.

Se vería mejor si hubiera un borde al rededor de los criterios de búsqueda. Hay dos formas de hacer esto. Podemos utilizar la propiedad CSS border de CSS o podemos utilizar el elemento caja de grupo. Este primer método puede requerir que coloquemos el estilo en la caja como tal. Sin embargo, vamos a utilizar el último método. Un caja de grupo tiene la ventaja de que dibuja una caja con un bonito estilo biselado, adecuado para el tema actual.

Vamos a cambiar la caja dentro de un groupbox:

Aquí inserta texto sin formato <groupbox orient="horizontal">

  <caption label="Search Criteria"/>
  <menulist id="searchtype">
  .
  .
  .
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</groupbox>

Existen otros problemas cosméticos como tal. Podemos también tener que el groupbox crece de tal forma que se extiende verticalmente al final de la caja. También, podemos modificar algunos de los márgenes de tal forma que los elementos queden mejor posicionados.

Veremos más ejemplos del modelo de caja y algunos de sus rasgos a medida que continuemos agregando elementos durante el tutorial.

Ejemplo de encontrar archivos Código Ver en funcionamiento

Seguido, veremos como crear pilas.