Cần hằng số CSS của ứng dụng trong GWT

Question

Tôi muốn xác định một số màu là hằng số trong một Nguồn CssResource của GWT và sử dụng các hằng số đó trong toàn bộ ứng dụng của tôi; nhưng tôi không biết làm thế nào để làm điều đó.

Tôi sẽ cho bạn biết những gì tôi đã thử. Tôi đã tạo một ClientBundle và CssResource như sau:

public interface Resources extends ClientBundle { 
    public interface MyStyle extends CssResource { 
    String JUNGLEGREEN(); 
    String example(); 
    ... 
    } 
    @Source("Resources.css") 
    MyStyle css(); 
} 

tôi đã xác định một số constants trong Resources.css:

@def JUNGLEGREEN #1F3D0A; 

Trong Resources.css, tôi sử dụng những hằng số như sau:

.example { color:JUNGLEGREEN; } 

Tôi không biết cách sử dụng lại các hằng số đó trong các tệp CSS và mẫu UiBinder khác. Tôi muốn làm điều này trong một số tệp UiBinder khác, nói LoginView.ui.xml:

<ui:with field='resources' type='com.example.Resources' /> 
<ui:style> 
    .mainPanel { 
    background:{resources.css.JUNGLEGREEN}; 
    ... 
    } 
</ui:style> 

... nhưng dường như không biên dịch. Bạn có biết làm thế nào tôi có thể đạt được mục tiêu của tôi?

Answer 1

Bạn sẽ có thể sử dụng

<ui:style> 
    @IMPORT url("../../../global.css"); 
    .mainPanel { 
    background:{resources.css.JUNGLEGREEN}; 
    ... 
    } 
</ui:style> 

Answer 2

Đây là cách chúng tôi làm điều đó:

• chúng tôi đặt tất cả các thuộc tính liên tục của chúng tôi trong một file constant.css

@def black #241b15; /* text color */ 
@def orange #ff4f00; /* links */

• trong mỗi tệp ui.xml y Bạn có thể tham chiếu đến các hằng số theo cách sau:

<ui:style src="../../resources/css/constants.css"> 
    .myStyle { 
     color: orange; 
    } 
</ui:style>

Hy vọng điều đó sẽ hữu ích.

EDIT:

Để tránh đường dẫn tương đối trong các yếu tố <ui:style> bạn có thể làm như sau:

• xác định hằng số của bạn một lần nữa trong một file css (nói constants.css)

@def junglegreen #1f3d0a;

• tạo một ClientBundle và CssResource để lấy hằng định nghĩa

public interface MyResources extends ClientBundle { 

    public static final MyResources INSTANCE = GWT.create(MyResources.class); 

    public interface Constants extends CssResource { 

     String junglegreen(); 
    } 

    Constants constants(); 
}

-sử dụng @eval chú thích để truy cập hằng

<ui:style> 
    @eval green com.gwt.client.widget.test.MyResources.INSTANCE.constants().junglegreen(); 

    .someClass { 
     color: green; 
    } 
</ui:style>

Cách duy nhất tôi biết làm thế nào để đối phó với các hằng số mà không cần tham khảo các tập tin css chính nó.

Answer 3

Tôi biết câu trả lời này có thể là muộn nhưng có thể giúp ai đó.Tôi đã có cùng một vấn đề và đã có thể giải quyết nó bằng cách thêm những điều sau đây:.

Resources.css() ensureInjected()

tôi đã thêm nó vào máy của tôi, nhưng thử nó trong một vài nơi và không có vấn đề mà tôi đặt nó, nó hoạt động.