0

我有一个简单模块的 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>
4

2 回答 2

1

当更改状态或悬停切换按钮时,GWT 将向元素添加辅助样式。这些样式是标准的,即使您覆盖了主要样式(就像您对 demo-ToggleButton 所做的那样),GWT 仍将使用相同的次要样式。

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

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

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

<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 样式。

于 2011-08-09T01:00:51.380 回答
0

当试图从 UiBinder 覆盖 .gwt-styles 时,最简单的修复方法是编写:

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

这告诉 GWT,您指定的这个新样式是要查看的第一个和主要样式,而不是默认情况下主要和最重要的 .gwt 样式。

于 2015-02-06T02:19:57.590 回答