Selezionare immediatamente la riga con il tasto Freccia in Vaadin 7 Grid

Question

In Vaadin 7.5.3, il widget Grid risponde all'utente premendo i tasti freccia Su (↑) o Giù (↓) spostando una casella di evidenziazione attorno a una singola cella. Se l'utente esegue una seconda azione, premendo il tasto SpaceBar, la riga diventa selezione.

Sono confuso da questo comportamento. Mi sarei aspettato ogni colpo di un tasto freccia per selezionare immediatamente la riga successiva.

C'è un modo per modificare il comportamento della griglia, per selezionare direttamente la riga successiva senza richiedere un secondo gesto da parte dell'utente?

Answer 1

Per riferimento, corrispondente vaadin forum topic about arrow navigation in grid. Qualcuno ha persino pubblicato un file zip con un progetto di esempio.

Ho appena provato questo suggerimento, e sembra funzionare, tranne che ora ricevo messaggi di log "Ignora connettore di richiesta per connettore inesistente".

La soluzione prevede la compilazione del proprio widgetset, in modo che possa essere un problema impostare se non lo si è già fatto.

Nel pacchetto widgetset/cliente:

@Connect(GridExtension.class) 
public class GridExtensionConnector extends AbstractExtensionConnector 
{ 
    @Override 
    protected void extend(ServerConnector target) 
    { 
    GridConnector gridConnector = (GridConnector) target; 

    final Grid<JsonObject> grid = gridConnector.getWidget(); 

    grid.addDomHandler(new KeyDownHandler() { 
     @Override 
     public void onKeyDown(KeyDownEvent event) 
     { 
     if(event.getNativeKeyCode() == 40) 
     { 
      selectFocused(); 
     } 
     else if(event.getNativeKeyCode() == 38) 
     { 
      selectFocused(); 
     } 
     } 
    }, KeyDownEvent.getType()); 
    } 

    public static void selectFocused() 
    { 
    Timer timer = new Timer() { 
     @Override 
     public void run() 
     { 
     execClick(); 
     } 
    }; 

    timer.schedule(10); 
    } 

    public static native void execClick() /*-{ 
    // only click if focused row is not already selected 
    if(!$wnd.$(".v-grid-body .v-grid-row-focused .v-grid-row-selected").length) 
    { 
     $wnd.$(".v-grid-body .v-grid-cell-focused").click(); 
    } 
    }-*/; 
} 

Da qualche altra parte:

@JavaScript({ "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" }) 
public class GridExtension extends AbstractExtension 
{ 
    public void extend(Grid grid) 
    { 
    super.extend(grid); 
    } 
} 

E l'utilizzo:

new GridExtension().extend(grid); 

Si noti che questa soluzione funziona solo per una rete unica per pagina. Il thread del forum di vaadin contiene anche un suggerimento su come fare in modo che funzioni per pagine con più griglie sulla stessa pagina, ma non è stato compilato immediatamente per me quindi non lo includerò qui.