web-dev-qa-db-fra.com

Remplacer le style GWT

J'ai eu une belle maquette HTML pur pour une page Web que je suis en train de recréer dans GWT. J'essaie d'utiliser les mêmes CSS dans mon application GWT, mais cela ne fonctionne pas bien pour moi. Les styles GWT semblent remplacer les miens. Je sais que je peux complètement désactiver les styles GWT, mais je préférerais que le style des composants GWT que j'ajoute (panneau d'onglets, bouton, etc.) soit ajouté. Existe-t-il un moyen de désactiver le style GWT et de ne l’activer que pour les composants que je choisis?

cssgwt
28
KevMo

J'ai réussi à résoudre le problème de redéfinition des règles css standard en héritant du fichier .css de mon projet dans le fichier .gwt.xml de mon projet. Lorsque vous définissez votre .css défini par l'utilisateur de la manière suivante - APRÈS la ligne d'héritage habituelle -, une seule règle a la priorité la plus élevée en cascade par rapport à la même règle, définie dans les feuilles de style gwt standard. Il a fallu quelques heures pour comprendre comment en hériter correctement, car au premier essai, il suffit de taper simplement <stylesheet src='WebTerminal.css' /&gt; dans mon fichier .gwt.xml et commenter <link type="text/css" rel="stylesheet" href="WebTerminal.css"> dans ma page d'hôte .html ne m'a apporté aucun résultat. La solution consiste donc à utiliser un chemin relatif, lorsque vous définissez votre .css dans .gwt.xml config, comme ceci:

<stylesheet src='../WebTerminal.css' />

Remarquez ../ au début de mon chemin relatif. Pour savoir comment cela fonctionne, ajoutez Window.alert(GWT.getModuleBaseURL()); en tant que première ligne de votre méthode onModuleLoad(). Il vous montrera quelque chose comme https://localhost:8080/myproject/resouces/webtermial/, alors qu'en fait votre URL de page hébergée ressemblerait à https://localhost:8080/myproject/resouces/WebTerminal.html. Ici monprojet/resouces est un répertoire, qui contient votre fichier .css, et lorsque vous le définissez dans .gwt.xml comme <stylesheet src='WebTerminal.css' />, Le compilateur commence à rechercher myproject/resouces/webtermial/WebTerminal.css et ne le trouve pas. C'est pourquoi l'ajout de ../ est parfois la seule chose à faire pour résoudre votre problème.

En plus des mots mentionnés ci-dessus, je tiens seulement à mentionner que je n'ai pas réussi à trouver une description de cette question dans le dernier documentaire ou au cours des discussions qui ont eu lieu dans les groupes Google. J'aurais bien aimé qu'il soit moins difficile à comprendre, car GWT a lui-même des problèmes bien plus complexes qu'un seul, qui doit avoir une description épuisée à l'intérieur du didacticiel.

23
vitrums

La raison pour laquelle votre style est remplacé est que, lorsque gwt compile votre projet, il inclut son propre fichier css par défaut. Le type de fichier css dépend du type de style par défaut que vous utilisez: 

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

Dans le scénario ci-dessus, un fichier clean.css est inclus. Il contient les styles génériques suivants qui compensent complètement votre modèle (les paramètres de marge et d'arrière-plan perturbent toujours mes modèles):

body, table td, select, button {
  font-family: Arial Unicode MS, Arial, sans-serif;
  font-size: small;
}
pre {
  font-family: "courier new", courier;
  font-size: small;
}
body {
  color: black;
 margin: 10px;
 border: 0px;
 padding: 0px;
 background: #fff;
 direction: ltr;
}
a, a:visited {
  color: #0066cc;
  text-decoration:none;
}

a:hover {
  color: #0066cc;
  text-decoration:underline;
}

select {
    background: white;
}

Si vous les supprimez et laissez tout le reste intact (en particulier si vous laissez tout ce qui commence par «gwt»), votre modèle ne sera pas affecté. 

N'oubliez pas - vous devez supprimer ces éléments chaque fois que vous compilez votre projet. 

J'espère que cela t'aides. 

11
Vladimir

Le plus simple est de remplacer les styles que vous ne voulez pas. Par exemple, si vous ne souhaitez pas que gwt stylise vos boutons, vous pouvez définir le style de la classe gwt-Button dans votre propre fichier CSS.

Plus d'informations ici .

4
DLH

Il existe une ressource spéciale dont vous pouvez hériter pour supprimer le fichier clean.css:

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

Alors, trouvez votre fichier * .gwt.xml et recherchez 

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

Et remplacez-le par la ligne ci-dessus.

3
Clay Lenhart

La solution consiste en fait à créer un dossier public/css dans le même répertoire que votre gwt.xml.

Ajoutez ces deux lignes à votre gwt.xml :

<stylesheet src='css/project-name.css'/>

et

<public path='public'/>

Placez votre fichier nom-projet.css dans le dossier css .

Cela fonctionne avec GWT Compile et Super Dev Mode .

2
Duncan Calvert

Vous pouvez utiliser la déclaration <! Important>. C'est l'un des choix les plus faciles

--- GWT ----

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 3px;
background: white;
}

--- Style personnalisé ---

.gwt-PopupPanel {
padding: 0px !important;
}

--- Résultat ---

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 0px;
background: white;
}
2
Pavel

Pour les personnes confrontées à une situation similaire, pour préciser la réponse donnée par stringo0, j'ai placé mes styles dans le fichier "GWT_APPNAME.css", où GWT_APPNAME est le nom du fichier généré par votre plugin GWT Eclipse lors de la création de votre projet.

Ce fichier css devrait être disponible directement sous le dossier war du même nom que votre page d'accueil html. J'ai essayé cela pour passer outre les styles gwt-anchor et cela a fonctionné.

.gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}
1
Prashanth

Vous pouvez supprimer le style GWT par défaut avec:

widget.setStyleName("");

Ou spécifiez votre propre style.

0
orad

La réponse de Vitrus a fonctionné pour moi, merci! Toutefois, les modifications apportées aux fichiers .css n'étaient pas reflétées dans l'application Web lors du rechargement de la page. cela semble être un problème de cache. Rafraîchir avec Ctrl + F5 résout ce problème. Plus d'informations ici: http://productforums.google.com/forum/#!topic/chrome/_oCbvfRwTok .

0
Milo

J'ai eu un problème similaire en essayant de définir une image d'arrière-plan et en définissant un arrière-plan transparent pour l'élément body, je l'ai résolu en définissant un style spécifique pour l'élément afin de pouvoir conserver les autres styles GWT:

<body id="elementId">...</body>

#elementId {
   background: transparent;
}

J'espère que c'est utile pour votre problème spécifique.

0
drginm

C’est une réponse rapide, mais heureusement utile.

Ce que j'ai fait, c'est que j'ai copié les styles que je veux à partir du style GWT par défaut. Par exemple, si vous avez sélectionné le style standard, GWT crée un fichier standard.css dans le fichier war/WEB-INF/appengine généré (quelque part dans cet ordre d'idées): j'ai copié tous les styles de bouton dans le fichier css de mon application, puis le fichier de configuration a choisi de ne pas utiliser le style GWT standard.

Cela a fait l'affaire pour nous.

0
stringo0