HOWTO: make buttons/comboxes be readable in a tableview

Find out how to get things done with Servoy. Post how YOU get things done with Servoy

HOWTO: make buttons/comboxes be readable in a tableview

Postby ROCLASI » Sat Nov 28, 2009 2:47 pm

There is an issue on the Mac when you are using comboboxes or buttons in a table view. When you select a row then these objects become unreadable because the text turns white as it would with a normal field.

Image

The text becomes white because the highlight color is too dark and therefore the LAF will switch the text from black to white.
You could of course use a lighter row color to work around this problem but that is a workaround.
Since a couple of versions in Servoy the rowBGCcolorCalculation event will pass the type of object a column is so you can act accordingly. So we could have a method that would give a different row color back when the element is a button or a combobox.
The following method does exactly that.

Code: Select all
/**
* Calculate the row background color.
*
* @param {Number} index row index
* @param {Boolean} selected is the row selected
* @param {String} elementType element type
* @param {String} dataProviderID element data provider
* @param {String} formName form name
* @param {JSRecord} record selected record
* @param {Boolean} edited is the record edited
*
* @returns {Color} row background color
*
*/
function calculateRowBGColor(index, selected, elementType, dataProviderID, formName, record, edited) {
   var color = "#FFFFFF";
   if ( selected ) {
      // The selected row
      if ( edited ) {
         color = "#ffffff"; // field is edited, use your favorite editable field background color
      } else if ( application.getOSName() == "Mac OS X" &&
            forms[formName].controller.view == 3 &&
            (elementType == "COMBOBOX" || elementType == "BUTTON") ) {
         color = "#FFFFFF"; // or use your favorite (light) color that keeps the combobox/button text black and readable.
      } else {
         color = "#0000FF"; // or use your favorite highlight color
      }
   } else if ( index%2 == 0 ) {
      // even row color
      color = "#EDF3FE";
      // odd row will use the standard color defined at the top of this method
   }
   return color;
}


You can simply attach this global method to any (listview/tableview) form in your solution that you want to use it on.
The code will know if the form is a table view or not so it will only apply the exception on table views.
It will also know if you are on a Mac so other platforms won't see this behavior.
This is the result:

Image


And here when you edit a field:

Image


Enjoy!
Robert Ivens
SAN Developer / Servoy Valued Professional / Servoy Certified Developer

ROCLASI Software Solutions / JBS Group, Partner
Mastodon: @roclasi
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5438
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: HOWTO: make buttons/comboxes be readable in a tableview

Postby Jan Aleman » Sat Nov 28, 2009 4:54 pm

Great tip for all Mac users!
Jan Aleman
Servoy
Jan Aleman
 
Posts: 2083
Joined: Wed Apr 23, 2003 9:49 pm
Location: Planet Earth

Re: HOWTO: make buttons/comboxes be readable in a tableview

Postby Harjo » Sat Nov 28, 2009 5:29 pm

Wonderfull! :-)
Harjo Kompagnie
ServoyCamp
Servoy Certified Developer
Servoy Valued Professional
SAN Developer
Harjo
 
Posts: 4321
Joined: Fri Apr 25, 2003 11:42 pm
Location: DEN HAM OV, The Netherlands

Re: HOWTO: make buttons/comboxes be readable in a tableview

Postby ROCLASI » Sat Nov 28, 2009 5:57 pm

Here is an updated method that makes the background color of the button and combobox match up with the odd/even row color (these are usually very light).
And all the color codes are now in variables.

Code: Select all
function calculateRowBGColor(index, selected, elementType, dataProviderID, formName, record, edited) {
    var selectColor    = "#0000FF",
        oddRowColor    = "#FFFFFF",
        evenRowColor   = "#EDF3FE",
        editFieldColor = "#FFFFFF";
    if ( selected ) {
        if ( edited ) {
            return editFieldColor;
        } else if ( application.getOSName() == "Mac OS X" &&
                forms[formName].controller.view == 3 &&
                (elementType == "COMBOBOX" || elementType == "BUTTON") ) {
            if ( index%2 == 0 ) {
                return evenRowColor;
            } else {
                return oddRowColor;
            }
        } else {
            return selectColor;
        }
    } else if ( index%2 == 0 ) {
        return evenRowColor;
    } else {
        return oddRowColor;
    }
}
Robert Ivens
SAN Developer / Servoy Valued Professional / Servoy Certified Developer

ROCLASI Software Solutions / JBS Group, Partner
Mastodon: @roclasi
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5438
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium


Return to How To

Who is online

Users browsing this forum: No registered users and 7 guests