http://www.jdeveloperla.com/joomla/index.php?

option=com_content&task=view&id=85&Itemid=48

Principal | Objetivos | Artículos | Cursos | Foro | Contáctenos | Sitios Amigos | Servicios | Eventos | Entrevistas | Colaboradores

Bienvenido
Nombre de usuario
Encuesta
¿Ya está utilizando JSF o
Contraseña
ADF Faces en sus
proyectos ?
SI
Iniciar sesión j
k
l
m
n
Olvidó su contraseña? n No, todavia uso JSP puro.
j
k
l
m
No, todavia uso JSP con
Nuevo usuario? j Struts.
k
l
m
n
Regístrese aquí
JSF - n No, todavia uso JSP, Struts,
j
k
l
m
JSTL y Binding.
Creando
un login Votar Resultados

Escrito por Elmer Kristopher Zapata Ramírez

miércoles, 13 julio 2005

Ultimos Artículos
Contenido
INTRODUCCION JSF - Lifecycle
OBJETIVO
JSF - Jerarquia Tree
REQUISITOS
MANOS A LA OBRA JSF - Internacionalización
PASO 1 - Creación del Proyecto ProyectoWeb, Jdeveloper y
PASO 2 - Creación de las Páginas Web JasperReport
JSF - C R E A N D O U N L O G I N
PASO 3 - Configuración del faces-config.xml
PASO 4 - Creación del Bean (UsuarioLoginBean) Componente Tree de UIX
PASO 5 - Creación de las Páginas Webs
Proyecto Web - Parte II (Business
Ejecución de la Aplicación Layer)
CONCLUSIONES
ACERCA DEL AUTOR
Artículos Destacados
● Curso de ADF BC, JSP, Struts con
Jdeveloper 10.1.2
INTRODUCCION ● ProyectoWeb, JDeveloper y
La tecnología Java Server Faces (JSF) es un marco de trabajo (Framework) JasperReport
de interfaces de usuario del lado del servidor para aplicaciones Web ● JSF - Creando un login
basadas en tecnología Java, particularmente útil en aplicaciones basadas en ● Proyecto Web - Parte II
(BUSINESS LAYER)
arquitecturas MVC (Modelo - Vista - Controlador).
● Introducción a Business
Component - Parte I
En pocas palabras se puede pensar que JSF es un "Swing para aplicaciones
orientadas a la Web", teniendo como objetivo mejorar la creación de
interfaces de usuario web desarrolladas en Java.
Buscar Artículos

buscar...

OBJETIVO
El objetivo de este artículo es introducirnos al desarrollo de aplicaciones Web Usuarios Registrados
usando el Marco de trabajo Java Server Face en JDeveloper 10G, para lo
cual realizaremos un Login sin conexión a base de Datos usando paginas Registrados: 3898
jspx. usuarios.
Este mes: 55 usuarios.

REQUISITOS
RSS Disponible
- Jdeveloper 10g (10.1.3).
La versión 10.1.3 de Jdeveloper la cual pueden descargar de www.oracle.com ,
nos permite crear gráficamente e intuitivamente aplicaciones Web usando el
Framework JAVA SERVER FACE.

MANOS A LA OBRA
Desarrollaremos la aplicación Web JSF paso a paso con la finalidad de
familiarizarnos con la creación de este tipo de aplicaciones y además
asentar las bases para el desarrollo de futuros artículos.

PASO 1 - Creación del Proyecto

Para crear el proyecto hacemos clic derecho en "Applications" y

seleccionamos "New Application Workspace" (ver Figura Nro. 1)

Luego nos aparece una ventana en la cual nos pedirá información de

la aplicación que deseamos crear (Ver Figura Nro. 2), Para este caso
la aplicación se llamara JSFLogin, luego escogeremos la ruta en la
cual se guardara y en "Application Template" seleccionamos "Web
Application [JSF, JSP, EJB]".

Figura 1.
 Figura 2.

Una vez creada la nueva aplicación quedara como muestra la Figura

Nro. 3

Figura 3.

Siendo esta la estructura básica de toda aplicación usando esta

tecnología JSF, donde el archivo faces-config.xml es el archivo de
configuración y en la carpeta lib habrán 2 archivos jar que serán los
que contengan las clases usadas por JSF.

PASO 2 - Creación de las Páginas Web

Para este ejemplo crearemos 2 páginas Web, index.jspx y

bienvenida.jspx las cuales serán usadas en la aplicación, en donde la
pagina index.jspx será la página principal en la cual el Usuario
ingresara su nombre y su clave y bienvenida.jspx será la que le
muestre un saludo de bienvenida al respectivo Usuario en caso el
usuario y la clave sean los correctos caso contrario seguirá
mostrándose index.jspx.

Primero hacemos clic derecho sobre [Web Content] - New, en la

ventana que aparece seleccionamos [Web Tier] - JSP y en la parte
derecha nos aparece las opciones de JSP que se pueden crear, para
nuestro caso seleccionamos JSP (pagina Java Server Page), tal cual
nos muestra la figura Nro. 4.

