Y a t-il plusieurs fichiers CSS dans gwt ?

**Eléonore23** · 20/07/2010, 14h47

Je développe actuellement une application web à l’aide de gwt 2.0. Je suis partie de l’exemple et n’ai supprimé et /ou ajouté que des classes java. Pourriez-vous me dire, s’il vous plait, s’il est possible que j’ai des fichiers CSS autre que celui situé dans le dossier war ? (Je pose la question car n’arrive pas à modifier tout ce que je veux en modifiant ce fichier CSS qui se trouve dans le dossier war. Certaines modifs passent, d’autres pas. Je me demande donc s’il n’y a pas de conflits avec d’autres fichiers que je ne verrais pas.)
Merci d’avance pour votre aide.

**benwit** · 20/07/2010, 16h14

Il y a les fichiers standard.css et standard_rtl_css mais à priori, je suppose qu'il n'utilise que l'un ou l'autre.

Pour modifier les styles, il est préférable de ne pas modifier ces fichiers mais de créer son propre fichier css où on redéfinira les styles css souhaités.

Le truc à faire est d'insérer le lien vers son fichier css après le script js de gwt car l'ordre des css a une importance pour la redéfinition des propriétés.

**Eléonore23** · 20/07/2010, 16h44

Je te remercie pour ta réponse.
Mais peux-tu me dire ou se trouve les fichiers dont tu parles ? font-ils partie de la librairie gwt ?

Le truc à faire est d'insérer le lien vers son fichier css après le script js de gwt car l'ordre des css a une importance pour la redéfinition des propriétés.

excuse-moi mais je ne comprends pas ce que tu as voulu dire.
Personnellement, j'attache un style CSS à un élément du javascript avec une ligne du genre :

Code :

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

1
2
 
button.addStyleName("buttonStyle");

Dans mon fichier CSS cela donne :

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
 
 .buttonStyle {
  width:150px;
  height:30px;
    border-color:red;
  text-decoration:none;
  color:rgb(255, 255, 102); /*couleur du texte sur les boutons*/
  text-align:center;
  font-weight:bold;
  background-color:#0000;
  padding:5px;
  border-style:outset;
  border-width:10px;
  border-color: red;
}

Et je fais appelle à mon fichier css dans le fichier html comme ceci :

Code :

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

1
2
 
 <link type="text/css" rel="stylesheet" href="Weblux.css">

dans la balise <head> et je mets ceci dans le <body> :

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
 
      <tr>
      		<SPAN class = "buttonStyle"/>
      		<SPAN class = "titreHPanelStyle"/>
            <SPAN class = "textEastVPanelStyle"/>
            <SPAN class = "contentEastVPanelStyle"/>
            <SPAN class = "textSouthVPanelStyle"/>
            <SPAN class = "contentSouthVPanelStyle"/>
            <SPAN class = "contenuCentreVPanelStyle"/>
            <SPAN class = "flexTableFlechesStyle"/>
            <SPAN class = "textNorthStyle"/>
 
         <td id="dialogVPanel"/>
 
      </tr>

Cela se passe bien pour certains éléments et pas pour d'autres.
Par exemple, je parviens à changer la couleur du texte d'un bouton mais pas sa forme, ses bord ou sa couleur de fond.

**benwit** · 20/07/2010, 17h05

1°) Les fichiers dont je parles sont les fichiers css que tu retrouves dans le dossier de compilation de gwt (WAR\{NonDeTonModule}\gwt)
si tu as gardé <inherits name='com.google.gwt.user.theme.standard.Standard'/> dans ton module gwt bien entendu.

2°) Ce que je veux dire :

Code :

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

1
2
3
4
5
6
7
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Web Application Starter Project</title>
<!-- ici en A -->
    <script type="text/javascript" language="javascript" src="demo/demo.nocache.js"></script>
<!-- ici en B -->
  </head>

Si tu as un fichier Weblux.css et si tu redéfinis par exemple un style de gwt comme .gwt-Button, le dernier qui a parler à raison ! ( Cascading Style Sheet)
Si tu mets ta balise <link type="text/css" rel="stylesheet" href="Weblux.css"> en A, c'est le style .gwt-Button de standard.css de gwt qui s'applique après ton style .gwt-Button de Weblux.css
Si tu mets ta balise <link type="text/css" rel="stylesheet" href="Weblux.css"> en B, c'est ton style .gwt-Button de Weblux.css qui s'applique après le style .gwt-Button de standard.css de gwt.
Tu vois la différence ?

3°) Il est conseillé par google de créer ton propre fichier css et donc de rdéfinir tes styles en utilsant leurs noms prédéfinis (cf javadoc.)
Dans ce cas, tu n'as pas besoin de faire un button.setStyle ou button.addStyle mais il faut faire attention à l'ordre de chargement des css comme je te l'indique au point 2. L'ordre de tes includes css est important et ceux de google sont inclus dynamiquement par js.

4°) Ceci étant dis, tu peux également ajouter des styles comme tu le fais, ce qui fera au final pour ton bouton :
<button class="gwt-button buttonStyle" > ...
Et on en revient à l'ordre des css. Si buttonStyle est dans une css avant celle de gwt, les propriétés qu'il a en commun avec gwt-button seront perdues.
Si c'est l'inverse, ce sont les tiennes qui prennent le dessus.

Bref, pour faire simple, essaye de mettre <link type="text/css" rel="stylesheet" href="Weblux.css"> juste avant le </head>

**Eléonore23** · 20/07/2010, 17h27

merci pour tes explications.
J'ai bougé la ligne de code comme tu me l'as indiqué mais ça ne change rien !

**benwit** · 20/07/2010, 18h06

Plusieurs pistes :

- bien vider le cache du navigateur pour qu'il se force à recharger la css (CTRL + F5) et vérifier éventuellement qu'il a la bonne css avec firebug

- utiliser background-color:#000; ou #000000; Je suis pas certain qu'il comprenne #0000;

- essayer avec la méthode setStyleName au lieu de addStyleName

Ps : Je vois pas ce que viennent faire les span car tu leur met un style mais ça n'a rien a voir avec ton bouton dans le code java.

**Raphaël Brugier** · 21/07/2010, 09h26

Aussi, si tu es en gwt 2.0 il est préférable d'utiliser l'interface CssResource pour déclarer et ajouter des styles à tes widgets.

http://code.google.com/intl/fr-FR/we...ml#CssResource

C'est la méthode recommandé pour les nouvelles applications, et encore plus si tu utilise UiBinder. ça demande un peu de temps à prendre en main, mais après c'est royal !

**Eléonore23** · 21/07/2010, 10h23

J’y suis arrivée ! ! !
En remplaçant mes « addStyleName » par des « setStyleName ».

Merci beaucoup pour ton aide précieuse benwit !

Envoyé par benwit

utiliser background-color:#000; ou #000000; Je suis pas certain qu'il comprenne #0000;

Il y a effectivement une différence : j’obtiens du noir avec :#000 ou #000000 tandis que #0000 donne un jaune pale.

Envoyé par benwit

Ps : Je vois pas ce que viennent faire les span car tu leur met un style mais ça n'a rien a voir avec ton bouton dans le code java.

Je les ai enlevés et effectivement cela de lui fait ni chaud, ni froid.

Envoyé par Raphaël Brugier

Aussi, si tu es en gwt 2.0 il est préférable d'utiliser l'interface CssResource pour déclarer et ajouter des styles à tes widgets.

Je regarderais cela quand j’aurai un peu plus de temps. Merci pour le tuyau.

Y a t-il plusieurs fichiers CSS dans gwt ?

GWT et Vaadin Java

Discussions similaires

Partager

Partager