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";
}
}
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
Arturo
mayo 13, 2010
yo tengo un problema, me dejaron de trabajo sacar un calculo sobre el precio de un producto, añadir sus accesorios, pagar al credito o contado, si es al credito tres tipos de uotas, 6 meses, 12 y 18, con interes del 5, 6 y 7% respetivamente, sacar igv, monto de la cuota, costo total, etc, no puedo resolverlo, alguien me puede orientar.
David Ribera
mayo 31, 2010
Saludos a todos. tengo un problemita soy nuevo en esto. Estoy netbeans 5.5.1 con VisualWeb(entorno grafico), estoy utilizando DropDownList los carga perfectamente pero al recuperar los datos me recupera bien en un ResulSet y de ahi quiero hacer q se seleccione el dato que se guardo en base de datos (SQLServer2008) si alguien tiene un ejemplo se lo agradecere gracias.
edwin
junio 15, 2010
ola a todos … por favor kisiera ke me digan de donde consigo el plugin para instalar el visual web javasever faces … o si alguien lo tiene pueda mandarmelo a mi correo
Geovanny
junio 30, 2010
Hola, muy bueno el tutorial, felicitaciones, mi preguanta es:
¿Donde puedo descargar el framework Visual Web Java Server Faces para netbeans 6.8 o 6.9?
De nuevo gracias y espero su respueta
andres
agosto 17, 2010
muy buen tutorial pero tengo una duda ennb 6.9 ya viene incorporado el JavaServer Faces???? ode donde lo puedo descargar
jair
agosto 23, 2010
te felicito por el manual pero si puediras poner el codigo seria mejor aparte mi netbeans no tiene el tomcat solo glashfish servira =
jaipuig
septiembre 10, 2010
Creo que este framework venia con NetBeans hasta la versión 6.5 o por ahí.
Para versiones superiores de Netbeans se puede descargar de aquí:
http://netbeans.org/downloads/zip.html
jhamer
septiembre 14, 2010
buenas tardes , me podrian ayudar porfavor , quiero desarrollar un software de facturacion o cualquier otro , el problema es qu no se donde comenzar me podrian ayudar porfavor
pam
octubre 25, 2010
como hacer un servlet
Henry J. Pulgar.
octubre 29, 2010
Sencillo y bien explicado el tutorial. !!. Ahora bien?, si esta a tu alcance o posees experiencia pudieses explicarme como ejecutar esta V JSF JSP en una intranet utilizando Apache Tomcat ?.
SALUDOS!.
juan
noviembre 11, 2010
CONEXION A BASE DE DATOS
MYSQL
POSTGRES
ORACLE
Ivan Rodriguez
abril 7, 2011
Hola tengo un problema en el codigo
if (textUsuario.getText().equals(“demo”) && textContraseña.getText().equals(“demo”))
me aparecen subrayados con rojo y can’t not symbol textUsuario que puedo hacer
Ivan Rodriguez
abril 7, 2011
Creo que ya lo resolví mi problema gracias era cuestión de hacer click derecho sobre el control Add Binding Attribute. si tienen el mismo problema que yo aqui esta la solucion
Lucero
abril 27, 2011
hola excelente tutorial, solo que es muy pequeño, me gustaria ver un ejemplo con BD en Mysql, y con las librerias que se requieren asi como las validaciones de contraseñas para validar usuarios! alguien sabe donde puedo encontrar esto???…
Jose
junio 27, 2011
¿Sabran donde puedo encontrar el Visual Web JSF para NetBeans 7.0?
cristhiandante
julio 9, 2011
hola jose yo trabajo con el netbeans 6.9.1 y el apache tomcat 6.0.32
ahi te lo explico todo
http://cristhiandante.blogspot.com/2011/06/introduccion-java.html
Diego Adrian
agosto 19, 2011
Ivan Rodriguez, weon muchas gracias por ese comentario de Add Binding Properties, si no lo ponias, iba a seguir con esta basura, ya iba 1 dia y no entendia xq mi experimento de visual JSF no salia, gracias, me has ayudado bastante, te lo agradezco !!
RICARDO
septiembre 20, 2011
TENGO UN PROBLEMA NESESITO UN PROGRMA EN NETBEANS QUE PONGAS EL NOMBRE DE UN COLOR EN UN CUADRO DE TEXTE Y LO AGREGUE A UN LISTBOX Y UNA VES QUE ESTE EN EL LIST BOX CUANDO SE LESECCIONE MUESTRE EL COLOR SELECCIONADO EN UNA CAJA DE TEXTO
esneider
octubre 7, 2011
hola a todos, estoy usando la version 7.1 de netbeans y resulta que cuando creo un proyecto web nuevo siguiendo los pasos del tuto no me sale la paleta para diseñar solo me permite es por medio de codigo.. alguien le ha pasado lo mismo o me puede decir como mostrarla.
saludos
Emmanuel
febrero 21, 2012
En la Version 7.1 no tiene el Framework asi que mejor me baje la version 6.1!
Me gustaria si pones ejemplos ya manejando Bases de Datos! que es lo que me interesaria!
Saludos