gwt - How do you change the mouse over highlighting?

Question

In GWT, I am using CellTable.

When you mouse over the CellTable it highlights each row.

How do change the behavior of the highlighting from the mouse over? Specifically:

• change the color of highlighting
• disable/enable
• make it highlight only the specific grid item at your cursor (instead of the entire row)

( The current hack I have is to create a bunch of 1 column wide CellTables and add them to a VerticalPanel layout... creating the illusion that there is one CellTable and it highlights each grid according to your cursor. Is this bad? Why? performance? )

Answer 1

You will notice the CellTable uses a ResourceBundle, which means all the css styles get obfuscated ... this makes it more difficult to override styles.

The CellTable constructor will actually allow you to override the default ResourceBundle. So first, you need to create your own resource bundle like this:

public interface CellTableResources extends Resources {

        public CellTableResources INSTANCE =
                GWT.create(CellTableResources.class);

        /**
         * The styles used in this widget.
         */
        @Source("CellTable.css")
        CellTable.Style cellTableStyle();
}

Then you need to create your own CSS file. I recommend copying the CellTable style directly into your project and use that as a starting point. You can find it here: http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/cellview/client/CellTable.css

Make sure the style is injected first, and then you just feed it into the CellTable's constructor like this:

   CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
   myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);

Specifically, you'll want to tweak these styles:

• cellTableKeyboardSelectedRow
• cellTableKeyboardSelectedRowCell
• cellTableSelectedRow
• cellTableSelectedRowCell
• cellTableKeyboardSelectedCell

It is important to note that the cell table differentiates between the 'selected row' and the 'keyboard selected row'. The selected row is the actual row selected (ie via SelectionModel). The keyboard selected row refers to what is highlighted when the user is pressing the up / down key, but does not mean the row is actually selected (if that makes sense).