Search code examples
gwtuibindercellbrowser

set custom style to GWT CellBrowser with UiBinder

I am trying to set a custom style to a GWT CellBrowser widget using UiBinder but I am not able to change any dependent styles (i.e. I can set a different background color for the whole widget but I don't know how to change the style for a selected item)

I tried using "@external" as suggested in this forum for other widgets (for instance here or here) but it did not have any effect, I guess that it is because of the way styles are specified in CellBrowser.

I think that the approach I should take should be more similar to http://crazygui.wordpress.com/2011/11/01/how-to-skin-a-gwt-celltable/. Adapting their code to a CellBrowser instead of a CellTable I'm using: 

@UiField (provided=true) CellBrowser cellbrowser;
interface CellBrowserCompanyUiBinder extends UiBinder<Widget, CellBrowserCompany> {}

public CellBrowserCompany() {

    TreeViewModel tvm = new TreeViewModelImpl();        
    CellBrowser.Resources reso = GWT.create(CellBrowsRes.class);

    cellbrowser = new CellBrowser(tvm, null, reso);
    cellbrowser.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

    initWidget(uiBinder.createAndBindUi(this));
}
public interface CellBrowsRes extends CellBrowser.Resources{
    @Source({CellBrowser.Style.DEFAULT_CSS, "path/to/css.css"})
    BrowserStyle cellbrowserstyle();

    interface BrowserStyle extends CellBrowser.Style{}
}

and I am using the CSS file from GWT SDK as reference.

In the ui.xml file I have, inside a < g:HTMLPanel> tag:

<c:CellBrowser ui:field="cellbrowser" width="100%" height="100%"/>

The code works fine if I don't use "CellBrosRes". So, it works if I replace the line that creates the CellBrowser by this one:

CellBrowser browser = new CellBrowser(tvm, null);

If I use "CellBrosRes" it just ignores my style. I think the problem is in the way I create the Style Resource.

Any help on how to get this working would be appreciated. Let me know if you need additional details or if something is not clear enough.

Thanks

Solution

  • After struggling with it a bit more I decided to create my own widget for it. It can definitely be improved, and I would love to hear suggestions but, by now, it is what I'm using.

    This is the structure: CellBrowser > CellPanel[] > Cell[]

    • The CellBrowser widget is initialized with a Cell Array.

    • These cells are placed on the first CellPanel. For each Cell you can set a Widget to be displayed on it and a CellPanel that will contain its children.

    As the whole thing uses a couple files I've uploaded the code as a google code project