En este ejercicio implementaremos una funcionalidad interactiva que carga dinámicamente información de jugadores y calidades al seleccionar un equipo. Usaremos la etiqueta <f:ajax> para actualizar partes específicas de la página sin necesidad de recargarla completamente.

Descripción del ejercicio

1. Al seleccionar un equipo en un menú desplegable, se cargan dinámicamente:
   • Los jugadores del equipo.
   • Un gráfico que representa las calidades de los jugadores (en este caso, barras de colores).
2. Utilizaremos componentes como <h:selectOneMenu>, <ui:repeat> y <f:ajax> para realizar actualizaciones parciales en la página.

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 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()));