Celltable GWT. Comment définir le style de cellule CSS après avoir changé la valeur dans EditTextCell

Question

Base sur l'entrée de l'utilisateur dans la cellule modifiable Je voudrais afficher le style concret. Ce que j'essaie de faire est une validation très basique.

J'ai déjà essayé de remplacer getCellStyleNames dans Anonymous new Column() {}, mais ce travail au démarrage, base sur les valeurs du modèle, mais ce qui fonctionnerait, après que l'utilisateur change la valeur de cette cellule?

Aidez-nous s'il vous plaît.

Answer 1

Vous êtes très proche.

Remplacer getCellStyleNames dans la nouvelle colonne() {} correspond à la première moitié de la solution.

Le second semestre:

yourColumn.setFieldUpdater(new FieldUpdater<DataType, String>() { 

      @Override 
      public void update(int index, DataType object, String value) { 
       // the following line will apply the correct css 
       // based on the current cell value 
       cellTable.redrawRow(index); 
      } 
}); 

espoir que cela aiderait!

---

Le code suivant est un exemple trivial mais complet.

Une table de cellules avec deux colonnes est définie. Chaque cellule de la première colonne affiche une question simple. Chaque cellule de la deuxième colonne est une cellule éditable qui vous permet de saisir votre réponse à la question affichée dans la première colonne. Si votre réponse est correcte, le texte de la réponse sera en gras et en noir. Sinon, le texte sera rouge avec le poids de la police normale.

code source de l'application GWT trivia:

import com.google.gwt.cell.client.Cell; 
import com.google.gwt.cell.client.EditTextCell; 
import com.google.gwt.cell.client.FieldUpdater; 
import com.google.gwt.core.client.EntryPoint; 
import com.google.gwt.user.cellview.client.CellTable; 
import com.google.gwt.user.cellview.client.Column; 
import com.google.gwt.user.cellview.client.TextColumn; 
import com.google.gwt.user.client.ui.RootPanel; 

import java.util.Arrays; 
import java.util.List; 

public class CellTableExample implements EntryPoint { 

    private static class Question { 

     private final String question; 
     private final String correctAnswer; 
     private String userProvidedAnswer; 

     public Question(String question, String correctAnswer) { 
      this.question = question; 
      this.correctAnswer = correctAnswer; 
      this.userProvidedAnswer = ""; 
     } 

     public String getQuestion() { 
      return question; 
     } 

     public String getCorrectAnswer() { 
      return correctAnswer; 
     } 

     public String getUserProvidedAnswer() { 
      return userProvidedAnswer; 
     } 

     public void setUserProvidedAnswer(String userProvidedAnswer) { 
      this.userProvidedAnswer = userProvidedAnswer; 
     } 
    } 

    private static final List<Question> questionList = Arrays.asList(
      new Question("Which city is capital of England?", "London"), 
      new Question("Which city is capital of Japan?", "Tokyo")); 

    @Override 
    public void onModuleLoad() { 

     final CellTable<Question> cellTable = new CellTable<>(); 

     TextColumn<Question> questionCol = new TextColumn<Question>() { 
      @Override 
      public String getValue(Question object) { 
       return object.getQuestion(); 
      } 
     }; 

     Column<Question, String> ansCol = new Column<Question, String>(new EditTextCell()) { 

      @Override 
      public String getValue(Question object) { 
       return object.getUserProvidedAnswer(); 
      } 

      @Override 
      public String getCellStyleNames(Cell.Context context, Question object) { 
       if (object.getUserProvidedAnswer().equalsIgnoreCase(object.getCorrectAnswer())) { 
        return "correct-answer"; 
       } else { 
        return "wrong-answer"; 
       } 
      } 

     }; 

     ansCol.setFieldUpdater(new FieldUpdater<Question, String>() { 
      @Override 
      public void update(int index, Question object, String value) { 
       object.setUserProvidedAnswer(value); 
       cellTable.redrawRow(index); 
      } 
     }); 

     cellTable.addColumn(questionCol, "Question"); 
     cellTable.addColumn(ansCol, "Your Answer"); 

     cellTable.setRowData(0, questionList); 

     RootPanel.get().add(cellTable); 

    } 
} 

Companion fichier css:

.correct-answer { 
    font-weight: bold; 
    color: black; 
} 

.wrong-answer { 
    font-weight: normal; 
    color: red; 
} 

Screenshot1: Juste après l'application a commencé. La colonne des réponses était vide.

screenshot2: Après avoir entré des réponses. Apparemment j'ai répondu correctement au premier mais pas au second.

Answer 2

Utilisez setCellStyleNames dans la méthode render:

Column<MyType, String> testColumn = new Column<MyType, String>(new EditTextCell()) { 
    @Override 
    public String getValue(MyType object) { 
     return object.getValue(); 
    } 

    @Override 
    public void render(Context context, MyType object, SafeHtmlBuilder sb) { 
     if(object.isValid()) 
      setCellStyleNames("validStyleNames"); 
     else 
      setCellStyleNames("invalidStyleNames"); 

     super.render(context, object, sb); 
    } 
}; 

Answer 3

aproche correcte est à overide getCellStyleNames méthode en classe anonyme:

new Column<Model, String>(new EditTextCell())

Vous devez retourner string name de classe css.