Leyendo acerca de las bondades del plugin Visual Web Pack para NetBeans, me he decido a desarrollar un pequeño ejemplo y publicar paso a paso mi experiencia.

El ejemplo consiste en una aplicación, una especie de pseudo-login (pues el usuario y password serán hardcodeados), pero la idea central es mostrar el uso de Visual Web JavaServer Faces en NetBeans.

Para empezar, en mi ejemplo utilicé NetBeans 6.1, aunque no es excluyente pues en el ejemplo original del cual me basé lo hacía NetBeans 5.5. Lo importante reside en tener instalado el plugin de NetBeans Visual Web JSF, puedes ver si lo tienes instalado o instalarlo o actualizarlo desde el menú la opción Plugins del menú Tools.

Ahora bien, manos a la obra:

  • Una vez abierto NetBeans, seleccionar la opción New Project del menú File. En el primer diálogo que se abre, seleccionar de la categoría Web el tipo de proyecto Web Application.
  • En el siguiente paso, ingresar el nombre del proyecto y dar Next:

  • Luego, nos solicita el Server. En mi caso, por default tenía seleccionado Apache Tomcat 6.0.16, me limité en dar Next.
  • En el último paso nos solicita el framework a utilizar, tildamos Visual Web JavaServer Faces y finalizamos:

  • Finalizado el asistente, veremos que nos crea unas cuantas carpetas en la estructura del proyecto y por defecto una página Page1.jsp. En la misma, en tiempo de diseño insertamos los elementos de las paleta y modificamos algunas propiedades desde el cuadro de Properties:
    • Un Label con un título
    • Un Text Field y un Password Field con los id textUsuario y textContraseña. En la propiedad label de ambos podemos ingresar Usuario y Contraseña, para que queden bien rotulados. Además, para ambos, tildaremos la propiedad required.
    • Un Button, del cual modificamos las propiedades id (con el valor buttonLogin) y text (con el texto Login)

  • Para finalizar la edición de la página principal, haciendo clic con el botón derecho sobre cada Text Field seleccionamos del menú contextual la opción Add Binding Attribute, para poder más adelante acceder desde el código a tales objetos.
  • Luego, haciendo clic derecho sobre cualquier área vacía de Page1.jsp seleccionamos la opción Page Navigation del menú contextual:

  • Inmediatamente se abrirá una nueva solapa faces-config.xml donde vemos ubicada una representación de la página con la que estuvimos trabajando, conteniendo la misma el objeto buttonLogin:

  • Haciendo clic derecho sobre el área de diseño, seleccionamos New File del menú contextual y luego de la categoría JavaServer Faces, Visual Web JSF Page:

  • Ahora veremos que junto a Page1.jsp aparece Page2.jsp (si es que dejamos el nombre por defecto propuesto por el asistente). Haciendo clic sobre buttonLogin de Page1.jsp y manteniendo apretado el botón izquierdo del mouse trazamos una línea hasta Page2.jsp. Veremos que se crea un enlace entre ambas páginas, haciendo doble clic sobre en enlace, cambiamos el nombre por defecto del mismo (case1) por success:

  • En Page2.jsp, insertamos un label con cualquier mensaje amistoso que indique que el login ha sido exitoso.
  • De la misma forma que creamos una página para el login exitoso (success) crearemos una nueva página (Page3.jsp) con un mensaje de "Nombre de usuario y/o contraseña incorrecta" y un hyperlink para volver:

  • Volviendo al esquema del faces-config.xml, creamos otro enlace desde el botón Login hacia Page3.jsp, cambiando el nombre por defecto (case1) por failure.

  • Para finalizar la configuración del esquema de navegación de páginas, creamos un nuevo enlace desde el elemento hyperlink1 (si es que no le cambiamos el id por defecto) de Page3.jsp con Page1.jsp. Además, si queremos podemos reorganizar un poco la distribución de las páginas:

  • Volviendo al diseño de la página de ingreso (Page1.jsp) hacemos doble clic sobre buttonLogin y escribimos la porción de código que valide usuario y contraseña. Como dijimos en un principio, los valores para los mismos estarán hardcodeados, nada de base de datos aun ;-)

public String buttonLogin_action() {
    if (textUsuario.getText().equals("demo") && textContraseña.getText().equals("demo")) {
        return "success";
    } else {
        return "failure";
    }
}

  • Para finalizar solo queda correr la aplicación, seleccionando la opción Run Main Project del menú Run, o simplemente presionando F6. Esto puede demorar un tiempo, dependiendo de tu equipo, pues NetBeans inicia el servidor de aplicaciones (Apache Tomcat en mi caso), hace el deployment de la aplicación y finalmente abre nuestro navegador por defecto con la página que diseñamos.
  • Con el navegador abierto y la página de login en frente, para probar de que sirvió setear la propiedad required del Text Field y el Password Field apretamos directamente el botón Login. Veremos como nos marca en rojo los campos requeridos y nos lo vuelve a solicitar:

  • Luego, ingresaremos usuario y contraseña, pero equivocando uno o ambos valores:

  • Finalmente, ingresamos usuario y contraseña correcta (demo demo):

Si sigues mis pasos, no deberías tener problemas, pues el ejemplo publicado no es más que el paso a paso de lo que yo hice en mi PC de desarrollo. De todas formas, ante cualquier duda o inconveniente, me comentas y vemos que se puede hacer. Para la próxima, nos meteremos con las bases de datos.

Basado en el demo NetBeans Visual Web Pack