Làm thế nào để khai báo tên phong cách phụ thuộc với UiBinder

Question

Tôi có một widget UiBinder đơn giản có chứa một TextArea:

<!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"> 

    <g:TextArea visibleLines="3" /> 
</ui:UiBinder> 

Tôi muốn kiểm soát màu nền của textarea này cho khả năng ghi và đọc chỉ tiểu bang. GWT sử dụng tên trang trí kiểu "-readonly" để đạt được điều này. Vì vậy, tôi cố gắng này:

<!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> 
     .textBoxStyle { 
      background-color:yellow; 
     } 
     .textBoxStyle-readonly { 
      background-color:lightgray; 
     } 
    </ui:style> 

    <g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" /> 
</ui:UiBinder> 

Rõ ràng điều này sẽ không làm việc vì tên phong cách được obfuscated cho CssResources dẫn đến một cái gì đó như thế này:

.G1x26wpeN { 
    background-color:yellow 
} 
.G1x26wpeO { 
    background-color: lightgray; 
} 

HTML kết quả cho textarea có khả năng ghi trông như thế này:

<textarea tabindex="0" class="G1x26wpeN" rows="3"/> 

Các chỉ đọc textarea trông như thế này:

<textarea tabindex="0" class="G1x26wpeN G1x26wpeN-readonly" readonly="" rows="3"/> 

Làm cách nào để khai báo kiểu để GWT sẽ làm xáo trộn phần chính chứ không phải bộ giải mã "-readonly"?

Tôi biết rằng tôi có thể vô hiệu hóa sự che khuất cho toàn bộ tên kiểu. Nhưng tôi muốn giữ cho obfuscation trong khi sử dụng các trang trí.

Answer 1

Nếu bạn muốn sử dụng kiểu này cho tất cả các chỉ đọc của bạn TextArea s thì tôi khuyên bạn chỉ nên sửa đổi kiểu .gwt-TextArea-readonly trong tệp CSS chủ đề GWT của bạn.
Nếu không, tôi chỉ có thể nghĩ thêm kiểu tùy chỉnh của bạn theo chương trình khi bạn đặt TextArea chỉ đọc.

PS: từ docs:

<set-configuration-property name="CssResource.obfuscationPrefix" value="empty" />` can be used for minimal-length selector names, but this is only recommended when the GWT module has total control over the page. 

tôi khuyên bạn nên sử dụng này (với "trống rỗng" hoặc "X" hoặc tiền tố khác không sử dụng) cho tên lớp ngắn hơn nhiều - bởi vì ở các cài đặt mặc định, bạn không đạt được nhiều thông qua obfuscation (textBoxStyle - 12chars, G1x26wpeN - 9chars, X0 - 2 chars;)).

Answer 2

Tại sao bạn không thử sth như thế này

public class MyFoo extends Widget { 
    interface MyStyle extends CssResource { 
    String normal(); 
    String readonly(); 
    } 

    @UiField MyStyle style; 

    /* ... */ 

    void setEnabled(boolean enabled) { 
    getElement().addStyle(enabled ? style.normal() : style.readonly()); 
    getElement().removeStyle(enabled ? style.readonly() : style.normal()); 
    } 
} 

này sẽ cho phép bạn thay đổi phong cách nếu một hộp văn bản là "bình thường" hoặc chỉ đọc ...

Và tắt khóa học, trong UiBinder bạn nên có sth như

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'> 

    <ui:style type='com.my.app.MyFoo.MyStyle'> 
    .redBox { background-color:pink; border: 1px solid red; } 
    .normal { color:black; } 
    .readonly { color:gray; } 
    </ui:style> 

    <div class='{style.redBox} {style.normal}'>I'm a red box widget.</div> 

</ui:UiBinder> 

Answer 3

tại thời điểm này (GWT 2.4) nó không được hỗ trợ, và nó không phải là rõ ràng nếu/khi nó sẽ được hỗ trợ, xem issue 4746 trong theo dõi vấn đề GWT.

Giải pháp thay thế là thêm @external, điều này sẽ vô hiệu hóa sự làm xáo trộn cho các kiểu đó. Trong trường hợp này sẽ là:

@external textBoxStyle, textBoxStyle-readonly; 

Answer 4

Hãy thử ngay bây giờ Tôi hy vọng bạn sẽ nhận được nó.
Với các yếu tố <ui:style>, bạn có thể định nghĩa CSS cho đúng UI của bạn, nơi bạn cần nó
Lưu ý:<ui:style> yếu tố này phải được trẻ em trực tiếp của phần tử gốc

<!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"> 
     <g:TextArea visibleLines="3" /> 
    </ui: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 field='MyStyle'> 
     .textBoxStyle { 
      background-color:yellow; 
     } 
     .textBoxStyle-readonly { 
      background-color:lightgray; 
     } 
    </ui:style> 

    <g:TextArea name="myText" styleName="{MyStyle.textBoxStyle}" visibleLines="3" /> 
</ui:UiBinder> 

Answer 5

không Có một lỗi đánh máy trong UIBinder của bạn?

Bạn có:

<g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" /> 

.. nhưng tôi nghĩ rằng bạn cần phải sử dụng "stylePrimaryName", tức là.

<g:TextArea stylePrimaryName="{style.textBoxStyle}" visibleLines="3" /> 

Nhưng tôi đoán câu hỏi này đã được trả lời thực sự đã ..

Answer 6

Dưới đây là một cái gì đó có giá trị tôi đã tìm ra bằng cách ghép thông tin từ bài viết trong chủ đề này đặc biệt ...

Nếu bạn sử dụng @external, bạn có thể ghi đè phong cách gwt. Vấn đề là sự thay đổi này được áp dụng trên toàn cầu! Có thể, tuy nhiên, để mở rộng & ghi đè các thuộc tính đã chọn mà không ảnh hưởng đến mọi phiên bản của loại tiện ích con. (Điều này giống như phương pháp tạo kiểu chương trình tạo một lớp css với tên lớp gwt + hậu tố và sử dụng addStyleDependantName().)

Đây là ví dụ về cách sử dụng UIBinder + CssResource để mở rộng kiểu gwt. Tôi đã bỏ qua phần CssResource, nhưng bạn sẽ nhận được ý tưởng ...

Trong tệp xxxx.ui.xml của bạn, hiển thị kiểu gwt nhưng đừng gây rối với nó!

<ui:style> 
    @external .gwt-Button; .gwt-Button {} 
</ui:style> 

Sau đó, tạo kiểu cho tiện ích con bằng cách chỉ định 2 (hoặc nhiều) kiểu trong thuộc tính styleName. I E. phong cách gwt và một (hoặc nhiều) từ tài nguyên của bạn.

<g:Button ui:field="submitButton_" text="Submit" styleName="{style.gwt-Button} {res.loginStyles.submitButtonStyle}" /> 

Đây là lớp css:

.submitButtonStyle{ 
    margin: 3px 5px 5px 0px; 
} 

Trong trường hợp này, tôi định nghĩa một nút đó là phong cách trong phương pháp chuẩn (dễ dàng thay đổi thông qua mô-đun thừa kế) nhưng với một biên độ cụ thể mà sẽ vẫn cố định . Điều này không làm rối loạn phong cách toàn cầu, nó không yêu cầu xác định tất cả các thuộc tính theo cách thủ công, và cho phép trao đổi kiểu dáng toàn cục theo ý muốn với clean.css, dark.css, v.v.