Discussion :

[sheepolata]

Salut,

J'aimerais mettre en évidence des cases d'un tableau en fonction de la valeur contenue (ex : si la valeur est inférieure à 10, mettre un fond rouge pour la case, etc.)

J'ai déjà fait plusieurs recherches et je suis tombé sur cette page. Il existerait deux méthodes pour faire ce que je veux :

1. Utiliser l'opérateur ternaire
   

   Code :

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

   styleClass="#{condition ? style1 : style2}"

2. Utiliser un bean
   

   Code :

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

   styleClass="#{UnBean.theStyleClass}"

   puis
   

   Code :

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

   1
   2
   3
   if (condition1) return "style1";
   else if(condition2) return "style2";
   else return "styleDefaut";

La première solution et pour moi la plus propre sur le plan conception : on ne touche qu'à la partie présentation, donc c'est au niveau de la JSP que l'on doit intervenir. En revanche, avec cette solution, je suis limité à deux styles (ou plus si j'imbrique des opérateur ternaires, mais ça devient illisible).

La deuxième solution me permet d'utiliser autant de style que je souhaite.

Qu'en pensez-vous ? Existe-t-il une autre solution plus élégante ? Sinon, laquelle devrais-je choisir ?

Merci !

[Sniper37]

ça dépend de ton architecture, les deux sont bien, je dirais même que la deuxième est plus lisible et plus facilement ma maintenable.
peut être existe t'il une troisième solution en css 3, mais faut poser la question dans le forum css.

[sheepolata]

D'accord, je vais suivre tes conseils Sniper37. Je ne connais pas les possibilités de CSS3, donc je m'arrêterai sur la deuxième solution.

Merci encore

[sheepolata]

J'ai discuté de mon problème avec un ami et il m'a donné une autre piste : je peux utiliser l'attribut rendered de la balise qui m'intéresse pour afficher une couleur particulière. Il faudrait par conséquent autant de balises que de couleur.

Code xml :

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
30
31
32
33
34
35
<ice:dataTable var="maVar" value="#{monBean.maCollection}">
    <!-- première colonne -->
    <ice:column>
        <f:facet name="header">
            <ice:outputText value="Id" />
        </f:facet>
        <ice:outputText value="#{maVar.id}" />
    </ice:column>
 
 
    <!-- deuxième colonne -->
    <!-- option 1 -->
    <ice:column styleClass="style1" rendered="#{maVar.valeur lt 10 ? true : false}">
        <f:facet name="header">
            <ice:outputText value="Valeur" />
        </f:facet>
        <ice:outputText value="#{maVar.valeur}" />
    </ice:column>
 
    <!-- option 2 -->
    <ice:column styleClass="style2" rendered="#{maVar.valeur ge 10 and maVar.valeur lt 20 ? true : false}">
        <f:facet name="header">
            <ice:outputText value="Valeur" />
        </f:facet>
        <ice:outputText value="#{maVar.valeur}" />
    </ice:column>
 
    <!-- option 3 -->
    <ice:column styleClass="style3" rendered="#{maVar.valeur ge 20 ? true : false}">
        <f:facet name="header">
            <ice:outputText value="Valeur" />
        </f:facet>
        <ice:outputText value="#{maVar.valeur}" />
    </ice:column>
</ice:dataTable>

Je trouve pas ça très classe, mais au moins, ça reste dans la partie présentation. Qu'en pensez-vous ?

[bibou1324]

Une autre solution pour rester côté client : utiliser plusieurs classes de style :

Code :

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

1
2
3
4
<h:inputText id="truc" 
	required="true" 
	value="hello" 
	styleClass="#{myController.isVar1?'status1':''} #{myController.isVar2?'status2':''}"/>

Avec le css :

Code :

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

1
2
3
4
5
6
7
 
.status1{
 	...
}
.status2{
 	...
}

C'est pas l'idéal non plus, le code est un peu lourd ...