FANDOM


Un sencillo ejemploEditar

Para comenzar a ver las posibilidades de XUL, nada mejor que un sencillo ejemplo:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<label value="¡Hola, mundo!" />
</window>

VentanasEditar

Además de cuadros de diálogo estándar, es posible crear ventanas, como en el siguiente ejemplo:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	id="prueba"
	title="Esto es una prueba"
	width="400"
	height="200"
	screenX="100"
	screenY="100"/>

EtiquetasEditar

Las etiquetas son un elemento pasivo pero realmente importante, puesto que proporcionan información vital sobre el funcionamiento de las etiquetas. XUL permite utilizarlas:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	id="prueba"
	title="Etiquetas"
	width="400"
	height="200"
	screenX="100"
	screenY="100">
	<label value="Soy una etiqueta"/>
</window>

Cuadros de textoEditar

Como no podía ser de otra forma, XUL permite utilizar cuadros de texto:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	id="prueba"
	title="Cuadros de texto"
	width="400"
	height="200"
	screenX="100"
	screenY="100">
	<label value="Cuadro de texto:"/>
	<textbox id="text1" value="Una sola línea."/>
	<label value="Más de una línea:"/>
	<textbox id="text1" multiline="true" rows="2"
		value="Más de una&#13;línea."/>
	<label value="Contraseña:"/>
	<textbox id="text1" type="password" value="contraseña"/>
</window>

Casillas de verificaciónEditar

Otro elemento imprescindible son las casillas de verificación:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	id="prueba"
	title="Casillas de verificación"
	width="400"
	height="200"
	screenX="100"
	screenY="100">
	<label value="Género:"/>
	<checkbox id="genero_drama" checked="true" label="Drama"/>
	<checkbox id="genero_comedia" label="Comedia"/>
	<checkbox id="genero_aventuras" label="Aventuras"/>
	<checkbox id="genero_romance" label="Romance"/>
	<checkbox id="genero_cifi" label="Ciencia ficción"/>
</window>

Botones de opciónEditar

XUL permite la creación de botones de opción de la siguiente forma:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	id="prueba"
	title="Botones de opción"
	width="400"
	height="200"
	screenX="100"
	screenY="100">
	<label value="Calificación:"/>
	<radiogroup>
		<radio id="calificacion_0" value="0"
			label="Lo peor"/>
		<radio id="calificacion_1" value="1"
			label="Mala"/>
		<radio id="calificacion_3" value="2"
			label="Regular"/>
		<radio id="calificacion_4" value="3" selected="true"
			label="Buena"/>
		<radio id="calificacion_5" value="4"
			label="Imprescindible"/>
		<radio id="calificacion_5" value="5"
			label="Obra maestra"/>
	</radiogroup>
</window>

BotonesEditar

Aunque aún no permiten realizar ninguna acción, el siguiente código sirve para crear un par de botones:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	id="prueba"
	title="Botones"
	width="400"
	height="200"
	screenX="100"
	screenY="100">
	<button id="aceptar" label="Aceptar"/>
	<button id="cancelar" default="true" label="Cancelar"/>
</window>

AccionesEditar

Vamos a enlazar el primer ejemplo que vimos con la creación de una acción que ocurra al pulsar un botón:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	id="prueba"
	title="Botones y acción"
	width="400"
	height="200"
	screenX="100"
	screenY="100">
	<script src="botones.js"/>
	<button id="aceptar" label="Aceptar"
		onclick="boton_aceptar()"/>
	<button id="cancelar" default="true" label="Cancelar"
		onclick="boton_cancelar()"/>
</window>

El código que se ejecutará al hacer clic en los botones es el siguiente:

function boton_aceptar()
{
	alert("Ha aceptado.");
}
 
function boton_cancelar()
{
	alert("Ha cancelado.");
}

Ejemplo terminadoEditar

El siguiente código se puede utilizar como base para crear una aplicación para la gestión de una base de datos de películas:

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	title="Nueva película">
	<script src="filmoteca.js"/>
	<vbox>
 
		<hbox>
 
			<groupbox>
				<caption label="Personal"/>
				<label value="Título:"/>
				<textbox id="titulo"/>
				<label value="Director:"/>
				<textbox id="director"/>
				<label value="Productor:"/>
				<textbox id="productor"/>
				<label value="Guionista:"/>
				<textbox id="guionista"/>
				<label value="Protagonista:"/>
				<textbox id="protagonista"/>
			</groupbox>
 
			<vbox>
				<label value="Género:"/>
				<checkbox id="genero_drama"
					checked="true" label="Drama"/>
				<checkbox id="genero_comedia"
					label="Comedia"/>
				<checkbox id="genero_aventuras"
					label="Aventuras"/>
				<checkbox id="genero_romance"
					label="Romance"/>
				<checkbox id="genero_cifi"
					label="Ciencia Ficción"/>
			</vbox>
 
			<vbox>
				<label value="Calificación:"/>
				<radiogroup>
					<radio id="calificacion_0"
						value="0"
						label="Lo peor"/>
					<radio id="calificacion_1"
						value="1"
						label="Mala"/>
					<radio id="calificacion_3"
						value="2"
						label="Regular"/>
					<radio id="calificacion_4"
						value="3"
						selected="true"
						label="Buena"/>
					<radio id="calificacion_5"
						value="4"
						label="Imprescindible"/>
					<radio id="calificacion_5"
						value="5"
						label="Obra maestra"/>
				</radiogroup>
			</vbox>
 
		</hbox>
		<hbox align="right">
			<button
				id="aceptar"
				label="Aceptar"
				default="false"
				onclick="boton_aceptar()"/>
 
			<button
				id="cancelar"
				label="Cancelar"
				default="true"/>
		</hbox>
</vbox>
</window>

También será necesario el siguiente código:

function boton_aceptar()
{
	var xXML = "";
	var sPrologo = "<?xml version=\"1.0\" encoding=\"iso-8859-15\"?>\n";
	var sPeliculaInicio = "<pelicula>\n";
	var sPeliculaCierre = "</pelicula>\n";
	var sTituloInicio = "<titulo>\n";
	var sTituloCierre = "</titulo>\n";
	var sTitulo = document.getElementById("titulo").value + "\n";
	sXML =
		sPrologo +
		sPeliculaInicio +
		sTituloInicio +
		sTitulo +
		sTituloCierre +
		sPeliculaCierre;
	alert(sXML);
}

Enlaces interesantesEditar

Puede que encuentres interesantes los siguientes enlaces relacionados con este capítulo:

El contenido de la comunidad está disponible bajo CC-BY-SA a menos que se indique lo contrario.