Forum:

GWT ToggleButton with UiBinder template does not work

Greenhorn

Posts: 1

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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 styleName="{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>