Figura 4.

Al hacer clic en Aceptar nos muestra una ventana similar a la Figura

Nro 5 en la cual debemos proporcionar el nombre del archivo (File
Name) a crear (index.jspx) , el tipo (Type), para nuestro caso
crearemos JSP Document (jspx) y por ultimo en la sección Error Page
Option seleccionamos Do Not Use a Error Page to Handle Uncaught
Exception in this File.
 Figura 5.

Luego le damos en siguiente para seleccionar los Tag Libraries

necesarios que ser?n usados en la p?gina (Ver Figura Nro. 6).

Figura 6.

Para nuestro caso repetimos el mismo paso para crear la pagina

bienvenida.jspx.

PASO 3 - Configuraci?n del faces-config.xml

Una vez creado las paginas (Se completaran aun después), pasamos
a configurar el archivo faces-config.xml, para ello Jdeveloper 10G
cuenta con una interfaz grafica para dicha labor.

Primero hacemos doble clic al archivo faces-config.xml el cual nos

mostrará un área en la cual podemos diagramar la navegabilidad de
nuestras páginas, para ello contamos con una paleta (Faces
Navigation Diagram) la cual contiene los objetos necesarios para tal
fin.
Luego arrastramos las páginas index.jspx y bienvenida.jspx a la
sección de diagramación y de la paleta seleccionamos Faces
Navigation Case (el icono) el cual nos permitirá demarcar la secuencia
en la cual las paginas se mostraran según la acción seleccionada,
para nuestro caso haremos una navegabilidad entre index.jspx y
bienvenida.jspx siempre y cuando la acción sea "bien" y otra
navegabilidad entre index.jsp e index.jspx (recursivo) siempre y
cuando la acción sea "mal", en la figura Nro. 7 se muestra como
queda después de haber llevado acabo este paso.

Figura 7.

PASO 4 - : Creación del Bean (UsuarioLoginBean)

Jdeveloper 10G además de permitirnos diagramar la navegabilidad

de nuestras páginas, nos permite editar el archivo faces-config.xml y
desde hay crear beans si fuese necesario, como lo será para nuestro
ejemplo.

Al hacer doble clic en el archivo faces-config.xml como en el paso

anterior al ver la Figura Nro. 7 vemos como en el diagramador en la
parte inferior existen 4 paletas (Diagram, Overview, Source y
History), todas nos permiten ver dicho archivo de distinta manera,
ayudando en gran medida a la configuración del archivo.

Para nuestro caso, al hacer Clic en la paleta Overwiew (Ver Figura

Nro. 8) nos muestra varias opciones, siendo una de ellas el Managed
Beans, al pulsar sobre la opción Managed Beans, nos muestra en la
parte derecha las sub opciones New, Delete y Edit.
 Figura 8.

Al seleccionar New nos muestra una ventana desde la cual

crearemos un Bean, al cual llamaremos UsuarioLoginBean y estará en
el paquete llamado beans, tal cual lo muestra la Figura Nro. 9.

Obs. Debemos cerciorarnos que antes de pulsar Aceptar debemos

haber seleccionado la opción Generate java File, la cual nos creara
físicamente el archivo UsuarioLoginBean.java dentro de la carpeta
beans.

Figura 9.

Una vez creado el bean UsuarioLoginBean.java debemos editarlo y

escribir lo siguiente:
Ahora al ir a la paleta Source podemos ver el contenido del archivo
faces-config.xml el cual deberá ser como este:

Ahora veremos que el proyecto quedara tal cual se muestra en la

figura Nro 10.
 Figura 10

PASO 5 - Edición de las Páginas Webs

Para la edición final de las páginas index.jspx y bienvenida.jspx,

Jdeveloper 10G tambien nos facilita el trabajo con un editor de
páginas Web teniendo en consideración la tecnología seleccionada,
en nuestro caso las páginas Web las desarrollaremos con los Tag
Libraries que seleccionamos a la hora de crear las páginas, es decir
con los Tag Pre-Definidos de Java Server Face.

Para editar la página index.jspx le damos doble clic y la editamos

visualmente hasta obtener el siguiente diseño mostrado en la Figura
Nro. 11, como pueden ver en la parte derecha tienen la paleta JSF
HTML, la cual tiene los objetos Web necesarios para la creación de
interfaces Web.
 Figura 11.

Cuando pulsamos en Source, podemos apreciar el editor de código

de páginas Web que tiene el Jdeveloper 10G el cual nos permite vía
código editar nuestras páginas Web.

Ahora como podemos ver en la siguiente tabla, nos muestra la

equivalencia de algunos Objetos JSF y Objetos HTML

Objeto FSF Objeto HTML

<h:inputText> <Input type= "text">

<h:inputSecret> <Input type= "password">

<h:commandButton> <Input type= "submit">

Como podemos ver en la siguiente porción de código, en el atributo

value carga el valor ingresado en el atributo "nombre" del Bean
UsuarioLoginBan.

