Open source et architecture logicielle

JSF 2 : Repérer les lignes paires et impaires dans un tableau

par

autran

, 14/11/2016 à 18h45 (1462 Affichages)

Lorsque l'on affiche un tableau dans une IHM web, il est intéressant de pouvoir contraster une ligne sur 2 afin de gagner en confort de lecture. Pour parvenir à ce résultat il suffit d'applique une classe CSS différente selon que la ligne est paire ou impaire.

Le célèbre composant dataTable du framework JSF2 permet de aisément de repérer les lignes paires et impaires du tableau qu'il affiche. Malheureusement, le tag <h:dataTable> ne permet de gérer que les tableaux dont on connaît par avance le nombre de colonnes.

Aussi, pour les tableaux dont on ne connaît pas à l'avance la dimension, la solution d'affichage passe souvent par une construction HTML classique et l'emploi de 2 tags <ui:repeat> imbriqués. Mais même dans ce cas, il est possible de différencier les lignes paires et impaires sans avoir recours à du Jquery.
En effet, <ui:repeat> offre un objet varStatus qui propose 2 méthodes de traitement de la parité : even et odd. Chacune d'entre-elle valant true selon que l'indice de la boucle courante est paire ou impaire. La différentiation basé sur la primalité se fera via l'attribut rendered du tag <ui:fragment>.

Voici un exemple de code qui illustre ce traitement des lignes d'un tableau de dimensions inconnues*:

Code java :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"> 
 
	<h:head>
		<link type="text/css" rel="stylesheet" href="css/table-style.css" />
	</h:head> 
	<h:body> 
		<title>Traitement des tableaux en JSF</title>
		<h1>Traitement des tableaux en JSF</h1>
		<table class="table">
			<ui:repeat var="tab" value="#{matrixBean.array}" varStatus="index">
				<ui:fragment rendered="#{index.odd}">
					<tr class="tr-odd">
						<ui:repeat var="cell" value="#{tab}" varStatus="status">
						     <td class="table-cell">#{cell}</td>
						</ui:repeat>
					</tr>
				</ui:fragment>
				<ui:fragment rendered="#{index.even}">
					<tr class="tr-even">
						<ui:repeat var="cell" value="#{tab}" varStatus="status">
						     <td class="table-cell">#{cell}</td>
						</ui:repeat>
					</tr>
				</ui:fragment>
			</ui:repeat>
		</table>

Dans la mesure où je viens d'être confronté à cette problématique et que je n'ai rien trouvé sur le net pour y répondre en restant en JSF2 strict, je propose (en toute modestie) cette solution. N'hésitez pas à réagir si vous avez des solutions qui seraient plus pertinentes que celle que je propose.