Los cuadros de diálogo son diferentes en jQuery Mobile

Uno de los componentes de interfaz grafica de usuario más utilizado por los desarrolladores son, sin lugar a dudas, los cuadros de diálogo. Incluso sin importar el entorno en que se ejecute la aplicación, ya sea web, de escritorio o para dispositivos móviles, e independientemente del objetivo para el que está destinada.

Su importancia se debe a su capacidad de informar al usuario y de servir a la vez para tomar sencillas decisiones que afectan al flujo de la aplicación. Otro detalle importante es que la información de los cuadros de diálogo se trata de manera diferente a cualquier otro tipo de componente de interfaz grafica de usuario, pues siempre obligan a los usuarios a dar, al menos, una ojeada rápida a la información. Típicos cuadros de diálogo sirven para arrojar pistas de cómo trabajar con las aplicaciones, otros son advertencias y el más común es el de alerta.

Las alertas, o cualquier cuadro de dialogo que creemos en jQuery Mobile, se construye con una sencillez sorprendente. Además son altamente versátiles, ya que nos permiten hacer muchas cosas, y cuando digo que muchas es porque los diálogos parecen no tener límites, viajando mas allá de una simple alert, confirmDialog, o inputDialog.

La razón por la que un cuadro de dialogo en jQuery Mobile parece no tener límites es porque realmente son como una página web completa, ya sea de las múltiples en nuestro documento HTML o separada en un archivo aparte. Gracias al hecho de ser una página independiente, podremos hacer multitud de cosas como agregarle imágenes, crear formularios, anexarle botones, agregar videos, o todo lo que soporte una página web corriente. Con esto se puede entender el sin fin de aplicaciones y posibilidades que los cuadros de diálogo pueden tener en jQuery Mobile. Pero claro, tampoco podemos abusar de ellos, recordemos que aun siguen siendo cuadros de diálogo.

Convertir una página web en cuadro de dialogo

Para que una página se comporte como un cuadro de dialogo no debemos hacer nada sobre ella, sino que debemos construirla tal cual como se ha venido haciendo en todo el tutorial. Lo que hace que se convierta en un diálogo, es un atributo que se agrega en el enlace que nos lleva a la página. De modo que, la labor de presentar esa página como un diálogo, la realiza el propio framework y con una implementación muy simple. El vínculo también puede ser un botón, si lo preferimos antes que un enlace corriente. En cualquier caso nos llevará hacia la página que se comporta como caja de diálogo, ya esté dentro del mismo documento HTML o fuera de él.

El atributo en concreto que debemos colocar en los enlaces dirigidos a páginas que queremos que se comporten como cuadros de diálogo es data-rel="dialog". Luego veremos ejemplos completos, pero antes quiero aclarar un asunto que fue motivo de duda entre un grupo de personas a las que explicaba el funcionamiento de los diálogos en jQuery Mobile: ¿Qué hace diferente a un cuadro de diálogo de otro tipo de página, si solo es una página normal con un enlace al que hemos colocado un atributo especial?

Sí tiene diferencias y notables, comenzando por que las páginas que son cuadros de diálogos no se guardan en el historial del navegador, es decir, que no podremos regresar a ellas con el botón atrás y por tanto solo tendremos acceso si presionamos el enlace que nos lleva hasta la pagina. Otra diferencia es que el framework se encarga de poner en el header de la pagina un icono de cierre al dialogo. Otro detalle visual atractivo que se produce es que la interfaz gráfica del cuadro de diálogo aparece flotando, permaneciendo el documento anterior con el fondo oscuro.

Pero bien, ahora veamos un completo ejemplo de la creación de un primer cuadro de diálogo, a través de un código cuya sencillez se apreciará. Tendremos una página normal y en ella un botón, el cual abrirá el cuadro de dialogo, que será como una especia de alerta. Dicho botón se consigue con un HTML como el siguiente.

<a href="#dialogo" data-role="button" data-inline="true" data-rel="dialog" data-theme="b">Abrir dialogo</a>

