POLITECNICO INTERNACIONAL ASIGNATURA: ELECTIVA DE PROGRAMA JAVA JSF DOCENTE: EDUARDO ROBAYO SEMANA 03

Tamaño: px

Comenzar la demostración a partir de la página:

Download "POLITECNICO INTERNACIONAL ASIGNATURA: ELECTIVA DE PROGRAMA JAVA JSF DOCENTE: EDUARDO ROBAYO SEMANA 03"

Ramona Herrera Cuenca
hace 5 años
Vistas:

1 QUE ES JSF JAVA SERVER FACES POLITECNICO INTERNACIONAL ASIGNATURA: ELECTIVA DE PROGRAMA JAVA JSF DOCENTE: EDUARDO ROBAYO SEMANA 03 Es el framework estándar a nivel de capa de presentación en arquitectura JEE. JSF ofrece etiquetas mas potentes y mas complejas, aportan mayores funcionalidades. En JSF el framework se basa en un nuevo concepto denominado ManagedBean. Un ManagedBean es una clase que realiza tareas de intermediario entre la capa de presentación y la capa de servicios, por lo tanto todas las paginas JSF se apoyan en ellas para enviar o recibir información. Index.xhtml <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xmlns:h=" xmlns:f=" <h:head> <title>holamundo</title> </h:head> <h:body> <h:form id= "holamundo"> <h:inputtext id= "nombreusuario" value="#{usuariobean.nombre"/> <h:commandbutton id="submit" action="resultado" value="aceptar"/> </h:body> </html> Las etiquetas JSF están mas orientadas a la definición de controles como lo vemos en el ejercicio con el caso de la etiqueta <h:inputtext> que define una caja de texto. Una vez definida la caja de texto define el siguiente atributo. value="#{usuariobean.nombre" Este atributo define que el valor que se escriba en la caja de texto está asociado a un ManagedBean.

