Found in GWT Release: GWT 2.2.0

Encountered on OS / Browser: Windows XP Pro SP3/ All browsers.

Detailed description (please be as specific as possible): If I use in my application two CellTables with each CellTable using different custom resources, these resources (at least the generated CSS) get mixed. For example if I want a table with red cell borders and one with blue cell borders it is not possible. Both cell table will have cell borders of the same color.

Shortest code snippet which demonstrates issue:

public class Test1 implements EntryPoint {

private static class Contact { private final String name;

public Contact(String name) {
  this.name = name;
}

}

private static List<Contact> CONTACTS = Arrays.asList(new Contact("John"), new Contact("Mary"), new Contact("Zander"));

public interface CellTableResources extends CellTable.Resources { @Source("CellTable.css") Style cellTableStyle(); }

public interface CellTableResources2 extends CellTable.Resources { @Source("CellTable2.css") Style cellTableStyle(); }

public void onModuleLoad() {

CellTableResources resources = GWT.create(CellTableResources.class);
CellTableResources2 resources2 = GWT.create(CellTableResources2.class);

CellTable<Contact> table = new CellTable<Contact>(Integer.MAX_VALUE, resources);
CellTable<Contact> table2 = new CellTable<Contact>(Integer.MAX_VALUE, resources2);

ListDataProvider<Contact> dataProvider = new ListDataProvider<Contact>();

dataProvider.addDataDisplay(table);
dataProvider.addDataDisplay(table2);

  TextColumn<Contact> nameColumn = new TextColumn<Contact>() {
    @Override
    public String getValue(Contact object) {
      return object.name;
    }
  };
  table.addColumn(nameColumn, "Name");
  table2.addColumn(nameColumn, "Name");


List<Contact> list = dataProvider.getList();
for (Contact contact : CONTACTS) {
  list.add(contact);
}

RootPanel.get("main").add(table);
RootPanel.get("main").add(table2);

} }

CellTable.css is a copy of the default CellTable.css where I've just modified .cellTableCell by this to have a blue border: .cellTableCell { border: 1px solid blue !important; }

CellTable2.css is a copy of the default CellTable.css where I've just modified .cellTableCell by this to have a red border: .cellTableCell { border: 1px solid red!important; }

Workaround if you have one: None found.

Note : If I look in Firebug at the generated CSS applied to a cells I can see that I have the same class defined twice.

.GALD-WOHC { border: 1px solid blue !important; }

.GALD-WOHC { border: 1px solid red !important; }

Maybe with an attached screenshot it's clearer.

The CSS className is computed (Adler32 checksum) based on the interface name (before the dash) and method name (after the dash). That's why you have the same class name twice, and this is how GWT can implement @ImportedWithPrefix/@Import and @Shared features on CssResource-s.

You have to extend the Style interface in each extended Resources interface so the computed class names are different.

I discovered this by reading the code though (in CssResourceGenerator); documentation should definitely be improved!

I'm having this issue - I have a bunch of celltables, and in one instance i definitely need a variant on the css, that results in some sort of collision (eg whatever is the latest version, affects the other cell tables.

could you elaborate on "extend the Style interface" or point me to the docs where I probably should already have looked?

It seems you just have to do something like this :

interface TableResources extends CellTable.Resources { @Source({"myCellTable.css"}) TableStyle cellTableStyle();

}

interface TableStyle extends CellTable.Style {}

Comment deleted

I am not even able to us the same table resource in two tables. Though one is inheriting the custom CSS defined by me, second Cell Table takes the default CSS. public interface TableRes extends CellTable.Resources {

@Source({CellTable.Style.DEFAULT_CSS,"mycustomtable.css"}) CellTableStyle cellTableStyle();

public interface CellTableStyle extends CellTable.Style {};

}

And this is how I consumed the resource defined above

CellTable myTable1 = new CellTable(Integer.MAX_VALUE, ViewUtil.getPracTableCssRes());

CellTable myTable2 = new CellTable(Integer.MAX_VALUE, ViewUtil.getPracTableCssRes());

though myTable1 takes the style defined in custom css, myTable2 takes default css

What classname has your tables? Try to remove default css, but custom css must contain all default css-classname.

public interface TableRes extends CellTable.Resources {

@Source({"mycustomtable.css"}) CellTableStyle cellTableStyle();

public interface CellTableStyle extends CellTable.Style {};

}

@kohli.Vikram1982: if you still have a problem, let's discuss it in the Google Group (but first try to "debug" it using your browser's developer tools examining the CSS being applied and where it comes from)

Hi Thomas, I tried your solution but it seems that it does not work for me. I have two screens containing a celltable that are declared like this: first screen:

public interface ECCellTableRes extends CellTable.Resources
{
@Source("ECCellTableWidget.css")
ECCellTableStyle cellTableStyle();

public interface ECCellTableStyle extends CellTable.Style
{
}
}

second screen: public interface TooltipTableRes extends CellTable.Resources { /** * Get the style */ @Source("TooltipTable.css") TooltipStyle cellTableStyle();

public interface TooltipStyle extends CellTable.Style
{
}
}

if i go in the first screen first, css is correct, but if i go on the second screen and i come back on the first one, i have the css of the second screen applied. Any idea?

Issue 8358 has been merged into this issue.

Hi there,

I've managed to get it working. As t.broyer wrote I've changed the interface name.

Before:

public interface NxoCellTableResources extends CellTable.Resources {
    @Source({ CellTable.Style.DEFAULT_CSS, "NxoCellTable.css" })
    public CellTable.Style cellTableStyle();
}

public interface NxoCellTableThinResources extends CellTable.Resources {
    @Source({ CellTable.Style.DEFAULT_CSS, "NxoCellTable.css", "NxoCellTableThin.css" })
    public CellTable.Style cellTableStyle();
}

After:

public interface NxoCellTableResources extends CellTable.Resources {
    public interface NormalStyle extends CellTable.Style {}

    @Source({ CellTable.Style.DEFAULT_CSS, "NxoCellTable.css" })
    public NormalStyle cellTableStyle();
}

public interface NxoCellTableThinResources extends CellTable.Resources {
    public interface ThinStyle extends CellTable.Style {}

    @Source({ CellTable.Style.DEFAULT_CSS, "NxoCellTable.css", "NxoCellTableThin.css" })
    public ThinStyle cellTableStyle();
}

So, I've added two new inner interfaces. And now it's ok.

In your case I would say it should be like this:

public interface CellTableResources2 extends CellTable.Resources { public interface Style2 extends Style {}

@Source("CellTable2.css")
Style2 cellTableStyle();

}

The first one can stay unchanged.

Many thanks to t.broyer and consros for a solution. I was having this same issue with DataGrid styles.