Bloc-note de développeurs

GWT : Application des styles

Nous avons maintenant une application qui fonctionne. Cependant elle n’est pas très jolie, nous allons lui ajouter des couleurs.

Style général

Dans un premier temps nous allons modifier le thème de l’application, c’est lui qui définira la tendance des couleurs. Ce thème se choisi dans le XML du module : GWTwitter.gwt.xml.

Le thème par défaut est le thème Standard :

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

Commentons cette ligne et enlevons le commentaire sur un des styles en dessous :

<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<inherits name='com.google.gwt.user.theme.dark.Dark'/>

Et voilà, le thème choisi est maintenant Dark. Ce thème est plutôt à utiliser pour des couleurs sombres.

GWTwitter0.3 Dark

Feuille de style

Passons maintenant à la feuille de style. C’est le fichier GWTwitter.css qu’on trouve dans le dossier WAR. Il défini l’ensemble des règles qui régissent l’affichage (positions, formes, alignements, couleurs, etc.). Pour plus de détails, je vous renvoi sur Wikipedia.

Nous allons donc maintenant créer 4 nouveaux styles :

• tweetsTable : Style de la flextable
• tweetsTableHeader : Style des entêtes
• tweetsTableHeaderDate : Style de l’entête « Date »
• tweetsTableRowOdd : Style des lignes paires

.tweetsTable{
  border: 1px solid silver;
  padding: 2px;
  margin-bottom:6px;
  width: 500px;
}
.tweetsTableHeader{
  background-color: #2062B8;
  color: white;
  font-style: italic;
}
.tweetsTableHeaderDate{
	width: 80px;
}
.tweetsTableRowOdd{
	background-color: #000;
}

Et ajoutons un style au div « page » (qui englobe tous nos éléments) pour laisser un peu d’espace autour :

#page{
	margin: 20px;
}

Application des styles

Nos styles étant prêts, il nous suffit de les appliquer aux différents éléments dans le code Java de notre Module : GWTwitter.java.

Nous allons effectuer ces tâches dans la méthode refreshTweetsTable() car c’est là dedans où nous avons accès à tout (table, entêtes, colonnes et lignes).

// La flextable
tweetsTable.addStyleName("tweetsTable");

// La ligne d'entêtes
tweetsTable.setText(0, 0, "Tweet");
tweetsTable.setText(0, 1, "Date");
tweetsTable.getRowFormatter().addStyleName(0, "tweetsTableHeader");

// La colonne Date
tweetsTable.getColumnFormatter().addStyleName(1, "tweetsTableHeaderDate");

// Boucle sur les lignes (une ligne sur deux change de style)
Iterator iterTweets = result.iterator();
int i = 1;
while(iterTweets.hasNext()){
	Tweet tweet = iterTweets.next();
	tweetsTable.setText(i, 0, tweet.getText());
	tweetsTable.setText(i, 1, DateTimeFormat.getMediumDateTimeFormat().format(tweet.getDate()));
	if (i%2==0) {
		tweetsTable.getRowFormatter().addStyleName(i, "tweetsTableRowOdd");
	}
	i++;
}

GWTwitter0.4 Dark

Comme d’habitude, vous pouvez télécharger cette version 0.4.

Tag: effet, formulaire, style
Vous avez aimé, alors partagez