Al ver en el editor de código la página index.jspx se muestra el

siguiente código:

Donde las primeras 9 líneas y la ultima son agregadas por Jdeveloper

10G por tratarse de Paginas de tipo JSP Document (*.jspx), dentro
de las cuales se hace el llamado a los Tab Libraries de JSF, dándoles
un alias de "f" (JSF CORE) y "h" (JSF HTML), los cuales nos permitir?n
usar los Tags predefinidos de JSF.

Caso muy similar mostrara la figura Nro. 12, la cual nos muestra
gráficamente la pagina bienvenida.jspx.

Figura 12.

Y su respectivo código, en el cual podemos apreciar que el Objeto JSF

nos mostrara el valor que tiene la propiedad "nombre" del Bean
UsuarioLoginBean.

Ejecución de la Aplicación
 Como paso final solo queda ejecutar nuestra aplicación para ver los
resultados obtenidos, para lo cual seleccionamos la pagina index.jspx
y pulsamos F11 dando como resultado la visualización en el Browser
de nuestra pagina (ver Figura Nro 13)

Figura 13.

En nuestro caso en Nombre tipeamos "kris" y en Clave "1234", al

pulsar "Entrar" nos env?a a la pagina bienvenida.jspx (Ver Figura
Nro. 14) la cual nos nuestra un mensaje de Bienvenida, en caso
tipiemos otro Nombre o Clave seguiremos en la pagina index.jspx.

Figura 14.

CONCLUSIONES
Model: JDeveloper 10G es una herramienta que facilita la creación
de aplicaciones Web usando el marco de trabajo Java Server Face a
travás de los múltiples asistentes que generan el código ahorrando
esfuerzo y tiempo al programador.

View: Java Server Face tiene una completa integración en una

arquitectura MVC (Modelo, Vista, Controlador), permitiéndonos el
desarrollo de la Vista, en la cual mejora notablemente la creación de
Interfaces de Usuario y la misma interacción con los Usuarios de las
aplicaciones creadas con este Tecnología.
ACERCA DEL AUTOR

Elmer Zapata Ram?rez

Es Maestrista de la UNMSM es Ingeniería de Sistemas e Informática

en la mención de Dirección y Gestión de Tecnologías de la
Información, es actualmente profesor en tecnologías J2EE, habiendo
trabajado en proyectos empresariales con dicha tecnología.
Contactar en: "> Esta dirección de correo electrónico está siendo protegida de
\"spam bots\", necesitas habilitar Javascript para poder verlo. o en "> Esta dirección
de correo electrónico está siendo protegida de \"spam bots\", necesitas habilitar
Javascript para poder verlo. .

">
Comentario[s]

Para que funcione

Escrito por ymanja el 2006- 0 8 - 1 9 1 0 : 5 3 : 4 6

si les sale el problema Cannot find FacesContext, es necesario que revisen que el tag
exista en las paginas, tal cual como lo muestra la figura 12. Ojo con esto que pueden

perder un buen tiempo por estas dos palabritas.

y el control de sesion?
Escrito por Invitado el 2006- 0 2 - 0 3 0 8 : 3 3 : 1 8

Muy simpatico , pero me queda una duda. Qu? pasa si el usuario tipea
directamente en el navegador bienvenida.jsp en ves de index.jsp? no entrar?a
directamente al sistema sin validarse? como se hace el control de sesi?n en
jdeveloper?
Escrito por Invitado el 2006- 0 1 - 1 3 1 2 : 4 6 : 5 6

Muchas gracias, siga asi

Escrito por Invitado el 2005- 1 2 - 1 4 1 7 : 3 6 : 5 1

Soy principiante en oracle, la

aplicaci?n muy buena
Pablo
Escrito por Invitado el 2005- 1 0 - 2 6 1 5 : 2 3 : 3 4

Voy a ver...
Escrito por Invitado el 2005- 1 0 - 2 0 1 3 : 5 5 : 4 6

Muy buena la informacion y facil su interpretacion...seria bueno un articulo de

conexion a B.D. SQL u oracle
J. Fonseca
Escrito por Invitado el 2005- 1 0 - 1 8 1 6 : 3 2 : 3 6

Me parece un documento excelente. Siga adelante.

No tengo template JSF
Escrito por Invitado el 2005- 1 0 - 1 0 2 0 : 1 0 : 1 4
Como se hace sin el template de JSF, no lo tengo.
Escrito por hreine el 2005- 0 9 - 1 3 0 8 : 4 7 : 5 4

Escrito por Gandalf_gris el 2005- 0 8 - 0 9 1 4 : 1 5 : 4 2

Muy bueno. Para un novato total es un logro ver esa pagina funcionando
Sólo los usuarios registrados pueden escribir comentarios.
Por favor identificate o regístrate.
Powered by AkoComment 2.0!

< Anterior

[ Atrás ]
© 2008 JDeveloperLA.com - La comunidad en español de JDeveloper
Joomla! is Free Software released under the GNU/GPL License.