How to effectively show an icon in GWT only in the row the user hit with the mouse?

Question

I like this effect (which is used here in StackOverflow too to remove comments) that when the mouse enters a row an icon is shown to remove this row. If the mouse doesn't hit any row there is no icon at all.

I solved this in my GWT application but I am not so happy with the solution because it seems hat it consumes a lot of CPU. What I did: Every row has an icon with is setVisible(false) at the beginning. To the table I add a MouseMoveHandler and if the mouse hits a row this image gets visible. Another MouseOutHandler is added to the table which hides every image if the mouse leaves the table.

Do you see an alternative to solve this problem effectively?

Answer 1

Since the user will never have their mouse in more than one row at a time -- have you tried instantiating just one icon and then attaching/removing it from each row on your MouseMoveHandler/ MouseOutHandler? The result will likely be different. Also, what are you using to monitor the CPU use?

Answer 2

Why don't you just use a panel with image in it and move the panel to corresponding location in row that cursor is in right now using MouseMoveHandler/ MouseOutHandler?

Answer 3

In addition to using only one icon, a common mistake is creating more than 1 handler. Using a lot of handlers to do the same thing gets your browser bogged down with objects.

Instead of

for (final MyRowWidget row : rows) {
    row.addMouseMoveHandler(new MouseMoveHandler() { // a new one every time is bad
        public void onMouseMove(MouseMoveEvent event) {
            row.doShowImage();
        }
    });
}

Do

private static final MouseMoveHandler THE_ONE_AND_ONLY = new MouseMoveHandler() {
    public void onMouseMove(MouseMoveEvent event) {
        MyRowWidget rowWidget = (MyRowWidget) event.getSource();
        rowWidget.doShowImage();
    }
});

...

for (HasAllMouseHandlers row : rows) {
    row.addMouseMoveHandler(THE_ONE_AND_ONLY);
}