Comment ajouter un écouteur de ligne à un Flextable dans GWT?

Question

Comment ajouter un écouteur de ligne à une ligne spécifique, ou à toutes les lignes d'une table? J'ai besoin d'ajouter un type d'écouteur "onMouseOver" aux lignes de sorte que lorsque vous les survolez, cela change la couleur d'arrière-plan de la ligne, un peu comme getRowFormatter vous le permettra.

Answer 1

Supposant GWT 1.5.3:

EVENEMENT CLIQUEZ MANIPULATION

Si vous utilisez FlexTable et que vous voulez un gestionnaire d'événements de clic, vous pouvez utiliser le FlexTable.addTableListener() et enregistrer votre propre TableListener. L'objet TableListener devra implémenter le rappel onCellClicked qui vous donnera le numéro de ligne.

AUTRES EVENEMENTS DE MANUTENTION (par exemple FLOTTANT)

Si vous devez gérer d'autres types d'événements autres que la souris (par exemple, vol stationnaire), GWT ne contient pas encore une interface prête pour cela. Vous êtes pratiquement parti seul pour les implémenter vous-même. Il y a deux façons de le faire que je peux penser maintenant:

1. La façon rapide et sale, est probablement en exploitant JSNI, qui fournit un moyen pour vous injectez Javascript dans votre code GWT. Je n'ai pas utilisé beaucoup de JSNI (mis à part des solutions de contournement vraiment dures qui ne valent pas l'effort de l'écrire en GWT pur) dans mon code, donc je ne peux pas vous montrer un exemple; mais franchement, je ne le recommanderai pas car cela réduit la maintenabilité et l'extensibilité.

2. Si vous vouliez une interface GWT native, vous pouvez créer une nouvelle classe qui hérite de HTMLTable ou de FlexTable. Au constructeur, appelez la fonction sinkEvents avec vos événements nécessaires. (par exemple, pour le vol stationnaire, vous aurez probablement besoin de sinkEvents (Event.ONMOUSEOVER)). Ensuite, vous aurez besoin de la fonction onBrowserEvent qui gère le passage de la souris.

   Un modèle rapide de la façon dont le code devrait ressembler à:

   import com.google.gwt.user.client.DOM; 
   import com.google.gwt.user.client.Event; 
   import com.google.gwt.user.client.ui.FlexTable; 
   public class FlexTableWithHoverHandler 
       extends FlexTable 
   { 
       public FlexTableWithHoverHandler() 
       { 
        super(); 
        sinkEvents(Event.ONMOUSEOVER); 
       } 
       @Override 
       public void onBrowserEvent(Event event) 
       { 
        switch(DOM.eventGetType(event)) 
        { 
        case Event.ONMOUSEOVER: 
         // Mouse over handling code here 
         break; 
        default: 
         break; 
        } 
       } 
   } 
   

   Le meilleur d'apprendre à coder c'est en regardant le code source GWT lui-même (recherche sinkEvent) et obtenir la sensation sur la façon dont pour le faire la façon GWT.

Answer 2

// this is click 
final FlexTable myTable = new FlexTable(); 
myTable.addClickHandler(new ClickHandler() { 
    public void onClick(ClickEvent event) { 
     Cell cell = myTable.getCellForEvent(event); 
     int receiverRowIndex = cell.getRowIndex(); // <- here! 
    } 
}); 

Answer 3

je l'ai trouvé beaucoup plus simple d'ajouter javascript directement à l'élément TR. Mon code suppose qu'un parent DOM de widgets est un TD et le grand-parent est le TR, donc vous devez être sûr de connaître votre DOM.

Voici mon code. Sympa et simple, pas de gestion d'événements JSNI ou GWT DOM requise.

TableRowElement rowElement = (TableRowElement) checkbox.getElement(). GetParentElement(). GetParentElement();

rowElement.setAttribute ("onMouseOver", "this.className = '" + importRecordsResources.css(). NormalActive() + "'");

rowElement.setAttribute ("onMouseOut", "this.className = '" + importRecordsResources.css().normal() + "'");

Answer 4

Je viens de le faire de cette façon simple:

protected void handleRowsSelectionStyles(ClickEvent event) { 
    int selectedRowIndex = fieldTable.getCellForEvent(event).getRowIndex(); 
    int rowCount = fieldTable.getRowCount(); 
    for (int row = 0; row < rowCount; row++) { 
     Element rowElem = fieldTable.getRowFormatter().getElement(row); 
     rowElem.setClassName(row == selectedRowIndex ? "row selected" : "row"); 
    } 
} 

Vous appelez cette méthode à partir des cellules que vous voulez être cliquable

int row = 0; 
for (final RowDataProxy rowData : rowDataList) { 
    Label fieldName = new Label(rowData.name()); 
    fieldName.addClickHandler(new ClickHandler() { 

     @Override 
     public void onClick(ClickEvent event) { 
      handleRowsSelectionStyles(event); 
     } 
    }); 
    fieldTable.setWidget(row++, 0, fieldName); 
} 

Cordialement,

Zied Hamdi