Question

我有一个简单模块的UiBinder模板。但是当我运行它时，它没有按预期设置切换按钮的样式。例如，当我在按钮顶部移动鼠标时，颜色，边框，填充或边距似乎不会改变。我错过了一些简单的东西吗？

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

Answer 1

更改状态或悬停切换按钮时，GWT会向元素添加辅助样式。这些样式是标准的，即使你覆盖主要样式（就像你使用demo-ToggleButton一样），GWT仍将使用相同的辅助样式。

所以你会看到这样的东西：

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

请注意，即使您使用自己的主要样式，您仍会看到GWT添加 .gwt-ToggleButton-up-hovering ...它不知道维护您的“demo”前缀：

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

因此，在UI Binder的样式部分中，您应该添加以下样式：

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

确保将这些声明为“外部”，如上所述，这将防止GWT编译器对它们进行模糊处理。这应该允许您覆盖默认的GWT样式。

Answer 2

当试图从UiBinder覆盖.gwt-styles时，最简单的解决方法是写：

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

这告诉GWT你要指定的这个新样式是要查看的第一个和主要样式，而不是默认为主要和最重要的.gwt样式。

具有UiBinder模板的GWT ToggleButton不起作用

2 个答案: