CellTables and css (GWT)

Question

Could someone help me in setting the background of a CellTable row please, I've been trying all night to do it and keep failing and it's driving me mad. I've tried using a call to setRowStyles() but that doesn't seem to be working and I've read that you can't change the style for a CellTable once a style has been set - as the default one is set. Then I tried constructing a CellTable with my own interface CellTableResources as seen on a post on this exact subject BUT that gave me error messages about unobfuscated ccs elements.... which my css not being obfuscated is an obvious error message. Now I don't know what to try and I am officially STUCK.

I've been reading about this @external and it didn't seem to help... not even sure where the external bit is supposed to go... I guess in the css but as usual with when stuck I'm trying anything!

TonyK

Answer 1

I know how frustrating this can be, I've been in the same place. I've included all the steps that I used to get this working. But it sounds like you are almost there, so you will probably not need all of these.

As you mentioned to use your own css class names you must implement com.google.gwt.user.cellview.client.CellTable.Resources and pass an instance of your class to the CellTable constructor.

CellTable Declaration

CellTable<MyData> myCellTable = new CellTable<MyData>(10, MyResources.INSTANCE);

The implementation of Resources also requires an instance of com.google.gwt.resources.client.ImageResource and com.google.gwt.user.cellview.client.CellTable.Style, the class that will provide your css class names. To make things simple here are stub implementations of Resources, ImageResource, and Style that do nothing but provide strings as style names. In the end these can come from ClientBundle but it is not a requirement.

Style Stub (Using String Literals)

import com.google.gwt.user.cellview.client.CellTable.Style;

public class MyStyle implements Style {

    public static final MyStyle INSTANCE = new MyStyle();

    @Override public boolean ensureInjected() {

        return false;
    }

    @Override public String cellTableCell() {

        return "myCssClassName";
    }

    @Override public String cellTableEvenRow() {

        return "myCssClassName";
    }

    @Override public String cellTableEvenRowCell() {

        return "myCssClassName";
    }

    @Override public String cellTableOddRow() {

        return "myCssClassName";
    }

    @Override public String cellTableOddRowCell() {

        return "myCssClassName";
    }

    @Override public String cellTableFirstColumn() {

        return "myCssClassName";
    }

    @Override public String cellTableFirstColumnFooter() {

        return "myCssClassName";
    }

    @Override public String cellTableFirstColumnHeader() {

        return "myCssClassName";
    }

    @Override public String cellTableFooter() {

        return "myCssClassName";
    }

    @Override public String cellTableHeader() {

        return "myCssClassName";
    }

    @Override public String cellTableHoveredRow() {

        return "myCssClassName";
    }

    @Override public String cellTableHoveredRowCell() {

        return "myCssClassName";
    }

    @Override public String cellTableKeyboardSelectedCell() {

        return "myCssClassName";
    }

    @Override public String cellTableKeyboardSelectedRow() {

        return "myCssClassName";
    }

    @Override public String cellTableKeyboardSelectedRowCell() {

        return "myCssClassName";
    }

    @Override public String cellTableLastColumn() {

        return "myCssClassName";
    }

    @Override public String cellTableLastColumnFooter() {

        return "myCssClassName";
    }

    @Override public String cellTableLastColumnHeader() {

        return "myCssClassName";
    }

    @Override public String cellTableLoading() {

        return "myCssClassName";
    }

    @Override public String cellTableSelectedRow() {

        return "myCssClassName";
    }

    @Override public String cellTableSelectedRowCell() {

        return "myCssClassName";
    }

    @Override public String cellTableSortableHeader() {

        return "myCssClassName";
    }

    @Override public String cellTableSortedHeaderAscending() {

        return "myCssClassName";
    }

    @Override public String cellTableSortedHeaderDescending() {

        return "myCssClassName";
    }

    @Override public String cellTableWidget() {

        return "myCssClassName";
    }

    @Override public String getName() {

        return "myCssClassName";
    }

    @Override public String getText() {

        return "myCssClassName";
    }
}

ImageResource Stub

import com.google.gwt.resources.client.ImageResource;

class MyImageResource implements ImageResource {

    public static final MyImageResource INSTANCE = new MyImageResource();

