Utiliser un styleClass dynamique

Version imprimable

02/03/2010, 14h12
sheepolata

Utiliser un styleClass dynamique
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:
  
  styleClass="#{condition ? style1 : style2}"
2. Utiliser un bean
  
  Code:
  
  styleClass="#{UnBean.theStyleClass}"
  
  puis
  Code:
  
  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 !
02/03/2010, 14h32
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.
02/03/2010, 15h33
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 :)

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:

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 ?

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

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

1 2 3 4 5 6 7 .status1{ ... } .status2{ ... }
C'est pas l'idéal non plus, le code est un peu lourd ...