Хотите реализовать функцию «Отметить как прочитанную» в списке ячеек GWT

Question

Я хочу реализовать this example of celllist с одной модификацией. Я хочу, чтобы каждая строка была серого цвета, когда ее кто-то щелкнул. Он должен сохраняться там и не меняться, когда пользователь нажимает на другую строку. Это нормально, если его ушел после того, как сделан новый серверный вызов. Я делаю это, чтобы отметить это как «прочитанное сообщение» для пользователя. Любые подсказки?

Я переопределил (обновил) стиль css для cellList, как показано ниже, но когда я проверяю, я не вижу, как применяется стиль myCss.

CellListStyles.css

@external .dataView-cellListWidget; 
@external .dataView-cellListEvenItem; 
@external .dataView-cellListOddItem; 
@external .dataView-cellListKeyboardSelectedItem; 
@external .dataView-cellListSelectedItem; 

.dataView-cellListWidget{} 
.dataView-cellListEvenItem{} 
.dataView-cellListOddItem{} 
.dataView-cellListKeyboardSelectedItem{} 
.dataView-cellListSelectedItem{} 


.dataView-cellListWidget { 

} 

@external .dataView-cellListEvenItem .myCss{ 
    background-color: aqua; 
} 

@external .dataView-cellListOddItem .myCss{ 
    background-color: aqua; 
} 

.dataView-cellListEvenItem,.dataView-cellListOddItem { 
    cursor: pointer; 
    padding: 2px 5px; 
    zoom: 1; 
} 

@external .dataView-cellListKeyboardSelectedItem .myCss{ 
    background-color: red; 
} 
.dataView-cellListKeyboardSelectedItem { 
    background: #ffc; 
} 

.dataView-cellListSelectedItem { 
    background-color: #FFCBC1; 
    color: #121212; 
    height: auto; 
    overflow: visible; 
} 

Answer 1

Один из способов сделать это будет добавить класс к выбранному объекту и применить CSS. вам может потребоваться переопределить ресурс css. для переопределения ресурса cellList css имеют вид here.

selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() { 
    public void onSelectionChange(SelectionChangeEvent event) { 
    contactForm.setContact(selectionModel.getSelectedObject()); 

    /** for setting it selected**/   

    add a class to the selected object here instead of setting background. And set background as grey using css. 
    } 
}); 

Edit:

испытанный свое собственное предложение, и она работает. вам необходимо переопределить ресурс.

Некоторые примеры кода.

Применить ресурсы для celllist:

Я создал 2 интерфейса в 2 отдельных классов

public interface DataViewCellListResources extends CellList.Resources 
{ 
@Import(value = {DataViewCellListStyles.class}) 
@Source("sortListStyle.css") 
DataViewCellListStyles cellListStyle(); 
} 


@ImportedWithPrefix("dataView") 
public interface DataViewCellListStyles extends CellList.Style 
{ 
} 

     final CellList<Contact> cellList = new CellList<Contact>(new ContactCell(), 
      (Resources) GWT.create(DataViewCellListResources.class), keyProvider); 

использовать это в sortListStyle.css

@external .dataView-cellListWidget; 
@external .dataView-cellListEvenItem; 
@external .dataView-cellListOddItem; 
@external .dataView-cellListKeyboardSelectedItem; 
@external .dataView-cellListSelectedItem; 

.dataView-cellListWidget{} 
.dataView-cellListEvenItem{} 
.dataView-cellListOddItem{} 
.dataView-cellListKeyboardSelectedItem{} 
.dataView-cellListSelectedItem{} 

объявить выше CSS в файлах CSS приложения PS добавлены 2 новые классы для показа посетили

.dataView-cellListWidget { 

} 

.dataView-cellListEvenItem.myCss{ 
    background-color: aqua; 
} 

.dataView-cellListOddItem.myCss{ 
    background-color: aqua; 
} 

.dataView-cellListEvenItem,.dataView-cellListOddItem { 
    cursor: pointer; 
    padding: 2px 5px; 
    zoom: 1; 
} 

.dataView-cellListKeyboardSelectedItem .myClass{ 
    background-color: red; 
} 
.dataView-cellListKeyboardSelectedItem { 
    background: #ffc; 
} 

.dataView-cellListSelectedItem { 
    background-color: #FFCBC1; 
    color: #121212; 
    height: auto; 
    overflow: visible; 
} 

Рендер скрытое поле, чтобы указать выбранный

private static class ContactCell extends AbstractCell<Contact> 
{ 

    @Override 
    public void render(com.google.gwt.cell.client.Cell.Context context, final Contact value, SafeHtmlBuilder sb) 
    { 
     if (value != null) 
     { 
      sb.appendEscaped(value.name); 
      sb.append(new SafeHtml() 
      { 

       @Override 
       public String asString() 
       { 
        return "<input type=\"hidden\" id=\"" + value.isSlected + "\"/>"; 
       } 
      }); 
     } 
    } 
} 

Выбор модели:

 selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() 
    { 

     @Override 
     public void onSelectionChange(SelectionChangeEvent event) 
     { 

      Contact selectedObject = selectionModel.getSelectedObject(); 
      selectedObject.isSlected = true; 


      Element element = cellList.getElement(); 
      NodeList<com.google.gwt.dom.client.Element> elementsByTagName = element.getElementsByTagName("input"); 
      for (int i = 0; i < elementsByTagName.getLength(); i++) 
      { 
       com.google.gwt.dom.client.Element item = elementsByTagName.getItem(i); 
       if (item.getId().equals("true")) item.getParentElement().addClassName("myCss"); 
      } 
     } 
    }); 

Answer 2

Вы имеете в виду что-то вроде этого:

Вы использовали MultiselectionModel?

private final MultiSelectionModel<MyDTO> serlectionModel = new MultiSelectionModel<MyDTO>(keyProvider); 
cellList.setSelectionModel(selectionModel, DefaultSelectionEventManager 
       .<MyDTO>createDefaultManager());