Añadiendo etiquetas e imagenes

Esta sección describe un modo de añadir etiquetas e imágenes a una ventana. Además, veremos como incluir elementos en grupos.

Elementos de Texto

Usted no puede integrar el texto directamente en un archivo XUL sin etiquetas alrededor de ello y esperar que ello sea mostrado. El modo más básico de incluir el texto en una ventana es de usar el elemento de etiqueta. Muestran un ejemplo debajo:

Ejemplo

Código Ver en funcionamiento

<label value="This is some text"/>

El atributo de valor puede ser usado para especificar el texto que usted desea tener mostrado. El texto no se ajustará, de tal forma que el texto aparecerá sobre una sola línea. Esto es conveniente para las secciones cortas de texto.

Para el texto más largo, usted puede colocar el contenido dentro de etiquetas de descripción de apertura y cierre. A diferencia del texto especificado con el elemento de etiqueta y el atributo de valor, el texto hijo se ajustará en múltiples líneas si fuera necesario. Redimensione la ventana para ver lo ajustado. Como HTML, saltos de línea y espacios en blanco extras son colapsados en un solo espacio. Más adelante descubriremos como contraemos la anchura de elementos de modo que nosotros podamos ver la envoltura más fácilmente.

Ejemplo

Código Ver en funcionamiento

<description>
  This longer section of text is displayed.
</description>

Internamente, tanto el elemento de etiqueta como el elemento de descripción son lo mismo, lo cual significa que las etiquetas pueden tener texto ajustado si usted coloca el texto dentro de la ´etiqueta´, y las descripciones pueden tener un atributo de valor. El elemento de etiqueta es querido para las etiquetas de mandos, como campos de texto. El elemento de descripción esta prometido a otro texto descriptivo como el texto informativo en el tope de un cuadro de diálogo. Por convención, usted debería seguir esta pauta.

Usted puede usar el atributo de control para fijar cual etiqueta de control esta asociada. Cuando el usuario pulsa la etiqueta, ése control será enfocado. Ponga el valor del atributo de control al id del elemento que será enfocado.

Ejemplo

Código Ver en funcionamiento

<label value="Click here:" control="open-button"/>
<button id="open-button" label="Open"/>

En el ejemplo encima, pulsando la etiqueta hará que el botón sea enfocado.

Imágenes

Como HTML, XUL tiene un elemento para mostrar imágenes dentro de una ventana. Este elemento es adecuadamente llamado image. Note que el nombre de etiqueta es diferente que en HTML (image en vez de img). Usted puede usar el atributo de src para especificar el URL del archivo de imagen. El ejemplo debajo muestra esto:

<image src="images/banner.jpg"/>

Aunque usted pueda usar esta sintaxis, sería mejor usar una hoja de estilo para poner la URL de la imagen. En sesiones posteriores describiremos como usar hojas de estilo, pero un ejemplo se mostrá aqui para ampliar. Usted puede usar lista-estilo-imagen de la propiedad CSS para poner el URL para la imagen. Aquí están algunos ejemplos:

XUL:
 <image id="image1"/>
 <image id="search"/>

Style Sheet:
 #image1 {
   list-style-image: url("chrome://findfile/skin/banner.jpg");
 }

 #search {
   list-style-image: url("chrome://findfile/skin/images/search.jpg");
 }

Estas imágenes vienen desde dentro del directorio chrome, en el skin para el paquete findfile. Puesto que estas imágenes varían por el piel, usted debe usualmente poner una imagen en el directorio skin.

En la próxima sesión, aprenderemos como añadir algunos controles a una ventana.

Categorías

links interwikis