Con un botón como el que creamos en el código anterior, ya estaríamos haciendo de la pagina con id "dialogo" un cuadro de diálogo. Sin embargo, también debemos crear un mecanismo de regreso ya que, a diferencia de las cajas de alerta convencionales que se crean con Javascript, éstos no permanecen en la página que los invoca. Debes tener en cuenta que cuando se va a un cuadro de diálogo se viaja a través del enlace a una nueva página, a pesar que jQuery Mobile produzca una visualización diferente.

Para regresar nuevamente a la pagina, podrimos agregar el siguiente código en la pagina con id de "dialogo".

<a href="#aja" data-role="button" data-rel="back">Aceptar</a>

Como se verse, en este caso también es un botón, con la diferencia que esta vez su atributo data-rel tiene el valor de "back". Con esto no tenemos la necesidad de asignar la dirección al enlace hacia la página inicial. Incluso si le damos una dirección diferente a la página de inicio, jQuery Mobile nos devolverá a la pagina que invocó el dialogo.

Asignar temas gráficos a las cajas de diálogo

Otra de las cosas que podemos hacer con los cuadros de diálogo es combinar sus temas, con lo que obtendremos variedad de tipos de alerta. Por ejemplo, podríamos poner el botón de un color, el encabezado de otro y el contenido de otro. Solo tendríamos que asignarle temas diferentes a cada uno de los objetos o elementos mencionados.

Para ver todo esto vamos a crear un segundo cuadro de dialogo, que será llamado a través de otro botón que construiremos con un HTML como este.

<a href="#dialogo2" data-role="button" data-inline="true" data-rel="dialog" data-theme="c">Abrir dialogo configurado</a>

Ya solo bastaría crear otra página web e identificarla como id="dialogo2", en esta podríamos por ejemplo hacer lo siguiente.

<div data-role="page" id="dialogo2">
<div data-role="header" data-theme="b"><h1>dialogo con colores configurados</h1></div>
   <div data-role="content" data-theme="a">
Este es un cuadro de dialogo configurado que esta dentro del mismo HTML del enlace
    <a href="#" data-role="button" data-theme="e" data-rel="back">Aceptar</a>
</div>

Como puedes observar solo tenemos que asignarle el atributo data-theme, con diferentes valores, sobre la etiqueta HTML que crea el objeto. De esa forma podemos obtener paginas y en este caso de cuadros de diálogo más variados en color.

Ejemplo completo de creación de cuadros de diálogo en jQuery Mobile

Pues bien solo nos resta atar cabos sueltos en el tema de los diálogos y para eso les dejo el código del ejemplo que hemos visto en este articulo.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Cuadros de dialogos con jQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="inicio">
<div data-role="header"><h1>Trabajando con dialogos</h1></div>
   <div data-role="content">
Presiona el boton para abrir un cuadro de dialogo
    <a href="#dialogo" data-role="button" data-inline="true" data-rel="dialog" data-theme="b">Abrir dialogo</a></br>
    Presiona el boton para abrir un cuadro de dialogo con colores configurados
    <a href="#dialogo2" data-role="button" data-inline="true" data-rel="dialog" data-theme="c">Abrir dialogo configurado</a>
   </div>
   <div data-role="footer"><h3>Cuadros de dialogos</h3></div>
</div>

<div data-role="page" id="dialogo">
<div data-role="header" ><h1>dialogo de ejemplo</h1></div>
   <div data-role="content">
Este es un cuadro de dialogo sencillo que esta dentro del mismo HTML del enlace
    <a href="#" data-role="button" data-rel="back">Aceptar</a>
   </div>
   </div>
   
   <div data-role="page"id="dialogo2">
<div data-role="header" data-theme="b"><h1>dialogo con colores configurados</h1></div>
   <div data-role="content" data-theme="a">
Este es un cuadro de dialogo configurado que esta dentro del mismo HTML del enlace
    <a href="#" data-role="button" data-theme="e" data-rel="back">Aceptar</a>
   </div>

</body>
</html>

Sera hasta una próxima, esperamos veros pronto y recuerda que puedes ver el ejemplo en funcionamiento en una página aparte.