Instalación
En Eclipse:
- Botón derecho sobre el explorador de proyectos -> new -> Dynamic web Project
- Configuration: Java Server Faces v2.1 Project
- 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.
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 Futbol
La segunda carga una collection de beans de Equipo, y la tercera carga una collection de beans de Jugador en función de un parámetro (EQUIPO_COD) que fue procesado en el controlador.
Descargar ejercicio futbol resuelto
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();
}
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
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);
}
}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()));
Pablo Monteserín