2013-10-08 4 views
1

В приложении GWT я объявляя стили .css внутри UiBinder (ui.xml)GWT добавить виджет стиль UIBundle во время выполнения

Например:

<ui:Style> 
    .input { 
     background:green; 
    } 
</ui:Style> 

И если я объявить виджет внутри ссылка на UiBinder i Style i была как показано ниже:

<g:Button styleName="{Style.input}"/> 

что хорошо.

Моя проблема в том, что я хочу применить этот стиль в виджетах, которые я добавляю во время выполнения. Например, в текстовом поле:

TextBox box = new TextBox(); 
box.setStyleName("input"); 

Я попытался все возможные compinatations (например, «вход», «{Style.input}»), но без какого-либо удачи. Я знаю, что GWT компилирует стили внутри файла UiBinder, поэтому виджеты заканчиваются чем-то вроде «class =» GLIX78 ».

Есть ли способ, которым я могу достичь добавления стиля, который объявлен в UiBinder в виджет во время выполнения?

Спасибо,

ответ

3

Вы можете ссылаться на стиль, который вы объявили в UiBinder. Но вам нужно предпринять дополнительные шаги. Посмотрите на этот пример:

UiBinder

<!-- (1) declare your style , remember to set the type attribute correctly - you should place your package.WidgetName.StyleName in there --> 
<ui:style type='z.client.TEstWidget.MyStyle'> 
    .blackBG { 
     background-color: black; 
    } 

    .grayBG { 
     background-color: gray; 
    } 
    </ui:style> 


    <g:HTMLPanel> 
    <g:Label ui:field="myLabel" styleName="{style.grayBG}">test</g:Label> 
    <g:Button ui:field="myButton">change style</g:Button> 
    </g:HTMLPanel> 

Код виджета

public class TEstWidget extends Composite { 

    private static TEstUiBinder uiBinder = GWT.create(TEstUiBinder.class); 

    interface TEstUiBinder extends UiBinder<Widget, TEstWidget> { 
    } 

    // declare the style (2) 
    interface MyStyle extends CssResource { 

     String blackBG(); 

     String grayBG(); 
    } 

    // (3) here you make reference to the style declared in uibinder 
    @UiField 
    MyStyle style; 

    @UiField 
    Button myButton; 

    @UiField 
    Label myLabel; 

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


    @UiHandler("myButton") 
    public void onClick(ClickEvent event) { 
     // change the background of the label 
     // (4) this is how you can use your style 
     myLabel.removeStyleName(style.grayBG()); 
     myLabel.addStyleName(style.blackBG()); 
    } 
} 
+0

Спасибо, именно то, что я искал! – nikkatsa

Смежные вопросы