Crea una interfaz similar a Windows con jQuery UI

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

¿Alguna vez has querido crear una interfaz de usuario interactiva para tu aplicación, pero no sabías cómo hacerlo? En este tutorial, crearemos una interfaz similar a Windows de forma rápida y sencilla, al ponernos manos a la obra con jQuery UI, una biblioteca de interfaz de usuario construida sobre jQuery.

¿Qué es exactamente jQuery UI?

jQuery UI proporciona abstracciones para interacción y animación de bajo nivel, efectos avanzados y widgets temáticos de alto nivel.

jQuery UI siempre ha sido una gran herramienta en el kit de cualquier desarrollador de front-end. Tiene muchos widgets y efectos diferentes que se han diseñado maravillosamente para que funcionen con la mayoría de los navegadores. ¿Quieres una forma rápida de crear una interfaz con pestañas? ¡jQuery UI los tiene! ¿Quieres crear un cuadro de diálogo modal? ¡También los tiene!

En este tutorial, aprenderemos cómo utilizar jQuery UI para crear una interfaz de usuario altamente funcional sin usar nada más. Al final, deberías estar familiarizado con la interfaz de usuario de jQuery, algunos de sus componentes y la comprensión básica de la personalización de la interfaz de usuario de jQuery. En última instancia, crearemos una interfaz de usuario similar a Windows, con cuadros de diálogo que se pueden arrastrar, cambiar de tamaño, minimizar y maximizar.

Nota: Si realmente deseas personalizar todos los rincones del tema de la interfaz de usuario de jQuery, debes consultar este tutorial titulado "Una guía masiva para los widgets de la interfaz de usuario de jQuery de temas personalizados". Es un tutorial solo para Premium, pero te garantizo que vale la pena comprarlo.

Nuestro objetivo: crear cuadros de diálogo similares a ventanas que se puedan arrastrar, redimensionar, minimizar y maximizar, que podamos implementar para diferentes tipos de aplicaciones.

windows-like interface example from Aralista!

¡Ejemplo de interfaz similar a Windows de Aralista!

Imagen cortesía de http://aralista.com

Paso 1: Configuración

Para comenzar, descarga la biblioteca jQuery UI de su sitio, http://jqueryui.com. Una vez que visites el sitio, verás múltiples opciones para "personalizar" tu descarga de jQuery UI.

La página de descarga de jQuery UI

Para los propósitos de nuestro tutorial, asegúrate de que todos los componentes estén seleccionados. Para el tema, selecciona el tema Flick. Verifica que también selecciones la versión 1.8.16, ya que la página de descarga de jQuery UI proporciona una versión heredada para versiones anteriores de jQuery.

La descarga de la interfaz de usuario de jQuery también debería venir con la versión 1.6.2 de la biblioteca jQuery. Si estás usando una versión más actual de jQuery, deberías usarla en su lugar. Esta es solo la versión mínima de jQuery que necesita jQuery UI.

Extrae la descarga en la carpeta pública de tu proyecto. La descarga sugiere una estructura para los recursos de tu sitio:

Suggested file-structure for your site resources

Estructura de archivo sugerida para los recursos de tu sitio

una carpeta js para tus archivos JavaScript (jQuery UI y jQuery)
una carpeta css para tus archivos CSS (jQuery UI theme CSS)

Siéntete libre de cambiar esto para que se adapte a tus necesidades, aunque en mi experiencia, esta es una excelente manera de organizar los recursos de tu sitio.

Después de extraer tus archivos, crea un archivo index.html que contendrá el HTML de nuestra página. El contenido del archivo HTML debe ser el siguiente:

<!DOCTYPE html>
<html>
	<head>
               <meta charset="utf-8">
		<title>Creating a windows-like interface with jQuery UI</title>
		<!-- Load the jQuery UI CSS -->
		<link rel="stylesheet" href="css/flick/jquery-ui-1.8.16.custom.css" type="text/css" />
		
		<!-- Load jQuery first before jQuery UI! -->
		<script src="js/jquery-1.6.2.min.js"></script>
		<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
	</head>
	<body>
	</body>
</html>

