Discussion :

[womannosky]

Bonjour,

Avant, en GWT 2.0, on disposait du nom des styles des composants graphiques comme par exemple .gwt-HTML. Ce n'est plus le cas à présent (j'utilise la version 2.3 de GWT).

Sauriez-vous comment changer le style des headers (titre des colonnes) dans une CellTable ?

J'ai essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
cellTable.addColumnStyleName(0, "colonneTableau");

Mais cela change le style des cellules d'une colonne (ici la colonne 0) et non le style des headers. Normal vu le nom de la méthode mais il n'en existe pas pour les headers.

[rmartinsfidalgo]

Ah les joies de CSS avec les Cell...
Alors il y a deux moyens de faire, une que je qualifierai de standard GWT et une plus traditionnel avec stylename et CSS.

Alors la méthode GWT
Les info peuvent être trouvés sur http://code.google.com/intl/fr-FR/we...ml#CssResource.
Cela consiste a crée une interface de ressource ou il est possible de définir sa propre CSS d'une CellTable. Ensuite lors de la creation de la table il faut passer l'interface specifique

Interface

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
public interface CellTableResources extends CellTable.Resources {
    /**
     * The styles used in this widget.
     */
    @Source("example/forms/client/resources/MyCellTable.css")
     CellTable.Style cellTableStyle();
}

Il faut crée sa propre CSS en se basant sur http://code.google.com/p/google-web-...ble.css?r=9513. Attention!! J'ai du mal comprendre certains details de la doc car j'ai du a chaque fois copier tout le CSS et redéfinir se qui m’intéressait sinon j'avais toujours des erreurs (a la compile si je ne me trompe pas). Je pense qu'il y a moyen de redefinir que ce qui nous intéresse mais j'ai mal compris exactement comment.

Et biensur lors de la creation de sa table il faut y ajouter l'interface de ressource

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
private final static CellTable.Resources CELL_RESOURCES = GWT.create(CellTableResources.class);
 
.....
 
CellTable<X> cellTable = new CellTable<X>(pagesize, CELL_RESOURCES );

Sinon il y a la maniéré plus traditionnelle du CSS
Mais c'est plus "tricky"...

Alors d'abord il faut ajouter un style a sa table, et non plus a la cellule (malheureusement)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
cellTable.addStyleName("myCellTableStyle");

Et commencer a trifouiller le code génère et savoir exactement se que se qui nous intéressent a définir..

Voici mon exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/*le premier header*/
myCellTableStyle th:first-child {
    border-left: 1px solid #d3d3d3;
}
/*les autres header*/
.myCellTableStyle th {
    border-right: 1px solid #d3d3d3;
}
/* mettre l'icone de trie du coté droit*/
.myCellTableStyle th div div:first-child {
    margin-left: 100%;
}

A toi de voir ce que tu préfères utiliser.

[womannosky]

Merci rmastinsfidalgo, j'ai choisi la méthode plus "tricky" et cela fonctionne bien !

Par contre, il y a quelque chose que je n'arrive pas à comprendre. Pour la première méthode, une fois que tu as défini ton interface comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
public interface CellTableResources extends CellTable.Resources {
    /**
     * The styles used in this widget.
     */
    @Source("example/forms/client/resources/MyCellTable.css")
     CellTable.Style cellTableStyle();
}

Et que ta css est trouvée avec les styles modifiés, tu n'as besoin de rien faire d'autres ?
La méthode cellTableStyle() mappe directement avec la css ?

[rmartinsfidalgo]

De rien

Pour la première méthode tu es obligé de dire a ta Table (lors de la création de celle-ci) quelle ressource la table doit prendre, sinon il prend celle par défaut donc celui de GWT et non la tienne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 /**
   * Constructs a table with a default page size of 15.
   */
  public CellTable() {
    this(DEFAULT_PAGESIZE);
  }
 
  /**
   * Constructs a table with the given page size.
   * 
   * @param pageSize the page size
   */
  public CellTable(final int pageSize) {
    this(pageSize, getDefaultResources(), null);
  }

[womannosky]

Ok. Merci pour la réponse à mes questions.