CellTable odd/even row styles

[Yaakov]

Hi,

Is there a way to override the default odd/even row styles in a
CellTable?

I've tried to do this through CSS rules, but it seems like something
deep down in the code is overriding it or wiping my style altogether
to be more accurate.

I tried this (keep in mind that I have a SimplePanel wrapping the
table with a style applied to the SimplePanel called
'tablePlaceholder');

.tablePlaceholder thead tr {
background: none repeat scroll 0 0 #FFFFFF !important;
}

.tablePlaceholder thead tr td {
border: 2px solid #FFFFFF;
}

When I use Firebug to see what styles got applied, those styles are
gone, something wiped those styles and replaced it with:
on <tr>:
background: none repeat scroll 0 0 #F3F7FB;

on a <td>:
border: 2px solid #F3F7FB;

Any help would be appreciated!

-Yaakov.

[Raphaël Brugier]

The good way to override the style of a cellTable is to pass a Ressource to the constructor.
See the Expense example

-Raphaël.

[Jeff Larsen]

You'll notice in CellTable there are some inner classes. One of those classes is Style and the other is Resources. 

Style is the class that has the styles which are used, Resources maps that class to its css value.

Inside Style you'll notice two methods called cellTableEvenRow and cellTableOddRow. Those are the two classes you're going to care about. 

If you want completely different styles, you can implement your own style sheet (just copy the Style.css from com.google.gwt.cellview.client package and change the values inside the classes). Or if you just want to override the alternating views you can do something like.

public interface MyResources extends CellTable.Resources{

    @Source({CellTable.Style.DEFAULT_CSS, "MyCssFile.css"})

    CellTable.Style getStyle();

}

and in MyCssFile.css just implement .cellTableEvenRow and cellTableOddRow.

Then make sure to pass in MyResources into the constructor of the CellTable and you should have the styles you're looking for.

[Yaakov Chaikin]

Ok, I did that and it's still showing the default styles.

To be clear, here is what I did:

SystemStatusResources.java
-----------------------------
// import statements
...

public interface SystemStatusResources extends CellTable.Resources
{
@Source ({CellTable.Style.DEFAULT_CSS, "systemStatus.css"})
CellTable.Style getStyle();
}
-----------------------------

The 'systemStatus.css' file sits in the same package as the
SystemStatusResources.java and looks like this:
-----------------------------
.cellTableEvenRow {
background: #ffffff;
}

.cellTableOddRow {
background: #ffffff;
}

.cellTableOddRowCell {
border: selectionBorderWidth solid #ffffff;
}

.cellTableEvenRowCell {
border: selectionBorderWidth solid #ffffff;
}
-----------------------------

Inside the SystemStatusListView.java:
-----------------------------
...
...
CellTable.Resources resources = GWT.create(SystemStatusResources.class);
CellTable<List<String>> dataTable = new CellTable<List<String>>(0, resources);
...
-----------------------------

The end result is that the same default color shows up for the odd rows.

Any ideas what I am doing wrong?

Thanks,
Yaakov.

> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-tool...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.
>

[Jeff Larsen]

Have you tried looking at the styles with firebug? Are they there and being overwritten or are they not appearing at all?

[Thomas Broyer]

The obfuscated names of the CSS classes are based on the return type of the ClientBundle method and the method name in the CssResource.

Here, because your SystemStatusResources uses CellTable.Style, it will use the same CSS class names as the default resources' style. This means that if you use CellTable with the default resources elsewhere in your app, you'll have a "conflict".

Declare an interface extending CellTable.Style and make SystemStatusResources return that type (return type covariance FTW), and now you'll have CSS class names specific to SystemStatusResources.

See http://code.google.com/p/google-web-toolkit/issues/detail?id=6144

[Yaakov Chaikin]

Sorry I didn't reply right away... Didn't have access to the app for
the last few days... So, I just checked and the styles that I set are
NOT there at all, i.e., they are not appearing at all.

What am I doing wrong there?

-Yaakov.

On Wed, Mar 16, 2011 at 5:09 PM, Jeff Larsen <lars...@gmail.com> wrote:
> Have you tried looking at the styles with firebug? Are they there and being
> overwritten or are they not appearing at all?
>

[Yaakov Chaikin]

Ok, I see. It works now and based on the code to which you provided
the link, here is the change that had to be made:

Rename the getStyle() method to cellTableStyle() and put @Override
just to make it clearer that we are overriding this interface method
with our own.

That's it!

Thanks!

-yaakov.