Curso de JSF 2 | Etiquetas de la vista 1

Curso de JSF 2
Etiquetas de la vista

Curso de JSF 2 | Etiquetas de la vista 2

Curso de JSF 2 | Etiquetas de la vista

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

En esta lección aprenderemos sobre las etiquetas fundamentales que JSF proporciona para crear vistas dinámicas. Estas etiquetas te permitirán estructurar documentos, recorrer colecciones de datos, enviar información desde la vista, y más.

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

1. Estructura básica de un documento JSF

Un documento JSF se construye sobre un formato XML, y debe incluir las declaraciones de los espacios de nombres necesarios. A continuación, se muestra una estructura básica:

<!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>

Descripción:

  • xmlns:h: Importa las etiquetas HTML específicas de JSF, como <h:form> y <h:inputText>.
  • <h:head> y <h:body>: Se utilizan para definir las secciones principales del documento, similares a HTML estándar.

2. Recorrer una colección de datos

Para mostrar una lista de elementos en la vista, JSF proporciona la etiqueta <ui:repeat>.

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

Descripción:

  • value: Contiene la colección de datos que se quiere recorrer (en este caso, equipos).
  • var: Define un alias para acceder a cada elemento de la colección.
  • #{var.nombre}: Muestra el atributo nombre de cada elemento.

Enviar un objeto desde un enlace dentro de la vista

JSF permite enviar un objeto desde un enlace o un botón utilizando <h:commandLink> combinado con <ui:repeat>.

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

Descripción:

  • <h:commandLink>: Crea un enlace que ejecuta una acción definida en el Backing Bean.
  • action: Llama al método consultarEquipo en el Backing Bean y pasa el objeto actual (var) como parámetro.
  • <h:form>: Envuelve el enlace para permitir la ejecución de la acción.

Configuración del Backing Bean:

Para que este ejemplo funcione, el Backing Bean debe tener un scope de sesión o vista.

@ManagedBean
@SessionScoped
public class EquipoBB {
    private List<Equipo> equipos;

    public void consultarEquipo(Equipo equipo) {
        System.out.println("Equipo seleccionado: " + equipo.getNombre());
    }

    // Getters y setters para 'equipos'
}

4. Pintar una imagen

Para mostrar imágenes dinámicamente en JSF, se utiliza la etiqueta <h:graphicImage>.

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

Descripción:

  • value: Contiene la URL o ruta de la imagen que se mostrará. Puede ser una ruta estática o dinámica, generada desde un Backing Bean.