Using style dependent names with UIBinder, how?

[dankurka]

Originally reported on Google Code with ID 4746

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">
<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">
<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> 
}}}

Reported by thobias.karlsson on 2010-03-12 20:46:32

[dankurka]

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

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

Reported by olivier.monaco@free.fr on 2010-03-13 10:28:16

[dankurka]

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. 

Reported by thobias.karlsson on 2010-03-13 17:41:03

[dankurka]

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

Reported by post2edbras on 2010-11-26 15:28:47

[dankurka]

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, ...
. 

Reported by david.nouls on 2010-11-26 15:41:27

[dankurka]

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.

Reported by thobias.karlsson on 2010-11-26 16:11:42

[dankurka]

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

Reported by post2edbras on 2010-11-26 16:40:39

[dankurka]

Issue 6303 has been merged into this issue.

Reported by stephen.haberman on 2011-12-17 08:21:04

[dankurka]

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

Reported by galletti.matteo on 2012-03-29 16:18:28

[dankurka]

Hello all,

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

Reported by charles@guide2com.fr on 2013-12-14 13:26:43

[dankurka]

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

Reported by post2edbras on 2013-12-14 15:58:40

[dankurka]

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 ?

Reported by david.nouls on 2013-12-15 12:29:31