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 を追加することに注意してください。"demo" プレフィックスを維持することは認識されません。

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

したがって、UI バインダーのスタイル セクションで、次のスタイルを追加する必要があります。

@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-style ではないことを GWT に伝えます。

于 2015-02-06T02:19:57.590 に答える