Thay đổi Kiểu UiBinder thành Kiểu UiBinder khác theo Lập trình

Question

Ví dụ đơn giản. Tôi có 2 kiểu được khai báo trong 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> 

Tôi cũng có nhãn mà một trong số chúng cũng được áp dụng.

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

Trong UiBinder, có cách nào để tôi có thể chuyển đổi theo phong cách thành kiểu kiểu lỗi không? Thật tuyệt khi có thể tổ chức CSS của tôi ngay trong tiện ích đó và tôi đã không tìm được cách nào khác để tổ chức nó.

Nếu những gì tôi yêu cầu là không thể, tôi nên tổ chức CSS của mình như thế nào trong gwt, để tôi không kết thúc với một nhóm phong cách khổng lồ và cũng dễ sử dụng? Tôi tưởng tượng có một cách thông minh để sử dụng một ClientBundle cho điều này, nhưng tôi đã không tìm ra nó. Tôi cũng nghĩ rằng nó sẽ thuận tiện hơn để có thể thực hiện theo cách được đề cập ở trên bằng cách chỉ giữ mọi thứ trong UiBinder mà không gây rối với một tệp khác. Dù bằng cách nào, xin vui lòng giúp tôi trước khi điều này được ra khỏi tay!

Answer 1

Có, bạn phải làm điều đó trong mã phía sau tệp. Bạn có thể tìm thấy mô tả tại đây: Programmatic access to inline Styles.

Dưới đây là một ví dụ:

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()); 
     } 
    } 
} 

Nếu bạn nhấp vào nút này, bạn sẽ nhìn thấy phong cách của nó thay đổi theo định nghĩa CSS của bạn trong tệp UiBinder của bạn. (Trong trường hợp này chuyển đổi từ đen sang xám một bản visa)