Logo Pablo Monteserín

Pablo Monteserín

Cursos de páginas web

JSF 2

  1. Instalación
  2. Configuración de nuestro primer proyecto

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 mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?