Discussion :

[Goupo]

Salut à tous,

Je suis en train de suivre le tutoriel de premier projet GWT.

J'ai quelques interrogations quant à la partie ou l'auteur créé un FlexTable puis lui applique du code CSS pour modifier l'apparence de la ligne d'en-tête (th) et d'une ligne sur deux.

Voilà le code GWT, le code CSS n'est pas disponible :

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
17
18
19
20
21
22
23
24
25
26
27
28
public class ContactsPanel extends VerticalPanel {
 
	private FlexTable t = new FlexTable();
 
	public ContactsPanel() {
 
	    t.setTitle("Contacts");	
	    t.setText(0, 0,"Nom");
	    t.setText(0, 1,"Prénom");
	    t.setText(0, 2,"Email");
	    t.setText(0, 3,"Tel");
	    t.setWidth("100%");
	    t.setCellSpacing(2);
 
	    for (int i = 0; i < Contact.getAllContacts().length; ++i)
	      addContact(Contact.getAllContacts()[i],i+1);
 
	    this.add(t);
	    this.setWidth("100%");
	 }
 
	private void addContact(Contact contact,int i) {
	    t.setText(i, 0,contact.getNom());
	    t.setText(i, 1,contact.getPrenom());
	    t.setText(i, 2,contact.getEmail());
	    t.setText(i, 3,contact.getTel());    
	}
}

Voilà le résultat obtenu par l'auteur après application du code CSS.

Alors, il y a plusieurs choses qui me laissent perplexe :
- Quelque soit la cellule, elle est crée de la même manière. Pourtant, l'auteur parvient à viser les cellules d'en-tête puis une ligne sur deux.
- Lorsque j'affiche le code source de la page (la sienne, comme la mienne), il n'y a que le code html qui est écrit en dur dans le fichier html. Je ne vois pas le code généré par GWT.

Saurez vous m'éclairer?

Merci d'avance pour vos réponses.

[Goupo]

Lorsque que j'analyse le code avec Firebug, je vois que l'auteur a ajouté des classes à ses cellules. Ce n'est pas le cas de mon côté, avec le même code.

J'en déduis que l'auteur a ajouté dans son code GWT, de quoi attribuer des classes à ses cellules. Sauf qu'il n'est pas expliqué comment isoler une cellule ou une ligne pour lui attribuer un style (setStyleName).

Je n'ai pas trouvé ces infos sur Google...

[Goupo]

J'ai trouvé ma réponse :

Code :

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

table.getRowFormatter().addStyleName(0, "contact-row-head");

Il faut passer par le RowFormatter pour pouvoir ajouter le Style. Le premier paramètre correspond au numéro de la ligne.

Le CellFormatter fonctionne dans le même esprit.

@ plus!