Paso 2: crea el HTML para nuestras ventanas `Dialog`

Ahora, comencemos creando el HTML para nuestras ventanas Dialog. De acuerdo con la página de documentación de Dialog en el sitio de jQuery UI, el HTML de un cuadro Dialog es simplemente un <div>. Cualquier otro HTML dentro de <div> se convierte en el contenido del cuadro de diálogo. Sabiendo eso, crea una ventana de cuadro Dialog simple y ábrela usando jQuery UI.

Copia el siguiente código en el <body> del archivo HTML:

1	<div id="dialog_window_1" class="dialog_window" title="This is our first dialog window">
2	<p>Hello World!</p>
3	</div>

Luego, inicia el cuadro Dialog ejecutando este JavaScript. Copia el siguiente código dentro del <head> del archivo HTML:

<script>
	$(document).ready(function() {
		$('#dialog_window_1').dialog();
	});
</script>

Una vez que actualices la página, deberías ver algo como esto:

Hola Mundo!

Se puede inicializar un cuadro Dialog simplemente llamando a la función $(element_id).dialog(). Y como puedes ver, nuestro contenido dentro del <div> se convertirá en contenido para el cuadro de diálogo.

Ahora, crea un formulario simple para crear nuevos cuadros Dialog dentro del Dialog Box. Reemplaza el código Hello World! dentro de nuestro cuadro Dialog inicial con lo siguiente:

<h3>Create a new <code>Dialog</code> Window</h3>
<table class="dialog_form">
	<tr>
		<th>window Title</th>
	</tr>
	<tr>
		<td><input type="text" id="new_window_title" /></td>
	</tr>
	<tr>
		<th>
			window Content
		</th>
	</tr>
	<tr>
		<td>
			<textarea id="new_window_content"></textarea>
		</td>
	</tr>
	<tr>
		<th>
			window Buttons
		</th>
	</tr>
	<tr>
		<td id="buttonlist">
			<input type="checkbox" id="alertbutton" /><label for="alertbutton">ALERT</label>
			<input type="checkbox" id="closebutton" /><label for="closebutton">CLOSE</label>
			<input type="checkbox" id="clonebutton" /><label for="clonebutton">CLONE</label>
		</td>
	</tr>
</table>

Cuando actualices la página, debería verse así:

Se ve un poco feo en este momento, pero no te preocupes, agregaremos algunas personalizaciones a la ventana Dialog para que se vea mejor

Paso 3: Personalizar nuestras ventanas `Dialog` a través de opciones de `Dialog` y CSS

Nuestro cuadro Dialog actualmente no se ve muy bien, pero podremos personalizarlo proporcionando algunas opciones de inicialización para nuestro código de inicialización de Dialog y, por supuesto, algo de CSS.

Reemplacemos nuestro código de inicialización con lo siguiente:

1	$('#dialog_window_1').dialog({
2	width: 'auto',
3	height: 'auto'
4	});

Agreguemos también algo de CSS en el <head> de nuestro HTML:

<style>
.dialog_form th {
	text-align: left;
}

.dialog_form textarea, .dialog_form input[type=text] {
	width: 320px;
}
</style>

¡Mucho mejor!

Analicemos algunas de las opciones que usamos en nuestro código de inicialización:

width - esta opción te permite establecer un ancho específico para tu cuadro Dialog. También puedes configurarlo en 'auto' para permitir que jQuery UI establezca el ancho dinámicamente
height - hace prácticamente lo mismo que la opción width, pero lo hace para la altura del cuadro Dialog en lugar de el ancho

Hay muchas más opciones para el cuadro Dialog, pero la mayoría se ocupa del comportamiento del cuadro Dialog. Veremos algunos de estos en los pasos posteriores del tutorial.

Ahora que tenemos un cuadro Dialog atractivo con un formulario dentro, ¡agreguemos algunos Buttons a nuestro cuadro Dialog para que haga algo!

Paso 4: agregar un `Button` para abrir nuestra ventana `Dialog`

Una de las mejores cosas de jQuery UI es su modularidad. Por ejemplo, el cuadro Dialog también utiliza otros componentes de la interfaz de usuario de jQuery, como Draggable, Resizable y, lo que es más importante, el componente Button.

