jQueryUI.Dialog como sustituto de alert y confirm

Un d√≠a m√°s, seguimos avanzando en el desarrollo de nuestras interfaces de usuario profesionales, maquet√°ndolas con el el framework Bootstrap. Y en esta ocasi√≥n, vamos a poner un √©nfasis especial en¬†las cajas de dialogos alert¬†y confirm, tan utillizados y socorridos en nuestros programas, bien para solicitar la confirmaci√≥n del usuario¬†en una acci√≥n del programa, o simplemente para informar al usuario que una tarea se ha realizado correctamente, o que ha producido un error… etc.

Como ya sabes, para llevar a cabo esas tareas¬†en las aplicaciones de escritorio, tenemos ¬†la funci√≥n¬†MsgBox, pero como es obvio, la tecnolog√≠a de los Windows Forms¬†es muy diferente a la de los Web Forms, por eso, tenemos que buscarnos la vida para materializar en estos √ļltimos, cajas de dialogo semejantes a MsgBox pero aptas para Internet.

Para hacerlo f√°cil, solo tenemos que hacer uso de las funciones alert y confirm de javascript, cuya funcionalidad est√° m√°s que implementada en todos los navegadores, pero claro, la est√©tica de estas simplonas cajas de dialogo no se puede decir que destaque por su dise√Īo. F√≠jate en el “confirm” del siguiente ejemplo en un navegador Google Chrome.

 

jQueryUI Autocomplete/Dialog y ASP.Net, maquetado con Bootstrap

 

¬ŅNo te gustar√≠a disponer de cajas de dialogo profesionales para tus programas, con su iconos y colores descriptivos en funci√≥n del mensaje que vayas a mostrar?

Pues no te preocupes, porque en este artículo verás como conseguirlo, y para ello nos valdremos de jQueryUI.Dialog. Podríamos utilizar otros plugins para materializar esta funcionalidad, incluso con objetos de servidor de la caja de herramientas del propio Visual Studio, pero finalmente nos hemos decantado por Dialog.

Ya en el post anterior “Env√≠o de correo electr√≥nico con ASP.NET mejorado”¬†empezamos a utilizar tambi√©n como apoyo al dise√Īo los framework jQuery y¬†jQueryUI, haciendo uso de sus plugins¬†jQueryUI.Autocomplete, y jQuery.MultipleFileSelection, y como nos result√≥¬†muy pr√°ctico para optimizar¬†nuestros dise√Īos, vamos a seguir¬†utilizando¬†jQueryUI, en el programa al que hace referencia este art√≠culo. En esta ocasi√≥n nos serviremos de jQueryUI.Autocomplete¬†(nuevamente)¬†y como dec√≠amos, pondremos¬†la puesta¬†en escena del plugin jQueryUI.Dialog.

¬ŅY porqu√© utilizar los widgets de jQuery, te preguntar√°s? Pues una sencilla raz√≥n: optimizar de forma exponencial¬†nuestros dise√Īos, dot√°ndoles de¬†extraordinaria¬†versatilidad con muy poquito trabajo. Osea, obteniendo¬†una relaci√≥n trabajo/rendimiento sin precedentes. Y si sumamos¬†la potencia de jQueryUI¬†y¬†Bootstrap, a los¬†desarrollos de nuestras aplicaciones ASP.NET, el resultado nunca puede decepcionar, te lo aseguro.

Vamos al asunto

Nuestro planteamiento para este post es, por un lado, materializar una funcionalidad que seguro te interesa y que consiste en distribuir el contenido de los ítem de un autocomplete en diferentes campos, una vez que se ha hecho la selección de dicho ítem. Por otro lado, queríamos utilizar las nuevas cajas de dialogo mejoradas con las funciones Confirmacion() y Alerta() utilizando el jQueryUI.Dialog.

Y para conseguir dicho propósito, hemos desarrollado una supuesta gestión de donativos a una O.N.G.

El programa, utiliza como fuente de datos una tabla a√Īadida a la B.D. SQL ‚ÄúNorthwind‚Äú ya utilizada en ejemplos anteriores. Esta tabla se denomina Donativos¬†y¬†consta, entre otros, de los siguientes campos: NIF (varchar, 9), nombre (varchar, 25), apellido1 (varchar, 25), apellido2 (varchar, 25) y donativo (smallmoney).¬†Evidentemente los datos contenidos en esta tabla se han rellenado¬†mediante un generador aleatorio, por lo tanto son ficticios.

El programa es muy simple. Consiste en seleccionar mediante el autocomplete ubicado en el textBox del NIF (punto 1), un donante registrado en la B.D. Una vez rellenos los textBox con los campos del donante elegido, el foco se situará en el textBox de cantidad a donar (punto 2).

jQueryUI Autocomplete, jQueryUI Dialog y ASP.Net, maquetado con Bootstrap

 

Cada¬†√≠tem¬†se compone de la¬†cadena: NIF + ” – ” + apellido1 + ” ” + apellido2 + “, ” + nombre. Al hacer clic sobre¬†un¬†√≠tem¬†de la lista, es decir, cuando se selecciona, se cargan en los textBox¬†correspondientes los valores de los campos del registro elegido. Para llevar a cabo esta funcionalidad, hemos desarrollado¬†un servicio web.

 

jQueryUI Autocomplete, jQueryUI Dialog y ASP.Net, maquetado con Bootstrap

 

