Curso de JSF 2 | Configuración de nuestro primer proyecto 1

Curso de JSF 2
Configuración de nuestro primer proyecto

Curso de JSF 2 | Configuración de nuestro primer proyecto 2

Curso de JSF 2 | Configuración de nuestro primer proyecto

1.  
2.  
3.  
4.  
5.  
6.  

En esta lección configuraremos nuestro primer proyecto JSF y crearemos una pequeña aplicación que permita insertar datos mediante un formulario. Esta aplicación utilizará un Backing Bean para gestionar los datos y vincularlos con la vista.

index.xhtml

El archivo index.xhtml define un formulario básico con etiquetas JSF para capturar datos y un botón para enviarlos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>Insert title here</title>
</h:head>
<h:body>
	<h:form>
		<h:inputText label="id" value="#{libroBB.libro.id}" />
		<h:inputText label="titulo" value="#{libroBB.libro.titulo}" />
		<h:inputText label="precio" value="#{libroBB.libro.precio}" />
		<h:commandButton value="Enviar" action="#{libroBB.insertar}" />
	</h:form>
</h:body>
</html>

Explicación del código

  1. Formulario (<h:form>): Contiene los campos de entrada y el botón de envío.
  2. Campos de entrada (<h:inputText>):
    • id: Campo para capturar el identificador del libro.
    • titulo: Campo para capturar el título del libro.
    • precio: Campo para capturar el precio del libro.
  3. Botón de envío (<h:commandButton>): Llama al método insertar del Backing Bean al hacer clic.

LibroBB

El Backing Bean es responsable de gestionar los datos del formulario y realizar la operación de inserción.

@ManagedBean
public class LibroBB {
	private Libro libro;

	public LibroBB() {
		this.libro = new Libro();
	}

	public Libro getLibro() {

		return libro;
	}

	public void setLibro(Libro libro) {
		this.libro = libro;
	}

	public String insertar() {
		System.out.println(
				"Valores " + this.libro.getId() + " - " + this.libro.getPrecio() + " - " + this.libro.getTitulo());
		System.out.println("insertamos en la base de datos");
		return "/index.xhtml";
	}
}

Abriremos y cerraremos la etiqueta f:view justo antes de abrir y cerrar las etiquetas del body.

Clase Libro

El Backing Bean utiliza una clase auxiliar para representar los datos de un libro.

public class Libro {
private int id;
private String titulo;
private double precio;

public int getId() {
    return id;
}

public void setId(int id) {
    this.id = id;
}

public String getTitulo() {
    return titulo;
}

public void setTitulo(String titulo) {
    this.titulo = titulo;
}

public double getPrecio() {
    return precio;
}

public void setPrecio(double precio) {
    this.precio = precio;
}

}

Funcionamiento

  1. Inicio del formulario:
    • Al cargar la página, el usuario puede llenar los datos del libro.
  2. Vinculación con el Backing Bean:
    • Los campos del formulario están vinculados a las propiedades del objeto libro en el Backing Bean LibroBB.
  3. Botón de envío:
    • Al hacer clic en el botón Enviar, se ejecuta el método insertar, que imprime los valores capturados y simula la inserción en una base de datos.
  4. Redirección:
    • El formulario redirige nuevamente a la misma página (/index.xhtml).

Puntos importantes

  1. Declaración del Managed Bean:
    • El Backing Bean debe estar anotado con @ManagedBean para que JSF lo reconozca.
  2. Ciclo de vida:
    • Los datos ingresados en la vista se mapean automáticamente a las propiedades del Backing Bean gracias a las expresiones EL (#{}).
  3. Reutilización:
    • La clase Libro es una estructura reutilizable para manejar datos en diferentes partes de la aplicación.
Descargar Recurso