Has anybody solved the issue with style dependent names?

I've googled it, and finds a whole lot of confused people, but no answers.

This is what I want to do:

HoverLabel.java {{{ public class HoverLabel extends Composite {

private static HoverLabelUiBinder uiBinder = GWT.create(HoverLabelUiBinder.class);

interface HoverLabelUiBinder extends UiBinder<Widget, HoverLabel> {}

interface Style extends CssResource {
    String over();
}

@UiField Style style;

public HoverLabel(String firstName) {
    initWidget(uiBinder.createAndBindUi(this));
    addDomHandler(new MouseOverHandler() {
        public void onMouseOver(MouseOverEvent event) {
            addStyleDependentName(style.over());
        }
    }, MouseOverEvent.getType());
    addDomHandler(new MouseOutHandler() {
        public void onMouseOut(MouseOutEvent event) {
            removeStyleDependentName(style.over());
        }
    }, MouseOutEvent.getType());
}

} }}}

HoverLabel.ui.xml {{{ <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"&gt; <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <ui:style type="com.google.test.HoverLabel.Style"> .lbl {} .lbl-over { background-color: red; } </ui:style> <g:Label styleName="{style.lbl}" /> </ui:UiBinder> }}}

Note: I don't want to have the style name 'lbl' inside of my Style interface. I want to be able to override the primary style name when referencing to HoverLabel from another widget UIBinder, like this:

{{{ <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"&gt; <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.google.test"> <ui:style type="com.google.test.HoverLabel.Style"> .blueLbl {} .blueLbl-over { background-color: blue; } </ui:style> <g:HTMLPanel> <b:HoverLabel styleName="{style.blueLbl}">Hover to make me blue!</b:HoverLabel> </g:HTMLPanel> </ui:UiBinder> }}}

Why don't you use CSS selector... It's far better that JavaScript :

.blueLbl {} .blueLbl:hover { background-color: blue;
}

Main reason is that it this does not work in IE.

How ever, mouse over was just the simpliest example, for e.g. a "home made" button you have a couple of states that cannot be styled by only using CSS selectors, e.g. mouse over, mouse down, disabled, selected etc.

This does work in IE 9 and for IE9 include the tinny js script of dean edwars. Works fine for me.

thobias is searching for a generic solution for style dependent styles with CssResources.

Many widgets in GWT use this approach and we have no solution at this moment to use CssResources on these widgets.

Writing our own widgets is a solution, but a costly solution since it takes away one of the advantages of GWT in that an application developer does not need to care about browser independence and creating basic widgets for buttons, dropdowns, dialogs, ... .

David, exactly, nice to hear that someone agrees with me. :) I can't really understand why this hasn't been solved you, it's very annoying.

I am also very happy to read this :)

Especially as I really like the CssResource solution (very powerfull) but think we still have some iterations to go to use this "better" and more "friendly" for complex situations.

I just used it again for a client and it's always a bit of a puzzle sometimes, especially using the @ImportWithPrefix and @Import annotations. BTW: the doc might need some more details en concrete examples on this issue, as it's hard to understand in the doc.. (maybe some pointers to sample code would be nice) I am still suprised that not many developers stared issues like these.

Another interesting issue/topic closely related to this one: http://groups.google.com/group/google-web-toolkit/browse_thread/thread/cdc064d24f9ca3be

Issue 6304 has been merged into this issue.

Is there a solution for this? I have the same problem.

Hello all,

I ended up here, I guess it means there's still no solution to work with CssResource and dependent style names together. :-/

The solution is not using dependent styles. I used them a lot, but not needed anymore with the current CSSResource construction.

Sure, but most standard widgets in GWT use style dependent naming. I guess GWT 3.0 will clear this up so that we can start using CssResources (or something even better) with all widgets properly ?

Issue tracked moved to github, see https://github.com/gwtproject/gwt/issues