JSF 2

Instalación

En Eclipse:

  1. Botón derecho sobre el explorador de proyectos -> new -> Dynamic web Project
  2. Configuration: Java Server Faces v2.1 Project
  3. JSF Capabilities -> Botón de download -> JSF 2.1 (Apache MyFaces 2.1.5)

Configuración de nuestro primer proyecto

index.xhtml<!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>
	https://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/	
		<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>
LibroBB@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.

Descargar configuración básica de un proyecto con JSF2

Etiquetas de la vista

Deben estar dentro de las etiquetas <h:body></h:body>

Estructura básica de un documento JSF

<!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:body>
</html>

Recorrer una colección de datos

<ui:repeat value="#{equipoBB.equipos}" var="var">
	<h:outputText value="#{var.nombre}" />
</ui:repeat>

Enviar un objeto desde un enlace dentro de la vista

<ui:repeat value="#{equipoBB.equipos}" var="var">
	<h:form>
		<h:commandLink action="#{equipoBB.consultaEquipo(var)}" value="Enviar" />
	</h:form>
</ui:repeat>

Para que funcione, en el backingBean debemos haber marcado su scope como de sesión:

@ManagedBean
@SessionScoped
public class EquipoBB {

Pintar una imagen

<h:graphicImage value="/imagenesFutbol/#{var.foto_escudo}" />

Ejercicio Hospital

Para que el alta funcione correctamente, y de modo general, es necesario inicializar los objetos de los Backings Beans en el constructor

public PacienteBB() {
	this.paciente = new Paciente();
}
Ejercicio CRUD JSF Descargar ejercicio hospital resuelto

Validación

<h:outputLabel for="nombre">Nombre:</h:outputLabel>
<h:inputText id="nombre" value="#{pacienteBB.paciente.nombre}" >
	<f:validator validatorId="validacionNombre" />
</h:inputText>
<h:message id="m2b" for="nombre" style="color:red" />
ValidacionNombre@FacesValidator("validacionNombre")
public class ValidacionNombre implements Validator {

	@Override
	public void validate(FacesContext arg0, UIComponent arg1, Object arg2) throws ValidatorException {	
		System.out.println(arg2.toString().length());
		if(arg2.toString().length() < 5) {
			System.out.println("menor de 5");
			 FacesMessage msg =
		              new FacesMessage("Error en la validación del nombre",
		              "Por favor introduzca un nombre de más de 5 dígitos");
		      msg.setSeverity(FacesMessage.SEVERITY_ERROR);      
		      throw new ValidatorException(msg);
		}
	}
}

Ejercicio Calidades

Pantallazo ejercicio resuelto

Etiqueta <f:ajax

  • render: Este atributo indica la id del elemento donde se va a almacenar el resultado de la petición ajax.
  • event: Este atributo indica el tipo de evento que detonará la petición ajax.
  • <h:panelGroup: Para poder pintar el resultado de la petición ajax en un componente de tipo <ui:repeat, este debe estar dentro de un componente <h:panelGroup.
<h:form>
	<h:selectOneMenu>
		<f:ajax listener="#{equipoBB.listener}" render="jugadores" event="change"
		execute="@form" />
		<f:selectItems id="combo" value="#{equipoBB.equipos}" var="equipo"
		itemLabel="#{equipo.nombre}" itemValue="#{equipo.equipoCod}" />
	</h:selectOneMenu>
	<h:panelGroup id="jugadores">
		<div style="display: flex">
			<ui:repeat id="cosas" value="#{equipoBB.jugadores}" var="var">
				<h:outputText value="#{var.numeroCamiseta}" /> - 
				<h:outputText value="#{var.nombre}" /><br />
			</ui:repeat>
		...
public void listener(AjaxBehaviorEvent event) {
		EquipoDAO equipoDAO = new EquipoDAO();
		int equipo_cod = Integer.parseInt((String) ((UIOutput)event.getSource()).getValue());
		jugadores = equipoDAO.getJugadoresByEquipo(equipo_cod);
		Iterator<Jugador> it = jugadores.iterator();
		calidades = new ArrayList<String>();
		while(it.hasNext()) {
			Jugador j = it.next();
			String calidad = "<div style=\"background:yellow; width:20px; height:"+j.getCalidad()*10+"px\"></div>";
			calidades.add(calidad);
		}
	}
Descargar ejercicio calidades resuelto

Cómo podríamos realizar este ejercicio sin la etiqueta de Ajax:

<h:selectOneMenu onchange="submit()" valueChangeListener="#{equipoBB.consultaEquipo}">
public void consultaEquipo(ValueChangeEvent event) {
	EquipoDAO equipoDAO = new EquipoDAO();
	jugadores = equipoDAO.getJugadoresByEquipo(Integer.parseInt((String) event.getNewValue()));

Ejercicio Mensajería

Ejercicio Foro

icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!