Añadiendo más elementos

Hubo errores de script en esta página. Mientras los editores del sitio lo solucionan, puedes ver un contenido parcial debajo.

{{ Traducción("inglés", "XUL_Tutorial:Adding_More_Elements", "en") }}


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>
Image:boxfinal1.png

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>
Image:boxfinal2.png

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 {{ Xultu-sv("/findfile/findfile-boxfinal.xul") }}

Seguido, veremos como crear pilas.

{{ AnteriorSiguiente("Tutorial de XUL:Cajas de grupo", "Tutorial de XUL:Pilas y barajas") }}

{{ languages( { "en": "en/XUL_Tutorial/Adding_More_Elements", "fr": "fr/Tutoriel_XUL/Ajouter_plus_d\'\u00e9l\u00e9ments", "ja": "ja/XUL_Tutorial/Adding_More_Elements", "pl": "pl/Kurs_XUL/Dodawanie_innych_element\u00f3w" } ) }}

Etiquetas y colaboradores del documento

Colaboradores de esta página: Sheppy, Mgjbot, Sairgo, Nathymig
Última actualización por: Sairgo,