Ejemplo de botón de la documentación de jQuery UI

El componente Button nos permite crear botones con funciones personalizadas al hacer clic. Y al mismo tiempo, se corresponde con el tema que instalamos con jQuery UI, por lo que cambiar el tema también cambiará el aspecto del botón, manteniendo el diseño uniforme en todo el sitio.

Para empezar, crea un Button para abrir y cerrar nuestro cuadro Dialog. Agrega esto al <body> del HTML:

1	<button id="create_button">Create a new window</button>

E inicialízalo agregando esto a la función $(document).ready():

1	$('#create_button').button();

Genial botón hermano

Como estamos haciendo cosas con botones, convierte nuestras checkboxes en botones también para que se vean mejor. El componente jQuery UI Button también te permite recrear un conjunto de casillas de verificación o botones de opción en un Buttonset. Para hacerlo, simplemente copia el siguiente código en el bloque de JavaScript:

1	$('#buttonlist').buttonset();

Ahora, actualiza la página para ver las nuevas casillas de verificación bonitas:

Ahora que el cuadro Dialog y el Button se muestran bien, podemos cambiar su comportamiento para que el Button abra y cierre el Dialog. Para hacerlo, actualiza el bloque de JavaScript para que se vea así:

$(document).ready(function() {
	//initialize the button and add a click function to our button so that it"ll open the window
	$("#create_button").button().click(function() {
		var create_dialog = $("#dialog_window_1");
		var create_button = $(this);
		
		//if the window is already open, then close it and replace the label of the button
		if( create_dialog.dialog("isOpen") ) {
			create_button.button("option", "label", "Create a new window");
			create_dialog.dialog("close");
		} else {
			//otherwise, open the window and replace the label again
			create_button.button("option", "label", "Close window");
			create_dialog.dialog("open");
		}
	});
	
	//open our dialog window, but set autoOpen to false so it doesn"t automatically open when initialized
	$("#dialog_window_1").dialog({
		width: "auto",
		height: "auto",
		autoOpen : false
	});
	
	//initialize our buttonset so our checkboxes are changed
	$("#buttonlist").buttonset();
});

Repasemos el código línea por línea:

Hemos agregado una función de click a nuestro Button que abre el cuadro Dialog cada vez que hacemos clic en él.
Además, usamos el método $(dialog_id).dialog('isOpen'), que devuelve true si nuestro Dialog ya está abierto y false si no.
Si Dialog está cerrado, abrimos la ventana Dialog llamando al método $(dialog_id).dialog('open'), y cambiamos la label del Button a "Close window" usando el método $(button_id) .button ('option') .
Si ya está abierto, hacemos lo contrario usando el mismo método Option en Button y el método $(dialog_id).dialog('close') para cerrar el cuadro Dialog.
También hemos aprovechado otra opción de Dialog, que se llama autoOpen. Cuando se establece en verdadero, permite que la ventana Dialog se abra automáticamente cuando se inicializa. De lo contrario, la ventana Dialog solo se puede abrir llamando al método $(dialog_id).dialog('open'), que es lo que hace el botón.

Botones funcionales y casillas de verificación hermano

Paso 5: agregar funcionalidad a nuestra ventana `Dialog`

Ahora que la ventana Dialog está en funcionamiento, agreguemos la funcionalidad para crear nuevas ventanas Dialog. En primer lugar, agrega algunos botones a nuestro Dialog. Afortunadamente, jQuery UI tiene la funcionalidad de agregar botones a cualquier cuadro Dialog y personalizar lo que hacen cuando se hace clic en ellos. Para hacerlo, modifica el código de inicialización agregando un parámetro buttons:

$('#dialog_window_1').dialog({
	width: 'auto',
	height: 'auto',
	autoOpen : false,
	buttons: [
		{
			text: 'Create',
			click: function() {
				alert('Yay, clicked the button!');
			}
		}
	]
});

Como puedes ver en el código de muestra, agregamos el botón "Create" simplemente agregando una opción buttons al código de inicialización. La opción button es una matriz de objetos JSON en el siguiente formato:

{
	text: 'Name of your button',
	click: function () {
		//Add stuff here to do when the button is clicked
	}
}

Para agregar más botones, simplemente puedes agregar más objetos JSON en el mismo formato a la matriz buttons. Cuando actualices la página, debería verse así:

¡Yupi, hiciste clic en el botón!

Ahora agregaremos algunas funciones a nuestro botón. Elimina la linea alert('Yay, clicked the button!'); y reemplázala con lo siguiente:

//get the total number of existing dialog windows plus one (1)
var div_count = $('.dialog_window').length + 1;

//generate a unique id based on the total number
var div_id = 'dialog_window_' + div_count;

//get the title of the new window from our form, as well as the content
var div_title = $('#new_window_title').val();
var div_content = $('#new_window_content').val();

//generate a buttons array based on which ones of our checkboxes are checked
var buttons = new Array();
if( $('#alertbutton').is(':checked') ) {
	buttons.push({
		text: 'ALERT',
		click: function() {
			alert('ALERTING from Dialog Widnow: ' + div_title);
		}
	});
}

if( $('#closebutton').is(':checked') ) {
	buttons.push({
		text: 'CLOSE',
		click: function() {
			$('#' + div_id).dialog('close');
		}
	});
}

//append the dialog window HTML to the body
$('body').append('<div class="dialog_window" id="' + div_id + '">' + div_content + '</div>');

//initialize our new dialog
var dialog = $('#' + div_id).dialog({
	width: 'auto',
	height: 'auto',
	title : div_title,
	autoOpen : true,
	buttons: buttons
});

Aquí hay un paso a paso del código que acabamos de agregar arriba:

Primero, obtén el número total de ventanas Dialog en el sitio.
A partir de esto, genera una nueva id que se utilizará para la nueva ventana Dialog.
Obtén el window Title y los valores del window Content del formulario “Create a new Dialog window”.
Comprueba si las casillas de verificación ALERT y CLOSE están marcadas. Si es así, crea un objeto JSON, siguiendo el formato button de arriba, y empújalo en una matriz buttons.
Genera y agrega el HTML de la ventana Dialog dentro de la etiqueta <body> de la página
Por último, inicializa la nueva ventana Dialog utilizando el código de inicialización como el que se utilizó en la ventana Dialog original.

Juega con él y prueba diferentes combinaciones de botones. Aquí hay una captura de pantalla con todas las combinaciones posibles:

Lorem ipsum dolor sit amet

Ahora que podemos crear varias ventanas, ¡agreguemos algunas funciones de minimizar y maximizar!

Paso 6: Hacer que las ventanas `Dialog` sean "Minimizables" y "Maximizables"

Desafortunadamente, jQuery UI no tiene métodos integrados de minimize y maximize, pero podemos agregarlo fácilmente anulando algunas cosas en el proceso de inicialización del prototipo de jQuery UI Dialog. Esencialmente, vamos a agregar un código posterior a la inicialización que creará automáticamente un "estado minimizado", agregará un ícono de minimizar para las ventanas Dialog, así como una función que "maximiza" la ventana minimizada cuando el estado minimizado sea clickeado.

Comencemos agregando el CSS para diseñar los botones y el estado minimizado:

#dialog_window_minimized_container {
	position: fixed;
	bottom: 0px;
	left: 0px;
}

.dialog_window_minimized {
	float: left;
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
	margin-right: 2px;
	display: none;
}

.dialog_window_minimized .ui-icon {
	display: inline-block !important;
	position: relative;
	top: 3px;
	cursor: pointer;
}

.ui-dialog .ui-dialog-titlebar-minimize {
	height: 18px;
	width: 19px;
	padding: 1px;
	position: absolute;
	right: 23px;
	top: 9px;
}

.ui-dialog .ui-dialog-titlebar-minimize .ui-icon {
	display: block;
	margin: 1px;
}

.ui-dialog .ui-dialog-titlebar-minimize:hover, .ui-dialog .ui-dialog-titlebar-minimize:focus {
	padding: 0;
}