    @Override public int getHeight() {

        return 0;
    }

    @Override public int getLeft() {

        return 0;
    }

    @Override public String getName() {

        return "";
    }

    @Override public int getTop() {

        return 0;
    }

    @Override public String getURL() {

        return "";
    }

    @Override public int getWidth() {

        return 0;
    }

    @Override public boolean isAnimated() {

        return false;
    }
}

Resource Stub

import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.cellview.client.CellTable.Resources;
import com.google.gwt.user.cellview.client.CellTable.Style;

public class MyResources implements Resources {

    public static final MyResources INSTANCE = new MyResources();

    @Override public ImageResource cellTableFooterBackground() {

        return MyImageResource.INSTANCE;
    }

    @Override public ImageResource cellTableHeaderBackground() {

        return MyImageResource.INSTANCE;
    }

    @Override public ImageResource cellTableLoading() {

        return MyImageResource.INSTANCE;
    }

    @Override public ImageResource cellTableSelectedBackground() {

        return MyImageResource.INSTANCE;
    }

    @Override public ImageResource cellTableSortAscending() {

        return MyImageResource.INSTANCE;
    }

    @Override public ImageResource cellTableSortDescending() {

        return MyImageResource.INSTANCE;
    }

    @Override public Style cellTableStyle() {

        return MyStyle.INSTANCE;
    }
}

So, at this point you should have a Cell Tabula Rasa with no style and you should be able to inspect your CellTable element in the browser and see myCssClassName as the ubiquitous CSS class name, unobfuscated.

If at this point you link to a style sheet using one of the traditional methods you should be able to set the "myCssClassName" Strings to correspond with your specific style sheet.

Style Sheet Link

<link href="myStyleSheet.css" rel="stylesheet" type="text/css">

Now, if you want to inject your styles using ClientBundle you have a few additional steps.

First, be sure that you are injecting your style sheet at some point; this is real easy to forget. A simple place is in your module's EntryPoint that way you can be sure it is being called.

CssResource Injection

MyClientBundle.INSTANCE.myCssResource().ensureInjected();

Finally use your CssResource to provide the names to the Style implementation from earlier. Whether or not the CSS class names are being obfuscated they should be injected and using the correct name this way.

ClientBundle Stub

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;

public interface MyClientBundle extends ClientBundle {

    public static final MyClientBundle INSTANCE = GWT.<MyClientBundle>create(MyClientBundle.class);

    @Override @Source("path/to/myStyleSheet.css") MyCssResource myCssResource();
}

CssResource Stub

import com.google.gwt.resources.client.CssResource;

public interface MyCssResource extends CssResource {

    @ClassName("myCssClassName") String myCssClassName();

    @ClassName("myOtherName") String myOtherCssClassName();
}

Style Sheet Stub

.myCssClassName {
    background-color: magenta;
    /* Yes, you will see when it is working. */
}

@external .myOtherName {
    background-color: yellow;
}

Style Stub (Using ClientBundle)

import com.google.gwt.user.cellview.client.CellTable.Style;

public class MyStyle implements Style {

    public static final MyStyle INSTANCE = new MyStyle();

    @Override public boolean ensureInjected() {

        return false;
    }

    @Override public String cellTableCell() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableEvenRow() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableEvenRowCell() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableOddRow() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableOddRowCell() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableFirstColumn() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableFirstColumnFooter() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableFirstColumnHeader() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableFooter() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableHeader() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableHoveredRow() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableHoveredRowCell() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableKeyboardSelectedCell() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableKeyboardSelectedRow() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableKeyboardSelectedRowCell() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableLastColumn() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableLastColumnFooter() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableLastColumnHeader() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableLoading() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableSelectedRow() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableSelectedRowCell() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableSortableHeader() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableSortedHeaderAscending() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableSortedHeaderDescending() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String cellTableWidget() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String getName() {

        return MyCssResource.INSTANCE.myCssClassName();
    }

    @Override public String getText() {

        return MyCssResource.INSTANCE.myCssClassName();
    }
}

That should be it. I'm sure there are other ways to do the same thing but this has worked well for me so far. Good luck and I hope this saves you some time.