1

I'm new to jsf and I can't solve this issue. I have an OutputText inside a rich:dataTable. I want to change the color of this OutputText according to its value (these values are integer). For example, if value is >= 50 then color is red, else color is white. Thanks in advance.

argon argon
  • 159
  • 1
  • 1
  • 8

1 Answers1

5

It's easily done with css, for example:

...
<h:outputText styleClass="#{row.value gt 50 ? 'red' : 'white'}" value="#{row.value}"/>
...

where classes red and white are defined accordingly or directly with style attribute:

...
<h:outputText style="color : #{row.value gt 50 ? 'red' : 'white'};" value="#{row.value}"/>
...

and even simpler markup when color/class is calculated in Java:

...
<h:outputText styleClass="#{row.volumeTag}" value="#{row.value}"/>
...

or in a custom EL function:

...
<h:outputText styleClass="#{my:categorize(row.value)}" value="#{row.value}"/>
...
Community
  • 1
  • 1
mrembisz
  • 12,722
  • 7
  • 36
  • 32
  • That's ok if I have only 2 conditions, but I have 4 conditions and I'd like to keep the xhtml clean. I would prefer a bean method do this. – argon argon Jan 10 '12 at 13:39
  • @argonargon added another option. Here it is somewhat questionable because you may want to avoid mixing colors with your business logic. Opting for business meaningful class name like 'urgent'/'low-volumne' etc could be better. – mrembisz Jan 10 '12 at 13:54
  • to me, the third option is better (I add colors to a propoerty file or class), but this way I have to add a method to the row, which is a "view" bean. The model of this view bean is taken from a web service, so I'd like to avoid it. The best would be to have this logic in the backing bean. – argon argon Jan 10 '12 at 14:03
  • @argonargon Depending on which EL version you are using, you can implement the logic in a static method or service method resulting in `styleClass="#{my:getCategory(row.value)}"` or `styleClass="#{categorizer.evaluate(row.value)}"` – mrembisz Jan 10 '12 at 14:08
  • jsf 1.2 does not support that syntax :( – argon argon Jan 10 '12 at 14:44
  • @argonargon In case of JSF 1.2 the first option is for you. Have a look here: http://stackoverflow.com/questions/7079978/how-to-create-a-custom-el-function – mrembisz Jan 10 '12 at 14:55