autocomplete.jQueryUI:

 

WebService2.asmx:

 

Si te fijas en el código, construimos la clase Contacto con cinco propiedades, cuyos valores serán utilizados para rellenar los textBox correspondientes en la función buscaDonante() del autocomplete.

Bueno, hecho este par√©ntesis, seguimos con la descripci√≥n del programa…

Cuando el usuario hace clic¬†sobre el bot√≥n de “Ingresar Donativo“, se le pide la confirmaci√≥n¬†de la operaci√≥n que va a realizar (funci√≥n Confirmacion()) …

ASPNET_6_4
… Y si la confirmaci√≥n es¬†positiva, es decir, si se pulsa sobre el bot√≥n “SI”, se realizan¬†las validaciones necesarias y se informa¬†al usuario de cualquiera de los resultados posibles: de un error por problemas en la validaci√≥n, o de OK¬†si¬†se ha generado la grabaci√≥n correctamente (funci√≥n Alerta()).

 

ASPNET_6_5 ASPNET_6_6

Cajas de dialogo: confirm y alert

Como puedes ver, las cajas de dialogo que hemos desarrollado, se adaptan perfectamente a la misión a la que están encomendadas. Son modales y utilizan un icono descriptivo relacionado con su función, así como distintos colores para complementar dicha descripción:

  • Interrogaci√≥n: color naranja -> Confirmaci√≥n
  • warning: color en rojo -> Alerta de error
  • ok: color ¬†en verde -> Alerta de acci√≥n realizada
  • Info: color en azul -> Alerta informativa (En este ejemplo no empleamos¬†ninguna alerta info, pero a continuaci√≥n¬†ver√°s como utilizarla)

Los iconos utilizados forman parte de la galería glyphicon, de Bootstrap.

Adem√°s de su funcionalidad, puedes comprobar lo que gana est√©ticamente el dise√Īo de la interfaz al utilizar estas cajas de dialogo.

Función Confirmacion()

Como hemos dicho, esta funci√≥n viene a suplir a la confirm() cl√°sica de javascript. Recibe¬†3 par√°metros: titulo, texto y button. Este √ļltimo, hace referencia al asp:Button o asp:linkButton cuya acci√≥n se quiere confirmar. Esta caja de dialogo, dispone de un icono de interrogaci√≥n de color naranja y dos botones de “Si” y “No”. Cambiar estos botones por otros nombre, es tan f√°cil como cambiar el c√≥digo javascript de su funci√≥n:

 

Función Alerta()

Esta funci√≥n sustituye a la cl√°sica alert() de javascript. Al igual que la anterior funci√≥n, Alerta() recibe 3 par√°metros:¬†titulo, texto y tipo. En funci√≥n de √©ste √ļltimo, dispondr√° de un modelo¬†de icono, y bajo el contenido del mensaje, tendr√° un bot√≥n “Aceptar”. Igualmente, cambiar este bot√≥n por otro nombre (“OK”, “Vale”, “Entendido”…), es tan f√°cil como cambiar el c√≥digo javascript de su funci√≥n.

Los valores de tipo pueden ser: warning, info y ok, que como te habrás dado cuenta, coinciden con los nombres de los iconos de la galería glyphicon, de Bootstrap.

 

Pues una vez descrito el funcionamiento de este simple programa a modo de ejemplo para utilizar las nuevas cajas de dialogo y ver como se puede manipular una funci√≥n autocomplete para rellenar textbox en funci√≥n de los √≠tem seleccionados, pasamos a mostrarte la parte de dise√Īo del interfaz de usuario.

 

Y ahora vamos con la parte de código

Page_Load:

 

Cada vez que se carga la p√°gina, ponemos el foco en el textBox txtNIF para buscar un nuevo donante. Sin embargo, si al hacer un postback este textoBox tuviera alg√ļn valor, significa que no se ha llegado a producir la donaci√≥n, y ponemos el foco en el textBox txtDonativo para que el usuario complete la acci√≥n.

 

IngresarDonativo_Click:

 

F√≠jate que para¬†invocar a la funci√≥n Confirmacion(), lo hacemos en tiempo de dise√Īo con el par√°metro onclientclick del objeto de servidor¬†asp:LinkButton, donde le pasamos sus tres par√°metros: Titulo, Texto y el bot√≥n que hace la llamada.

onclientclick=”return Confirmacion(‘Gesti√≥n de donativos’, ‘¬ŅSeguro que quiere realizar el donativo?’, this);”¬†

 

Sin embargo, las llamadas a la función Alerta(), se hacen, como es lógico en tiempo de ejecución, a demanda de cualquier resultado que se quiera informar al usuario. Se invoca con el método RegisterStartupScript del control ScriptManager de la siguiente forma:

Script = “<script type=text/javascript>Alerta(‘Gesti√≥n de donativos’,’¬°El donativo ha sido registrado OK!’,’ok’);</script>”
ScriptManager.RegisterStartupScript(Me, GetType(Page), “”, Script, False)

Como ves, a la función Alerta() se le pasan los parámetros Título, Texto y Tipo de icono.

 

Bueno, pues esto es todo por hoy. Espero que te haya sido √ļtil este art√≠culo y como siempre, si quieres “toquetear” la demo, lo puedes hacer en¬†http://siinet.com/tutoriales/ejemplo6.aspx

¡Hasta la próxima!