How to handle mouseclicked events in a ListView node correctly?

Question

Hi
We want to simulate table rows and headers with a ListView. We have an additional requirement that when a particular row is selected, a X icon will appear at the last column. Clicking which will remove the row from the table.
A snippet from the implementation is given below
public class SampleList extends ListView{
    function getRow(row :Row, index:Integer, cell:ListCell):Node {         
         HBox {
                var closeView : Image
                content : [
                Label {textWrap:true, text: bind row.id, layoutInfo: bind LayoutInfo {width:width * .2, height:height * .02 }}, //some column 1
                Label {textWrap:true, text: bind row.name, layoutInfo: bind LayoutInfo {width:width * .12, height:height * .02 }}, //some column 2                                               
                close = ImageView {
                                        image : Image{url:"close.png"}
                                        disable: bind cell.selected and not cell.empty
                                        pickOnBounds : true                                   
                                        onMouseClicked : function (event):Void{
                                          if (not close.disable)
                                        //delete from row from model (Row)
                                        } //close column
     override var cellFactory =  function () {     
            def cell : ListCell = ListCell {       
            onUpdate:  function() {                    
                    def item = cell.item;              
                    cell.node = if (item == null) null; else getRow(cell.item as Row, cell.index,cell);                                          
}      The problem with the code is that the mouse clicked event used by the close button is multiplexed - Firstly - the application logic - it is used to delete the row from the model and secondly - the ListView control - uses it to trigger a item selection internally. As a result, if you click on a row which is not yet selected (in the sense that it is highlighted) at the exact location of the X icon, the row is deleted without it having been ever highlighted
If you note the code above, you will notice that the close image's mouseclicked event checks cell.selected before deleting it. And cell.selected is true even though the list has not been highlighted
Any workarounds for this problem would be appreciated
Thanks
Dhruva

Answer 1

User, please always tell us your jdev version.
In general you use a valueChangeListener which is fired when the user tabs out of the field...
Timo