GWT ToggleButton with UiBinder template does not work

I have following UiBinder template for a simple module. But when i run it, it does not style the toggle buttons as expected. For example color, borders, padding or margins do not seem to change when i move mouse on top of buttons. Am i missing something simple?

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

.demo-ToggleButton
{
    border                      :    1px solid;
    cursor                      :    hand;
    cursor                      :    pointer;
    margin                      :    3px 1px;
    padding                     :    1px 10px;
}
.demo-ToggleButton-up-hovering
{
    padding                     :    0px 9px;
    color                       :    #555;
    border-top                  :    4px solid;
    border-left                 :    4px solid;
    border-right                :    4px solid;
    border-bottom               :    4px solid;
}
.demo-ToggleButton-down, .demo-ToggleButton-down-hovering
{
    padding                     :    4px 9px;
    border-top                  :    4px solid;
    border-left                 :    4px solid;
    border-right                :    4px solid;
    border-bottom               :    4px solid;
}

        .eastPanel {
            background-color: #F60;
        }

        .leftBar {
            margin-left: 10px;
            margin-top: 4px;
            margin-right: 10px;
            margin-bottom: 4px;
            height: 100%;
            border: 2px;
        }

        .leftButton {

        }

        .contentArea {
            margin-left: 0px;
            margin-top: 4px;
            margin-right: 4px;
            margin-bottom: 4px;
            height: 100%;
            width: 99%;
        }

        .northPanel {
            background-color: #39F;
        }

        .southPanel {
            background-color: #99C;
        }

        .centerPanel {
            background-color: #FFC;
        }

        .messageLabel {
            margin-left: 10px;
        }
    </ui:style>


    <g:DockLayoutPanel unit='EM'>

        <g:north size='2'>
            <g:FlowPanel>
                <g:Label>This is the NORTH panel</g:Label>
            </g:FlowPanel>
        </g:north>



        <g:west size='10'>
            <g:FlowPanel styleName="{style.leftBar}" width="">

 <g:PushButton ui:field='dashboardButton' enabled='true' styleName="{style.demo-ToggleButton}">

   <g:upFace styleName="{style.demo-ToggleButton}">Dashboard</g:upFace>   
   <g:upHoveringFace styleName="{style.demo-ToggleButton-up-hovering}">sss</g:upHoveringFace>  
   <g:downFace styleName="{style.demo-ToggleButton-down}"/>   
   <g:downHoveringFace st开发者_StackOverflowyleName="{style.demo-ToggleButton-down-hovering}"/>

 </g:PushButton>


                <g:ToggleButton ui:field='projectsButton' styleName="{style.demo-ToggleButton}">Projects</g:ToggleButton>
                <g:ToggleButton ui:field='activitiesButton' styleName="{style.demo-ToggleButton}">Activities</g:ToggleButton>
                <g:ToggleButton ui:field='goalsButton' styleName="{style.demo-ToggleButton}">Goals</g:ToggleButton>
                <g:ToggleButton ui:field='tagsButton' styleName="{style.demo-ToggleButton}">Tags</g:ToggleButton>
            </g:FlowPanel>
        </g:west>


        <g:center>

            <g:DockLayoutPanel unit='EM'>

                <g:center>
                    <g:SimplePanel ui:field='contentPanel' />
                </g:center>

                <g:south size='2'>
                    <g:VerticalPanel>
                        <g:Label styleName="{style.messageLabel}">message area</g:Label>
                    </g:VerticalPanel>
                </g:south>

            </g:DockLayoutPanel>
        </g:center>

    </g:DockLayoutPanel>


</ui:UiBinder>

When changing the state or hovering a toggle button, GWT will add secondary styles to the element. These styles are standard, and even if you override the primary style (like you did with demo-ToggleButton), GWT will still use the same secondary styles.

So you would see something like this:

<div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up-hovering">

Note that even if you use your own primary style, you will still see GWT add .gwt-ToggleButton-up-hovering ... it would not know to maintain your "demo" prefix:

<div tabindex="0" class="demo-ToggleButton gwt-ToggleButton-up-hovering">

So in your UI Binder's style section, you should add the following styles:

@external gwt-ToggleButton-up, gwt-ToggleButton-down, gwt-ToggleButton-up-hovering, gwt-ToggleButton-down-hovering;
.gwt-ToggleButton-up { }
.gwt-ToggleButton-down { }
.gwt-ToggleButton-up-hovering { }
.gwt-ToggleButton-down-hovering { }

Make sure to declare these as "external" as noted above, which will prevent them from being obfuscated by the GWT compiler. This should allow you to override the default GWT styles.

When trying to override .gwt-styles from UiBinder the most simple fix is to write:

<g:whateverWidget stylePrimaryName='{desiredStyle}'></g:whateverWidget>

This tells GWT that this new style that you are specifying is the first and primary style to be looked at, and not the .gwt-style which is by default the primary and most important.