gwt - visto - marcar como no leido whatsapp iphone 2017

Desea implementar la función ''Marcar como leído'' en la lista de células GWT

Question

Quiero implementar este ejemplo de celllist con una modificación. Quiero hacer que cada fila tenga un color gris una vez que alguien haga clic en ella. Debería persistir allí y no cambiar a medida que el usuario haga clic en otra fila. Está bien si se va una vez que se realiza una nueva llamada al servidor. Estoy haciendo esto para marcarlo como un "mensaje de lectura" para el usuario. ¿Alguna pista?

Anulé (actualicé) el estilo CSS de cellList como se muestra a continuación, pero cuando inspeccioné no veo el estilo ''myCss'' aplicado.

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

Te refieres a algo como esto:

¿ MultiselectionModel un MultiselectionModel ?

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

Answer 2

Una forma de hacerlo será agregar una clase al objeto seleccionado y aplicar css. es posible que deba anular el css de recursos de CellList. para anular el css del recurso cellList mire aquí .

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

Editar:

A probé mi propia sugerencia y funciona. debes anular el recurso.

Algunos ejemplos de código.

Aplicar recursos a celllist:

He creado 2 interfaces en 2 clases separadas

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

usa esto en 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{} 

declarar por encima de css en su aplicación css archivos PS agregó 2 nuevas clases para mostrar visitado

.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;
}

Renderiza un campo oculto para indicar seleccionado

    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 + "/"/>";
                }
            });
        }
    }
}

Modelo de selección:

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