Ask Reuben

Change Background Color of Alternate Rows

How do you make the background color of rows in a DISPLAY ARRAY + TABLE different colors so that it is easier to read across rows of data?

When viewing data in a DISPLAY ARRAY + TABLE it can be difficult to read across rows and errors may occur if you accidentally skip up or down a row whilst reading from left to right.

Some of you maybe old enough to remember green bar paper (alternatively known as gold bar or zebra paper).  That made it easy to read as you read across either a white row or a different coloured alternate row, typically green or gold, hence the name green or gold bar.  The alternating bands of color kept your eyes in the same row.

Using Presentation Styles it is possible to do a similar thing in Genero screens.  It makes use of what is called a pseudo-selector, that is a selector that is neither a widget or a style, but is a style selector that can be used to apply a presentation style if a certain condition is fulfilled.  In this case we can use the “odd” and/or “even” pseudo-selector to apply a presentation style if the row is an odd or even row.

I recommend two things :-

  • you only need to only apply a style to even rows.  For odd rows I suggest leaving the row the system default.
  • make use of the “systemAlternateBackground” system color available for both GDC and GBC + Universal Rendering

So I normally end up in my .4st file the following entry …

 <Style name="Table:even">
    <StyleAttribute name="backgroundColor" value="systemAlternateBackground"></StyleAttribute>  
 </Style> 

Why I suggest applying to even rows only, is that it means that the odd rows are left as the system default.  If there is only one row then it will be displayed in the system default colours.

Why I recommend using the system colour,  “systemAlternateBackground” is that that means as the user changes themes, or O/S change default theme as it evolves over time, the colour should still be appropriate. As you can hopefully see in the GBC / Universal Rendering screenshot below, the systemAlternateBackground colour is a little more contrasting than the GDC (OSX) screenshot at the top of the page.

Interestingly the quality of monitor can also have an effect, I run a triple-monitor setup from my Mac with one monitor being HDMI and the other VGA, the alternating grey as used in the GDC is more visible in my device screen and HDMI monitor, but if I drag across to the VGA monitor it is barely discernible, so make sure you test on your target user device and not your development environment