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

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

Principal | Objetivos | Artculos | Cursos | Foro | Contctenos | Sitios Amigos | Servicios | Eventos | Entrevistas | Colaboradores

Bienvenido
Nombre de usuario Contrasea

Encuesta
Ya est utilizando JSF o ADF Faces en sus proyectos ?

Iniciar sesin
Olvid su contrasea?

j k l m n

SI

j k l m n No, todavia uso JSP puro. j k l m n Struts.

No, todavia uso JSP con

Nuevo usuario?

JSF Creando un login

Regstrese aqu

j k l m n No, todavia uso JSP, Struts,

JSTL y Binding.

Votar

Resultados

Escrito por Elmer Kristopher Zapata Ramrez mircoles, 13 julio 2005

Ultimos Artculos
JSF - Lifecycle JSF - Jerarquia Tree JSF - Internacionalizacin ProyectoWeb, Jdeveloper y JasperReport JSF - C R E A N D O U N L O G I N Componente Tree de UIX Proyecto Web - Parte II (Business Layer)

Contenido
INTRODUCCION OBJETIVO REQUISITOS MANOS A LA OBRA PASO 1 - Creacin del Proyecto PASO 2 - Creacin de las Pginas Web PASO 3 - Configuracin del faces-config.xml PASO 4 - Creacin del Bean (UsuarioLoginBean) PASO 5 - Creacin de las Pginas Webs Ejecucin de la Aplicacin CONCLUSIONES ACERCA DEL AUTOR

Artculos Destacados
q

INTRODUCCION
La tecnologa Java Server Faces (JSF) es un marco de trabajo (Framework) de interfaces de usuario del lado del servidor para aplicaciones Web basadas en tecnologa Java, particularmente til en aplicaciones basadas en arquitecturas MVC (Modelo - Vista - Controlador). En pocas palabras se puede pensar que JSF es un "Swing para aplicaciones orientadas a la Web", teniendo como objetivo mejorar la creacin de interfaces de usuario web desarrolladas en Java.

q q

Curso de ADF BC, JSP, Struts con Jdeveloper 10.1.2 ProyectoWeb, JDeveloper y JasperReport JSF - Creando un login Proyecto Web - Parte II (BUSINESS LAYER) Introduccin a Business Component - Parte I

Buscar Artculos
buscar...

OBJETIVO
El objetivo de este artculo es introducirnos al desarrollo de aplicaciones Web usando el Marco de trabajo Java Server Face en JDeveloper 10G, para lo cual realizaremos un Login sin conexin a base de Datos usando paginas

Usuarios Registrados
Registrados: 3898

jspx.

usuarios. Este mes: 55 usuarios.

REQUISITOS
- Jdeveloper 10g (10.1.3).
La versin 10.1.3 de Jdeveloper la cual pueden descargar de www.oracle.com , nos permite crear grficamente e intuitivamente aplicaciones Web usando el Framework JAVA SERVER FACE.

RSS Disponible

MANOS A LA OBRA
Desarrollaremos la aplicacin Web JSF paso a paso con la finalidad de familiarizarnos con la creacin de este tipo de aplicaciones y adems asentar las bases para el desarrollo de futuros artculos.

PASO 1 - Creacin 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 informacin de la aplicacin que deseamos crear (Ver Figura Nro. 2), Para este caso la aplicacin 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 aplicacin quedara como muestra la Figura Nro. 3

Figura 3.

Siendo esta la estructura bsica de toda aplicacin usando esta

tecnologa JSF, donde el archivo faces-config.xml es el archivo de configuracin y en la carpeta lib habrn 2 archivos jar que sern los que contengan las clases usadas por JSF.

PASO 2 - Creacin de las Pginas Web

Para este ejemplo crearemos 2 pginas Web, index.jspx y bienvenida.jspx las cuales sern usadas en la aplicacin, en donde la pagina index.jspx ser la pgina 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 mostrndose 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 seccin 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 despus), 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 pginas, para ello contamos con una paleta (Faces Navigation Diagram) la cual contiene los objetos necesarios para tal fin.

