VW JSF :: Validar un campo de texto con AJAX y Dynamic Faces de forma transparente

Registrar a un usuario en un sitio Web con Visual Web JSF
Paso 6: Operativa

Vista - RegistroUsuario.jsp - Validar un campo de texto con AJAX y Dynamic Faces de forma transparente

En este paso vamos a ver cómo se realiza una llamada AJAX asíncrona al servidor cuando salimos del campo de texto Código Postal ya sea presionando la tecla tabulador o haciendo clic con el ratón en cualquier otro campo de texto del formulario.

aaaa

1 En este ejemplo, el usuario abandona la escritura de su correo electrónico y desplaza el foco al campo de texto Nombre
- 1.1 Si el atributo autoValidate de la etiqueta <webuijsf:textField> tiene valor verdadero, entonces el navegador realiza una llamada AJAX asíncrona al servidor para que valide la dirección de correo electrónico
  - de esta forma damos un paso hacia adelante en la consecución de aplicaciones Web RIA (Rich Internet Applications)
    - el objetivo de una aplicación RIA es el de crear aplicaciones Web que tengan interacciones con los usuarios como si se trataran de aplicaciones de escritorio (en el caso de Java, aplicaciones realizadas con Swing)
      - es decir, las llamadas realizadas con el motor de AJAX evitan tener que cargar páginas Web cada vez que se tiene que actualizar una página

Cuando el foco pasa del campo de texto E-mail al campo de texto Nombre, el fondo del campo de texto E-mail se muestra con un color rosado para indicar que la dirección del correo electrónico no es correcta.

aaaa

Lo mismo sucede si el atributo required de la etiqueta <webuijsf:textField> tiene valor verdadero

aaaa

Para poner el atributo autoValidate de la etiqueta <webuijsf:textField> a valor verdadero con el IDE Netbeans, vamos a seleccionar la casilla de verificación autoValidate de las propiedades del componente en cuestión.

aaaa

Esta es la página JSP RegistroUsuario.jsp con el atributo autovalidate

<?xml version="1.0" encoding="UTF-8"?>

<jsp:root
..
>
<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
  ..
     <webuijsf:form id="form1">
      ..
    <webuijsf:label for="email" id="lblEmail"
                      style="left: 28px; top: 140px; position: absolute"                       text="#{mensajes.literal_email}"/>
      <webuijsf:textField autoValidate="true" columns="46" id="email" required="true"                       style="left: 28px; top: 160px; position: absolute"                       validatorExpression="#{RegistroUsuario.email_validate}"/>
      <webuijsf:message for="email" id="msgEmail" showDetail="false" showSummary="true"                       style="left: 28px; top: 183px; position: absolute"
      />
     </webuijsf:form>
    </webuijsf:body>
   </webuijsf:html>
  </webuijsf:page>
</f:view>
</jsp:root>

Cuando hacemos clic sobre el botón , podemos ver que aparece el mensaje Campo obligatorio, la etiqueta E-mail se muestra con color rojo y el fondo del campo de texto es de color rosado. Por el contrario, la llamada que ha realizado el motor de AJAX sólamente nos muestra el fondo del campo de texto en color rosado.

Para conseguir el mismo efecto podemos obtener pistas en el apartado Example 4: Auto-Validation with notify de la documentación de la API correspondiente al componente textField de Woodstock o esperar a nuevas versiones de Woodstock que añadan esta funcionalidad de forma transparente.

Ignasi Pérez Valls
Infosintesis Solutions Group

Junio 2009

Fundamentos Spring

JavaDabbaDoo.org
Tu comunidad Java parlante. Cursos abiertos, tutoriales y mucho mucho más ...


	Implementar MVC - VW JSF
Inicio \| Cursos infosintesis.net liberados \| Java EE \| Registrar a un usuario en un sitio Web con Visual Web JSF