Изменить стиль UiBinder на другой стиль UiBinder программно - PullRequest
Новая
       14

Изменить стиль UiBinder на другой стиль UiBinder программно

5 голосов
/ 23 ноября 2011

Простой пример.У меня есть 2 стиля, объявленных в UiBinder: 

    <ui:style>
    .success {
        font-size: 13px;
        margin: 15px;
        font-weight: bold;
        display: inline;
        padding: 3px 7px;
        background: #FFF1A8;
    }
    .error {
        font-size: 13px;
        margin: 15px;
        font-weight: bold;
        display: inline;
        padding: 3px 7px;
        background: #990000;
        color: #fff;
    }
</ui:style>

У меня также есть метка, что один из них тоже применяется. 

    <g:Label ui:field="statusLabel" styleName='{style.success}' />

В UiBinder, есть ли способ, которым я был быв состоянии программно переключить стиль на стиль ошибки?Приятно иметь возможность организовать мой CSS прямо там, в виджете, и я не нашел другого хорошего способа его организации.

Если то, что я спрашиваю, невозможно, как мне организовать своюCSS в gwt, так что я не получаю гигантский пул стилей, а также легко и удобно?Я полагаю, что есть разумный способ использовать ClientBundle для этого, но я не понял этого.Я также думаю, что было бы удобнее иметь возможность сделать вышеупомянутый способ, просто сохраняя все в UiBinder, не связываясь с другим файлом.В любом случае, пожалуйста, помогите мне, пока это не вышло из-под контроля!

1 Ответ

8 голосов
/ 23 ноября 2011

Да, вы должны сделать это в своем коде за файлом. Описание можно найти здесь: Программный доступ к встроенным стилям .

Вот пример:

testBinder.ui.xml 

<!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 type='XXXXXXXXXXX.client.testBinder.MyStyle'>
        .enabled {
            color: black;
        }

        .disabled {
            color: gray;
        }
    </ui:style>
    <g:HTMLPanel>
        <g:Button ui:field="button" text="ChangeButton" styleName="{style.enabled}" />

    </g:HTMLPanel>
</ui:UiBinder>

testBinder.java 

package XXXXXXXXXXX.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.event.dom.client.ClickEvent;

public class testBinder extends Composite {

    private static testBinderUiBinder uiBinder = GWT
            .create(testBinderUiBinder.class);
    @UiField
    Button button;

    @UiField
    MyStyle style;

    interface MyStyle extends CssResource {
        String enabled();

        String disabled();
    }

    interface testBinderUiBinder extends UiBinder<Widget, testBinder> {
    }

    public testBinder() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    boolean enabled = true;

    @UiHandler("button")
    void onButtonClick(ClickEvent event) {
        if(enabled){
            enabled = false;
            button.setStyleName(style.disabled());
        }
        else{
            enabled = true;
            button.setStyleName(style.enabled());
        }
    }
}

Если вы нажмете эту кнопку, вы увидите, что ее стиль меняется в соответствии с вашим определением CSS в вашем файле UiBinder. (В этом случае переход от черного к серому в стихе о визе)

...