GWT ToggleButton с шаблоном UiBinder не работает - PullRequest
Новая
       10

GWT ToggleButton с шаблоном UiBinder не работает

0 голосов
/ 06 августа 2011

У меня есть следующий шаблон 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>

Ответы [ 2 ]

1 голос
/ 09 августа 2011

При изменении состояния или при наведении курсора на кнопку 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">

Таким образом, в разделе стилей вашего пользовательского интерфейса 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 по умолчанию.

0 голосов
/ 06 февраля 2015

При попытке переопределить .gwt-стили из UiBinder самое простое исправление - написать: 

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

Это говорит GWT, что указанный вами новый стиль является первым и основным стилем, который нужно посмотретьat, а не стиль .gwt, который по умолчанию является основным и наиболее важным.

...