Comment by thobias.karlsson:

Has anybody solved the issue with style dependent names?

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




For more information:
http://code.google.com/p/google-web-toolkit/wiki/CssResource

--
http://groups.google.com/group/Google-Web-Toolkit-Contributors

Reply via email to