Luego arrastramos las pginas index.jspx y bienvenida.jspx a la seccin de diagramacin y de la paleta seleccionamos Faces Navigation Case (el icono) el cual nos permitir demarcar la secuencia en la cual las paginas se mostraran segn la accin seleccionada, para nuestro caso haremos una navegabilidad entre index.jspx y bienvenida.jspx siempre y cuando la accin sea "bien" y otra navegabilidad entre index.jsp e index.jspx (recursivo) siempre y cuando la accin sea "mal", en la figura Nro. 7 se muestra como queda despus de haber llevado acabo este paso.

Figura 7.

PASO 4 - : Creacin del Bean (UsuarioLoginBean)

Jdeveloper 10G adems de permitirnos diagramar la navegabilidad de nuestras pginas, 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 configuracin 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 opcin 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 opcin Generate java File, la cual nos creara fsicamente 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 - Edicin de las Pginas Webs

Para la edicin final de las pginas index.jspx y bienvenida.jspx, Jdeveloper 10G tambien nos facilita el trabajo con un editor de pginas Web teniendo en consideracin la tecnologa seleccionada, en nuestro caso las pginas Web las desarrollaremos con los Tag Libraries que seleccionamos a la hora de crear las pginas, es decir con los Tag Pre-Definidos de Java Server Face. Para editar la pgina index.jspx le damos doble clic y la editamos visualmente hasta obtener el siguiente diseo 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 creacin de interfaces Web.

Figura 11.

Cuando pulsamos en Source, podemos apreciar el editor de cdigo de pginas Web que tiene el Jdeveloper 10G el cual nos permite va cdigo editar nuestras pginas Web. Ahora como podemos ver en la siguiente tabla, nos muestra la equivalencia de algunos Objetos JSF y Objetos HTML
Objeto FSF <h:inputText> <h:inputSecret> <h:commandButton> Objeto HTML <Input type= "text"> <Input type= "password"> <Input type= "submit">

Como podemos ver en la siguiente porcin de cdigo, en el atributo value carga el valor ingresado en el atributo "nombre" del Bean UsuarioLoginBan.

Al ver en el editor de cdigo la pgina index.jspx se muestra el siguiente cdigo:

Donde las primeras 9 lneas 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, dndoles

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 grficamente la pagina bienvenida.jspx.

Figura 12.

Y su respectivo cdigo, en el cual podemos apreciar que el Objeto JSF nos mostrara el valor que tiene la propiedad "nombre" del Bean UsuarioLoginBean.

Ejecucin de la Aplicacin

Como paso final solo queda ejecutar nuestra aplicacin para ver los resultados obtenidos, para lo cual seleccionamos la pagina index.jspx y pulsamos F11 dando como resultado la visualizacin 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 creacin de aplicaciones Web usando el marco de trabajo Java Server Face a travs de los mltiples asistentes que generan el cdigo ahorrando esfuerzo y tiempo al programador. View: Java Server Face tiene una completa integracin en una arquitectura MVC (Modelo, Vista, Controlador), permitindonos el desarrollo de la Vista, en la cual mejora notablemente la creacin de Interfaces de Usuario y la misma interaccin con los Usuarios de las aplicaciones creadas con este Tecnologa.

ACERCA DEL AUTOR

Elmer Zapata Ram?rez

Es Maestrista de la UNMSM es Ingeniera de Sistemas e Informtica en la mencin de Direccin y Gestin de Tecnologas de la Informacin, es actualmente profesor en tecnologas J2EE, habiendo trabajado en proyectos empresariales con dicha tecnologa. Contactar en: "> Esta direccin de correo electrnico est siendo protegida de \"spam bots\", necesitas habilitar Javascript para poder verlo. o en "> Esta direccin
de correo electrnico 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
Slo los usuarios registrados pueden escribir comentarios. Por favor identificate o regstrate. Powered by AkoComment 2.0!

< Anterior [ Atrs ]

2008 JDeveloperLA.com - La comunidad en espaol de JDeveloper

Joomla! is Free Software released under the GNU/GPL License.