También necesitaremos agregar un contenedor de "estado minimizado", donde agregaremos todas las ventanas minimizadas. Agrega esto dentro de la etiqueta <body> :

1	<div id="dialog_window_minimized_container"></div>

Ahora, agrega este bloque de código JavaScript después del lugar donde se carga la biblioteca jQuery UI. Esto es importante ya que no funcionará si es antes de que se cargue la biblioteca.

<script>
var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
	//Run the original initialization code
	_init.apply(this, arguments);
	
	//set some variables for use later
	var dialog_element = this;
	var dialog_id = this.uiDialogTitlebar.next().attr('id');
	
	//append our minimize icon
	this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id + 
	'-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">'+
	'<span class="ui-icon ui-icon-minusthick"></span></a>');
	
	//append our minimized state
	$('#dialog_window_minimized_container').append(
		'<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' + 
		dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + 
		'<span class="ui-icon ui-icon-newwin"></div>');
	
	//create a hover event for the minimize button so that it looks good
	$('#' + dialog_id + '-minbutton').hover(function() {
		$(this).addClass('ui-state-hover');
	}, function() {
		$(this).removeClass('ui-state-hover');
	}).click(function() {
		//add a click event as well to do our "minimalization" of the window
		dialog_element.close();
		$('#' + dialog_id + '_minimized').show();
	});
	
	//create another click event that maximizes our minimized window
	$('#' + dialog_id + '_minimized').click(function() {
		$(this).hide();
		dialog_element.open();
	});
};
</script>

Esto es lo que hace este código:

Deja que el código de inicialización Dialog de la jQuery UI original se ejecute a través de _init.apply(this, arguments);
Utiliza Append para agregar el icono de minimizar a la barra de título del cuadro Dialog
Escribe Append para agregar el HTML de estado minimizado dentro del <div> #dialog_window_minimized_container
Escribe hover para agregar un evento de desplazamiento al ícono de minimizar para que obtenga la clase ui-state-hover cuando se pasa el mouse sobre él, lo que agregará el efecto de "cambio de color de fondo" que vemos.
Cree un evento de clic para él que cierre la ventana Dialog y muestre el estado minimizado
Finalmente, cree otro evento de clic para el estado minimizado que se oculta y vuelve a abrir la ventana Dialog.

¡Y ahora, nuestra interfaz similar a Windows está completa!

interfaz similar a Windows, ¡hurra!

Conclusión

En este artículo, hemos demostrado lo fácil que es crear una interfaz de usuario hermosa y altamente funcional usando nada más que jQuery y jQuery UI. A estas alturas, ya deberías saber cómo:

Descargar y configurar la biblioteca jQuery UI para tu proyecto
Utilizar el componente Dialog, Button y Buttonset de jQuery UI.
Crear cuadros Dialog de forma estática y dinámica utilizando información de cualquier fuente
Crear dinámicamente diferentes Dialog Buttons con cada nuevo cuadro Dialog.
Agregar funcionalidad personalizada al Dialog de la jQuery UI, p. Ej. función de minimizar y maximizar.
Personalizar el proceso de inicialización de jQuery UI

Vale la pena tomar nota de que hay muchos más componentes que puedes aprovechar a través de jQuery UI. Definitivamente es una excelente manera de crear interfaces de usuario increíbles de forma rápida y sencilla. Con suerte, este artículo te ha demostrado que jQuery UI es una herramienta esencial en el conjunto de herramientas de cualquier desarrollador.

¿Has usado jQuery UI en el pasado o planeas usarlo para un proyecto futuro? ¡Háznos saber en los comentarios a continuación y muchas gracias por leer!

Crea una interfaz similar a Windows con jQuery UI

¿Qué es exactamente jQuery UI?

Paso 1: Configuración

Paso 2: crea el HTML para nuestras ventanas Dialog

Paso 3: Personalizar nuestras ventanas Dialog a través de opciones de Dialog y CSS

Paso 4: agregar un Button para abrir nuestra ventana Dialog

Paso 5: agregar funcionalidad a nuestra ventana Dialog

Paso 6: Hacer que las ventanas Dialog sean "Minimizables" y "Maximizables"