Thất vọng về kiểu dáng DataGrid/CellTable - ghi đè kiểu hàng

Question

Tôi đang cố gắng tạo kiểu dữ liệu GWT 2.4 DataGrid của mình và đạt được các rào chắn ở mọi ngã rẽ. Tôi đã thêm phong cách hàng sau đây để DataGrid của tôi:

dataTable.setRowStyles(new RowStyles<IntegrityItem>() { 
    @Override 
    public String getStyleNames(IntegrityItem row, int rowIndex) { 
     if (row.getSomeValue() >= 100) { 
     return MyResources.INSTANCE.mystyles().alertRow(); 
     } else { 
     return ""; 
     } 
    } 
}); 

Các alertRow phong cách đơn giản là thế này:

.alertEntry { 
    font-weight: bold; 
    color: #00ff00; 
    background-color: #ff0000; 
} 

Thông tin thêm: Tôi đã thực hiện một bản sao cục bộ của DataGrid.css và loại bỏ TẤT CẢ "nền" các yếu tố từ tất cả các phong cách, và tôi đã sử dụng này để xây dựng một ClientBundle:

public interface MyDataGridResources extends DataGrid.Resources { 

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

    @Override 
    @Source({"../resources/styling/mydatagridstyles.css"}) 
    Style dataGridStyle(); 

} 

tôi đã sử dụng này (MyDataGridResources.INSTANCE) trong constructor DataGrid của tôi.

Khi tôi dùng thử, các hàng đáp ứng các tiêu chí chứa văn bản màu xanh lá cây (# 00ff00), nhưng màu nền vẫn là màu trắng hoặc xám tùy thuộc vào việc đó là hàng chẵn hay hàng lẻ. Làm thế nào là nó màu nền là bỏ qua cách nó được? Ở đâu nó nhận được những màu sắc ở nơi đầu tiên ?! Tôi đã xóa hoàn toàn thông tin về màu nền từ tệp css.

Answer 1

Xem http://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3 (mà không phải là một lỗi!)

Nói tóm lại kéo dài tuổi DataGrid.Style (mục tiêu duy nhất là phải có một loại mới, bạn không cần phải thêm bất cứ điều gì với nó) và có dataGridStyle bạn ghi đè phương thức trả lại kiểu con của riêng bạn thay vì DataGrid.Style (và nó sẽ hoạt động vì hiệp phương sai kiểu trả về)

Answer 2

Bạn có thể tạo tệp CSS tùy chỉnh và cung cấp tệp này cho DataGrid thông qua việc xác định tài nguyên kiểu mới. Điều này được thực hiện bằng cách tạo một kiểu mở rộng DataGrid.Resources, nó biết về tệp CSS của bạn. Sau đó bạn chuyển nó tới hàm tạo của datagrid.

Để cung cấp một ví dụ khá hoàn chỉnh, trước tiên hãy tạo loại mới cho kiểu DataGrid. (Việc xác định một kiểu mới như thế này chỉ xác định duy nhất kiểu của bạn trong GWT).

public interface MyStyle extends DataGrid.Style { 
} 

Sau đó, xác định giao diện ghi đè phương thức dataGridStyle() trong DataGrid.Resources. Phương thức dataGridStyle sẽ trả về MyStyle được định nghĩa trước đó.

Lưu ý hai yếu tố được đưa ra cho chú thích @Source - bạn chỉ có thể ghi đè bất kỳ tên lớp nào trong CSS mặc định (DataGrid.css) trong tệp thứ hai mà bạn cung cấp ("DataGridOverride.css" tại đây).

public interface DataGridResource extends DataGrid.Resources { 

    @Source({ DataGrid.Style.DEFAULT_CSS, "DataGridOverride.css" }) 
    MyStyle dataGridStyle(); 
}; 

Để xây dựng DataGrid mới theo kiểu của bạn tất cả các bạn cần làm là:

DataGridResource resource = GWT.create(DataGridResource.class); 
    dataGrid = new DataGrid<T>(pageSize, resource) 

Một tinh tế là khi bạn đang tăng ưu tiên của các phong cách ghi đè, bạn có thể cần phải ghi đè lên bất kỳ khác các kiểu yêu cầu mức độ ưu tiên cao hơn, ví dụ: quy tắc di chuột hàng cần phải đến sau quy tắc tạo kiểu hàng.