Your SlideShare is downloading. ×
Ejercicio basico jsf’s
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ejercicio basico jsf’s

3,214
views

Published on

Presentación de un ejercicio en clase de JSF con Beans

Presentación de un ejercicio en clase de JSF con Beans

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,214
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Ejercicio clase JSF’s Manejo de Beans
  • 2. Introducción• Java Server Faces (JSF) es un entorno de desarrollo de aplicaciones Web. Consta de una librería de etiquetas, junto con un conjunto de reglas para su utilización.JSF ahorra tiempo al desarrollador aportando potentes recursos, especialmente para la gestión de formularios y la presentación de datos contenidos en bases de datos. JSF está construido sobre JSP, por lo que los conocimientos sobre JSP son de ayuda importante para manejar JSF.• El presente tutorial tiene como objetivo introducir al lector en JSF, consiguiendo desarrollar habilidades sobre los aspectos más cotidianos de su utilización.• Como herramienta de desarrollo utilizaremos NetBeans. Se asume que el lector ya ha descargado e instalado correctamente NetBeans, así como un dominio básico del mismo.
  • 3. Creando el Proyecto• Abriremos NetBeans y pulsaremos el icono de New Project, o bien abriremos un nuevo proyecto mediante el menú principal, en File:New project• Elegiremos como categoría Web y como subcategoría Web application
  • 4. Creando el Proyecto• A continuación pulsamos el botón Next y nos encontraremos asi:
  • 5. Creando el proyecto• Pulsamos el botón Next y entre los entornos (frameworks), elegimos JavaServer Faces. Una vez hecho esto pulsamos Finish con lo que NetBeans nos crea nuestro proyecto.
  • 6. Estructura aplicación web• En el panel de proyectos aparece el recién creado DimeNombre. Si lo desplegamos observamos su estructura, en forma de árbol de directorios.• Web Pages: Contiene tanto las páginas Web, como dos directorios que son necesarios para definir la configuración de la aplicación. Estos directorios son: – METAINF: Contiene el fichero context.xml. – WEBINF: Contiene los ficheros de configuración: • facesconfig.xml: Contiene instrucciones de configuración que atañen a las clases java de respaldo de las páginas Web. Aquí se inicializan variables, se enlaza código Java con páginas Web, se indica como se salta de una página Web a otra, etc. • web.xml: Recoge parámetros de configuración generales de la aplicación, tales como cuales son las páginas de inicio y error, qué recursos adicionales usa la aplicación,temas de seguridad, etc.
  • 7. Estructura aplicación web• Configuration Files: Es un directorio virtual que nos muestra juntos todos los ficheros de configuración de la aplicación. En él volvemos a ver facesconfig.xml, web.xml y otros.• Server Resosurces: Contiene referencias a los recursos del contenedor de páginas Web, el cual puede ser Tomcat, como en nuestro caso, o bien otro contenedor. Por ejemplo el servidor de aplicaciones J2EE u otros. Estos recursos pueden ser conexiones a bases datos, definiciones de servicios para enviar emails desde nuestra aplicación, y otros más.• Source Packages: Contiene nuestro código Java.• Test Packages: Contiene el código que usamos para pruebas. Nosotros hacemos la pruebas directamente sobre el código contenido en Source Packages.• Libraries: Las librerías que necesita nuestro programa.• Test Libraries: Las librerías en pruebas.
  • 8. Ejecutando programa• NetBeans nos crea una primera página de bienvenida en JSP index.jsp y otra más en JSF WelcomeJSF.jsp.• Si pinchamos en el icono de ejecución del programa o alternativamente pulsamos la tecla F6, o bien seleccionamos en el menú principal la opción Run:Run Main Project, NetBeans compilará y construirá nuestro programa.• Después lanzará Netbeans para que procese las páginas JSP y lanzará también nuestro navegador. En éste veremos la página de inicio del programa. Esta página, por defecto es index.jsp. En ella veremos un enlace a la página WelcomeJSF.jsp.• Nótese que Glassfish es capaz de arrancar la copia de Glassfish que forma parte de su propia instalación. Si tuvieramos previamente instalado en nuestro ordenador otra copia de Glassfish, deberíamos ser nosotros los que la arrancáramos, pues NetBeans no podría.• Podemos cambiar el navegador seleccionando en el menú de NetBeans Tools:Options.• Para modificar cualquiera de las páginas Web existentes, podemos teclear en ella código JSP o JSF
  • 9. Ejecutando programa• Lo mejor pues, es abrir las páginas index.jsp y WelcomeJSF.jsp en nuestro editor en NetBeans. Para ello en el panel de proyectos, desplegamos el árbol que representa nuestra aplicación y tras abrir el nodoWeb Pages, hacemos dobleclick sobre el nombre de cada una de las páginas
  • 10. Editando JSP• Observamos que una vez que hemos abierto una página JSP en el editor, a la derecha disponemos de un panel que contiene elementos de varias categorías: HTML, JSP, JSF, y DataBase. Mediante ellos se simplifica la tarea de diseño. También podemos sencillamente editar la página tecleando código.• Una de las facilidades más interesantes de JSF es el manejo de formularios. Por ello vamos a modificar la página WelcomeJSF.jsp• Pinchamos en el panel de la derecha el control JSF Form y lo arrastramos hasta el editor sobre la página WelcomeJSF.jsp
  • 11. Editando JSP• En la situación de la figura 5, elegimos la opción Emty Form, con lo que NetBeans incluye en nuestra página un formulario vacío, tal cual vemos en el código siguiente• <%@page contentType="text/html"%>• <%@page pageEncoding="UTF-8"%>• <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>• <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"• "http://www.w3.org/TR/html4/loose.dtd">• <html>• <head>• <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">• <title>JSP Page</title>• </head>• <body>• <f:view>• <h1><h:outputText value="JavaServer Faces" /></h1>•
  • 12. Editando JSP• /* Esta es la zona del formulario vacio */•• <h:form>• </h:form>• </f:view>• /****************************************/•• </body>• </html>
  • 13. Editando JSP• Observamos en el comienzo de la página las directivas• <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%> que indican que las marcas con prefijo f, tales como f:view corresponden a la librería java.sun.com/jsf/core, mientras que las marcas con prefijo h, se encuentran en la librería java.sun.com/jsf/html.• Ahora aprovecharemos la facilidad de autocompleción de NetBeans para insertar elementos en el formulario vacío.• Para ello entre y , tecleamos y esperamos a que NetBeans nos ofrezca opciones para completar el comando. Si vemos que no ocurre nada tras esperar prudencialmente, pulsamos simultáneamente las teclas ctrl y espacio.
  • 14. Editando JSP
  • 15. Editando JSP• Los nombres de los marcadores son bastante autoexplicativos. En nuestro caso elejiremos , que es el que sirve para poner un texto fijo en el formulario.• Escribiremos siguiendo esta operativa el siguiente código• <f:view> <h:form> <h:outputLabel title="Cual es tu nombre ?:" /> <h:inputText value="nombre"/> <h:commandButton action="submit" value="Enviar"/> </h:form> </f:view> Ejecutamos el programa y veremos en nuestro navegador lo siguiente, tras pulsar el enlace a la página WelcomeJSF.jsp
  • 16. Editando JSP• Nos es difícil entender del todo que es lo que ha pasado, pero esto no es lo que queríamos. Tras un análisis de la situación vemos que el parámetro value=nombre, que habíamos puesto en el marcadorh:inputText aparece dentro del campo de texto.• Nos ocuparemos de esto más tarde. Ahora vamos a dar a nuestro formulario otro aspecto. Para ello utilizaremos algo que maneje la disposición de los elementos del formulario en la página Web.• Así pues lo que necesitamos es el marcador . Escribiremos ahora• <f:view> <h:form> <h:panelGrid columns="2"> <h:outputLabel title="Cual es tu nombre ?:" /> <h:inputText value="nombre"/> <h:commandButton action="submit" value="Enviar"/> </h:panelGrid> </h:form> </f:view> Observamos que el resultado cambia y nuestro formulario tiene ahora dos columnas. h:panelGrid es el marcador que se encarga de controlar la disposición de los elementos en el formulario. Podemos tener varios panelGrids dentro de un mismo formulario. Entre medias de los panelGrids se puede escribir código HTML.• Vamos ahora a ocuparnos del funcionamiento del campo de entrada de texto. Para ello vamos a crear código Java que procese la información del formulario.
  • 17. Creando un Managed Bean• Creando una managed bean• Pulsaremos el botón derecho del ratón sobre el nombre del proyecto DimeNombre y en el menú que emerge seleccionamos la opciión New.• Aparece entoces un panel en que se ofrecen varias posibilidades. Seleccionaremos File/Folder, que sirve para que se nos ofrezcan todas las posibilidades existentes, compatibles con nuestro contexto.
  • 18. Creando un Managed Bean• Seleccionaremos la categoría Web:JSF Managed Bean.• Esto nos lleva a la situación de la figura• Daremos a la managed bean, el nombre WelcomeJSFManagedBean y en el campo Package, indicaremos misBeans. Después pulsaremos Finish y NetBeans nos mostrará en el editor la nueva clase creada.
  • 19. Creando un Managed Bean
  • 20. Creando un managed Bean• Primero crearemos un atributo llamado nombre y de tipo String. Nuestro código queda• package misBeans;• public class WelcomeJSFManagedBean {•• String nombre="";•• /** Creates a new instance of WelcomeJSFManagedBean */• public WelcomeJSFManagedBean() {• }•• }
  • 21. Creando un Managed Bean• A continuación pulsamos con el botón derecho del ratón sobre el editor, en cualquier sitio y veremos el menú emergente
  • 22. Creando un Managed Bean• Seleccionamos en el menú emergente la categoría Refactor:Encapsulate Fields. Se nos pregunta por los campos a encapsular, aceptamos, y después en la parte inferior de NetBeans pulsamos Do Refactoring. Una vez hecho esto observamos que NetBeans ha creado un método get y otro set, para el atributo nombre.• A través de estos métodos es como se comunica la página JSP con la managed bean.
  • 23. Enlazando la pagina web con el bean• Ahora tenemos que indicar que la clase de respaldo de la página WelcomeJSF.jsp es la clase WelcomeJSFManagedBean.java, ya que en caso contrario el sistema no lo establece por si mismo. Nótese que los nombres de la página Web y de la clase de respaldo son totalmente independientes.• Para ello en la página Web WelcomeJSF.jsp modificaremos el valor del campo de texto como sigue.• <h:inputText value="#{WelcomeJSFManagedBean.nombre}"/> nótese que mientras estamos tecleando el código,siempre podemos pusar crtl-espacio, para que NetBeans nos ayude con su autocompleción.
  • 24. Enlazando la pagina web con el Bean• La parte interesante de la página Web queda• <f:view>• <h1><h:outputText value="JavaServer Faces" /></h1>•• <h:form>• <h:panelGrid columns="2">• <h:outputLabel value="Cual es tu nombre ?:" />• <h:inputText value="#{WelcomeJSFManagedBean.nombre}"/>• <h:commandButton action="submit" value="Enviar"/>• </h:panelGrid>• </h:form>• </f:view>• Ahora lanzamos el programa y observamos que su comportamiento es normal.
  • 25. Enlazando la pagina web con el Bean• Ahora vamos a procesar desde la clase de respaldo (bean), el contenido de la página Web.• Para ello crearemos una página Web nueva.• Clickeamos con e botón derecho del ratón sobre la carpeta Web Pages, por ejemplo, la cual se encuentra en el árbol de estructura del proyecto, en el panel izquierdo de NetBeans.• En el mnú emergente seleccionamos New:Web:JSP. Se nos abre el panel de creación de la página Web y le damos el nombre respuesta sin extensión ninguna.
  • 26. Enlazando la pagina web con el Bean• Esto nos crea una página Web de tipo JSP. Para que maneje las librerías de JSF, incluimos las directivas• <%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>• <%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>• A continuación incluiremos en la página de respuesta (respuesta.jsp, el formulario siguiente• <f:view>• <h:form>• <h:outputLabel value="#{WelcomeJSFManagedBean.nombre}"/>• </h:form>• </f:view>• Nótese que tomamos el nombre de la clase de respaldo.
  • 27. Creando las reglas de navegacion• Ahora tenemos que hacer algo para que cuando enviamos el nombre desde la página Welcome.jsp, éste aparezca en la página de respuesta.• Para ello abrimos el fichero faces-config.xml en el editor. A continuación pulsamos sobre él en el editor, el botón derecho del ratón y veremos un menú emergente. Seleccionamos la opción JavaServer Faces:Add Navigation Rule• Pulsamos el botón Browse, y seleccionamos la página WelcomeJSF.jsp. A continuación pulsamos el botón Add. Observamos que en faces-config.xml, aparece un texto que intuitivamente comprendemos.
  • 28. Creando las reglas de navegacion• A continuación pulsamos de nuevo el botón derecho del ratón sobre el editor, y esta vez elegimos, en el menú emergente, la opción JavaServer Faces:Add Navigation Case.• Estaremos en la situación de la figura• La mecánica a seguir es intuitiva.• Los campos del formulario de• deben ser:• From View: /WelcomeJSF.jsp• From outcome: submit• To View: /respuesta.jsp
  • 29. Asi debio quedar el XML• <?xml version=1.0 encoding=UTF-8?>• <!DOCTYPE faces-config PUBLIC• "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"• "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">• <faces-config>• <managed-bean>• <managed-bean-name>WelcomeJSFManagedBean</managed-bean-name>• <managed-bean-class>misBeans.WelcomeJSFManagedBean</managed-bean-class>• <managed-bean-scope>request</managed-bean-scope>• </managed-bean>• <navigation-rule>• <description>• </description>• <from-view-id>/welcomeJSF.jsp</from-view-id>• <navigation-case>• <from-outcome>submit</from-outcome>• <to-view-id>/repuesta.jsp</to-view-id>• </navigation-case>• </navigation-rule>• </faces-config>
  • 30. Procesando la informacion• Ahora podemos ejecutar nuestro programa y veremos que tras escribir un nombre en la página WelcomeJSF.jsp, y pulsar enviar, éste aparece en la página respuesta.jsp.• Es decir la primera página a enviado el dato a la clase de respaldo y la segunda página lo ha tomado de ella.• Ahora para que esto sea realmente interesante, deberíamos procesar realmente la información, no solamente pasarla de página en página.
  • 31. Procesando la información de respaldo• Primeramente crearemos el código necesario para realizar algún trabajo con la información que nos envían desde la página.• Para ello es necesario modificar varias cosas:• Crearemos un nuevo atributo en la clase WelcomeJSFManagedBean.java con la instrucción• private String respuesta=""; Después crearemos sus métodos get y set, como hicimos anteriormente, mediante el menú emergente que obtenemos al pulsar el botón derecho del ratón sobre el editor y seleccionarRefactor:Ecapsulate Fields.
  • 32. Procesando la informacion de respaldo• Crearemos un método en la la clase WelcomeJSFManagedBean.java, el cual llamaremos procesar. El código de este método es:• public String procesar() {• respuesta = nombre + ", " + "tu nombre tiene " +• nombre.length() + " letras.";• return "respuesta_procesada";• }• Nótese el valor que devuelve la función. Además vemos que esta función pone un valor en el atributo respuesta de la clase. Este valor es el que recogerá la página repuesta.jsp. La coincidencia de los nombres es puramente accidental. La página y el valor podrían llamarse de manera diferente.• Pulsamos la tecla F9, para compilar la clase y comprobar que no hemos cometido ningún error.
  • 33. Procesando la información de respaldo• Modificamos la página WelcomeJSF.jsp. Ahora el comando que manipula el botón de enviar es• <h:commandButton action="#{WelcomeJSFManagedBean.procesar}" value="Enviar"/>• Nótese que ahora cuando pulsamos el botón la página llama al método procesar que hemos creado en la clase de respaldo.• Modificamos la página respuesta.jsp. Ahora el texto que aparece se controla con la instrucción• <h:outputText value="#{WelcomeJSFManagedBean.respuesta}" /> Es decir esta página recoge el valor dejado en la variable respuesta, por el método procesar, el cual ha sido invocado cuando pulsamos el botón enviar.
  • 34. Asi debio quedar Faces-Config.xml• <?xml version=1.0 encoding=UTF-8?> <!DOCTYPE faces-config PUBLIC• "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"• "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">• <faces-config>• <managed-bean>• <managed-bean-name>WelcomeJSFManagedBean</managed-bean-name>• <managed-bean-class>misBeans.WelcomeJSFManagedBean</managed-bean-class>• <managed-bean-scope>request</managed-bean-scope>• </managed-bean>• <navigation-rule>• <description>• </description>• <from-view-id>/welcomeJSF.jsp</from-view-id>• <navigation-case>• <from-outcome>respuesta_procesada</from-outcome>• <to-view-id>/repuesta.jsp</to-view-id>• </navigation-case>• </navigation-rule>• </faces-config>
  • 35. Procesando la información de respaldo• Nótese que hemos modificado la regla de navegación. Ahora cuando la función procesar devuelve la cadena ``respuesta_procesada, el sistema sabe que tiene que llamar a la página respuesta.jsp• Observamos que este esquema de funcionamiento es totalmente flexible y mediante él podemos construir cualquier secuencia de llamadas a páginas Web, con procesamiento del tipo que deseemos entre las llamadas.• JavaServer Faces y JSP, permiten mucho más, pero para este tutorial de introducción es suficiente.

×