$managedbean; @ManagedBean /** * * @author eduar_000 */ public class UsuarioBean { private String nombre; public String getnombre() { return nombre; public void setnombre(string nombre) { this.$

2 Veamos entonces como se construye un ManagedBean que esté asociado a éste formulario. UsuarioBean.java import /** * eduar_000 */ public class UsuarioBean { private String nombre; public String getnombre() { return nombre; public void setnombre(string nombre) { this.nombre = nombre; Se trata de una clase java a la que se le asigna una nueva Una vez asignada ésta anotación, el formulario JSF y el ManagedBean se relacionan a través de la etiqueta. <h:inputtext id= "nombreusuario" value="#{usuariobean.nombre"/> Veamos el otro control que existe a nivel de la página, que es el botón. <h:commandbutton id="submit" action="resultado" value="aceptar"/> Este botón simplemente se encarga de invocar a otra pagina denominada resultado.xhtml haciendo uso del atributo action.

3 Resultado.xhtml <?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE html> xmlns:h=" <head> <title>respuesta</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div>todo write content</div> <h:form id="formulariorespuesta"> <h2>hola, #{usuariobean.nombre</h2> <h:commandbutton id="volver" value="volver" action="index" /> </body> </html> Ejecutemos la aplicación. De ésta manera quedan ligadas las dos páginas al ManagedBean, la primera envía datos al ManagedBean, que los almacena, la segunda página lee los datos del ManagedBean.

0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns:h="http://xmlns.jcp.

4 CONSTRUIR UN COMBO CON JSF Vamos a cargar una lista de elementos en un Combo sencillo. Index.xhtml <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xmlns:h=" xmlns:f=" <h:head> <title>facelet Title</title> </h:head> <h:body> Hello from Facelets <h:form id="holamundo">

5 <h:selectonemenu value="#{usuariobeanlista.nombre"> <f:selectitems value="#{usuariobeanlista.listanombres" /> </h:selectonemenu> <h:commandbutton id="submit" action="resultadolista" value="aceptar"/> </h:body> </html> Analicemos: El siguiente control es el encargado de definir un combo desplegable: <h:selectonemenu value="#{usuariobeanlista.nombre"> Muestra la lista de elementos y permite seleccionar uno. La siguiente instrucción muestra la lista de elementos apoyándose en un ManagedBean denominado usuariobeanlista que carga una lista de elementos. <f:selectitems value="#{usuariobeanlista.listanombres" /> Asi mismo, para elegir un elemento y almacenarlo, hace uso del mismo ManagedBean y de la propiedad nombre. <h:selectonemenu value="#{usuariobeanlista.nombre"> Tenemos además un botón que lleva a una página resultadolista para procesar el formulario. <h:commandbutton id="submit" action="resultadolista" value="aceptar"/> Veamos el código del ManagedBean: import java.util.arraylist; import java.util.list; import javax.faces.model.selectitem; import /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools Templates * and open the template in the editor. */ /** *

6 eduar_000 */ public class UsuarioBeanLista { private List<SelectItem> listanombres; private String nombre; public String getnombre() { return nombre; public void setnombre(string nombre) { this.nombre = nombre; public List<SelectItem> getlistanombres() { listanombres = new ArrayList<SelectItem>(); listanombres.add(new SelectItem("1","Nombre 1")); listanombres.add(new SelectItem("2","Nombre 2")); listanombres.add(new SelectItem("3","Nombre 3")); return listanombres; Ahora veamos el código de resultadlista para procesar el formulario: <?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE html> xmlns:h=" xmlns:f=" <head> <title>todo supply a title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div>todo write content</div> <h:form id="formulariorespuesta"> <h2>hola, #{usuariobeanlista.nombre</h2> <h:commandbutton id="volver" value="volver" action="index" /> </body> </html>

AHORA VAMOS A UNA TABLA CON JSF Vamos a crear una tabla y cargarle datos con JSF. Se mostrará una página como la siguiente: Debemos crear: Clase Usuario.java Clase ManagedBean TablaUsuarioBean.

7 AHORA VAMOS A UNA TABLA CON JSF Vamos a crear una tabla y cargarle datos con JSF. Se mostrará una página como la siguiente: Debemos crear: Clase Usuario.java Clase ManagedBean TablaUsuarioBean.java Página index.xhtml //Usuario.java public class Usuario { private String nombre; private int edad; public Usuario(String nombre, int edad) { super(); this.nombre = nombre; this.edad = edad; public String getnombre() { return nombre; public void setnombre(string nombre) { this.nombre = nombre; public int getedad() { return edad; public void setedad(int edad) { this.edad = edad;

8 //Tabla UsuarioBean.java import java.util.arraylist; import java.util.list; import javax.annotation.postconstruct; import public class TablaUsuarioBean { private List<Usuario> usuarios; private Object usuario; public void setusuarios(list<usuario> usuarios) { this.usuarios=usuarios; public List<Usuario> getusuarios() { return public void iniciar() { Usuario u= new Usuario("pedro",25); Usuario u1= new Usuario("crhistina",30); usuarios = new ArrayList<Usuario>(); usuarios.add(u); usuarios.add(u1); //Página index.xhtml xmlns:h=" <h:body> <h:form> <h:datatable id="tabla" value="#{tablausuariobean.usuarios" var="usuario"> <h:column> <h:outputtext value="#{usuario.nombre"/>, <h:outputtext value="#{usuario.edad"/> </h:column> </h:datatable> </h:body>

9 </html> Vemos en el método iniciar() se encarga de rellenar la lista de usuarios que necesitaremos en la tabla haciendo uso de la que define que método ejecutar una vez creado el ManagedBean.

Documentos relacionados

A CONTINUACION LOS PANTALLAZOS

A CONTINUACION LOS PANTALLAZOS LOGIN CON JSF Vamos a hacer un login sencillo con JSF que valide el acceso de un usuario, con los datos de acceso dentro del código, evidentemente no es la forma mas óptima pero para iniciar con el conocimiento