Want to Implement 'Mark as Read' feature in GWT Cell List

Question

I want to implement this example of celllist with one modification. I want to make each row to a grey color once its clicked by someone. It should persist there, and not change as the user clicks on another row. It's okay if its gone once a new server call is made. I'm doing this to mark it as a 'read message' for the user. Any clues?

I overrided (updated) the css style of cellList as below but when I inspect I dont see the 'myCss' style being applied .

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

Nett

selectionModel.addSelectionChangeHandler(..) tried to get the selected element and change background style . This is working for only the first time selected element it doesn't dynamically make the changes to the list as the click happens. – Nett

What have you tried so far? Can you please edit your question and add some code? – Contrarily

Answer 1

One way to do it will be add a class to the selected object and apply css. you might have to override cellList resource css. to override cellList resource css have a look 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 :

A tried my own suggestion and it works. you need to override the resource.

Some sample code.

Apply resources to celllist :

i have created 2 interfaces in 2 separate classes

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

use this in 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{} 

declare above css in your application css files P.S. added 2 new classes for showing visited

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

Render a hidden field to indicate selected

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

Selection Model :

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

Clairvoyance

@Nett the here link above refers to a CellTable resource but similarly you can do for CellList – Clairvoyance

int keyboardSelectedRow = cellList.getKeyboardSelectedRow(); cellList.getRowElement(keyboardSelectedRow).addClassName("greyClass"); I tried the above two lines but it doesn't work. It works only for a single value in place of keyboardSelectedRow. Dynamically changing values make to change in the appearance or style. – Nett

@Nett yes i tried that too, doesn't work , what you might want to try is override the css of celllist defined in its resources and give it a try by defining selected and odd even classes along with the greyClass. My take is that it might be overriding the css classes once a selection is changed, this might be nullifying our setClass – Clairvoyance

That's very helpful of you. I'm trying it out but got an error The following unobfuscated classes were present in a strict CssResource: myClass,myCss. I'll dig into it deeper, meanwhile could you see if the given answer is complete and you haven't missed out to share any code. – Nett

@nanospec myClass is typo sorry about that.. You got that error because you must have tried to declare those classes in sortListStyle.css. You should declare that css file exactly as described and add myCss to your application css file.. – Clairvoyance

could you please have a look at updated question. I've posted the full css there. Is it correct? I would be grateful if you could share your sample files via dropbox or drive, so that I can look through them in greater detail. nanospeck0[at]gmail(dot)com – Nett

@Nett i dont have the code right on in hand. Its on my other Pc. But i see what mistake you have made. i told you not to give any body to the classes in the css file, leave the body empty just like i have shown. Add the classes with body to your "application css" (which you will find in war folder). The @ external annotation allows you to define them in your application css with added classes and hence you have to define them in external css. Once this is done you can actually view those classes in firebug w/o obfuscated and hence can play around. – Clairvoyance

sorry im so novice at this. Now i can see classes without obfuscation but the <input> fields with true doesn't seem to get the appened style "myCss".Hence only one selected row is highleted at a time. Still the files would be very helpful if you could get them from the other pc when you boot it. – Nett

We are appending the styles to parent of input so check for the parent. Try clicking multiple items to get the effect don't just check for one item, this is because the selection change handler might delay things while overriding the default styles. Will drive you the files once I get to the pc. – Clairvoyance

Answer 2

You mean something like this:

Did you use a MultiselectionModel ?

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

Petaliferous