GWT - Style avec CSS
Les widgets GWT reposent sur des feuilles de style en cascade (CSS) pour le style visuel. Par défaut, le nom de classe de chaque composant estgwt-<classname>.
Par exemple, le widget Button a un style par défaut de gwt-Button et de la même manière que le widget TextBox a un style par défaut de gwt-TextBox .
Afin de donner à tous les boutons et zones de texte une police plus grande, vous pouvez mettre la règle suivante dans le fichier CSS de votre application
.gwt-Button { font-size: 150%; }
.gwt-TextBox { font-size: 150%; }Par défaut, ni le navigateur ni GWT ne créent par défaut idattributs pour les widgets. Vous devez explicitement créer un identifiant unique pour les éléments que vous pouvez utiliser dans CSS. Afin de donner un bouton particulier avec idmy-button-id une police plus grande, vous pouvez mettre la règle suivante dans le fichier CSS de votre application -
#my-button-id { font-size: 150%; }Pour définir l'id d'un widget GWT, récupérez son élément DOM, puis définissez l'attribut id comme suit -
Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")API de style CSS
Il existe de nombreuses API disponibles pour modifier les paramètres CSS de tout widget GWT. Voici quelques API importantes qui vous aideront dans votre programmation Web quotidienne à l'aide de GWT -
| N ° Sr. | API et description |
|---|---|
| 1 | public void setStyleName(java.lang.String style) Cette méthode effacera tous les styles existants et définira le style du widget sur la nouvelle classe CSS fournie à l'aide de style . |
| 2 | public void addStyleName(java.lang.String style) Cette méthode ajoutera un nom de style secondaire ou dépendant au widget. Un nom de style secondaire est un nom de style supplémentaire, donc s'il y avait des noms de style précédents appliqués, ils sont conservés. |
| 3 | public void removeStyleName(java.lang.String style) Cette méthode supprimera le style donné du widget et laissera tous les autres associés au widget. |
| 4 | public java.lang.String getStyleName() Cette méthode obtient tous les noms de style de l'objet, sous forme de liste séparée par des espaces. |
| 5 | public void setStylePrimaryName(java.lang.String style) Cette méthode définit le nom de style principal de l'objet et met à jour tous les noms de style dépendants. |
Par exemple, définissons deux nouveaux styles que nous appliquerons à un texte -
.gwt-Big-Text {
font-size:150%;
}
.gwt-Small-Text {
font-size:75%;
}
.gwt-Red-Text {
color:red;
}Vous pouvez maintenant utiliser setStyleName (Style) pour remplacer le paramètre par défaut par un nouveau paramètre. Après avoir appliqué la règle ci-dessous, la police d'un texte deviendra grande
txtWidget.setStyleName("gwt-Big-Text");Nous pouvons appliquer une règle CSS secondaire sur le même widget pour changer sa couleur comme suit -
txtWidget.addStyleName("gwt-Red-Text");En utilisant la méthode ci-dessus, vous pouvez ajouter autant de styles que vous le souhaitez à appliquer sur un widget. Si vous supprimez le premier style du widget bouton, le second style restera avec le texte.
txtWidget.removeStyleName("gwt-Big-Text");Styles primaires et secondaires
Par défaut, le nom de style principal d'un widget sera le nom de style par défaut de sa classe de widget, par exemple gwt-Button pour les widgets Button. Lorsque nous ajoutons et supprimons des noms de style à l'aide de la méthode AddStyleName (), ces styles sont appelés styles secondaires.
L'apparence finale d'un widget est déterminée par la somme de tous les styles secondaires qui lui sont ajoutés, plus son style principal. Vous définissez le style principal d'un widget avec la méthode setStylePrimaryName (String) . Pour illustrer, disons que nous avons un widget Label. Dans notre fichier CSS, nous avons les règles suivantes définies -
.MyText {
color: blue;
}
.BigText {
font-size: large;
}
.LoudText {
font-weight: bold;
}Supposons que nous voulions qu'un widget d'étiquette particulier affiche toujours du texte bleu et, dans certains cas, utilise une police plus grande et plus grasse pour plus de mise en valeur.
On pourrait faire quelque chose comme ça -
// set up our primary style
Label someText = new Label();
someText.setStylePrimaryName("MyText");
...
// later on, to really grab the user's attention
someText.addStyleName("BigText");
someText.addStyleName("LoudText");
...
// after the crisis is over
someText.removeStyleName("BigText");
someText.removeStyleName("LoudText");Association de fichiers CSS
Il existe plusieurs approches pour associer des fichiers CSS à votre module. Les applications GWT modernes utilisent généralement une combinaison de CssResource et UiBinder. Nous n'utilisons que la première approche dans nos exemples.
Utilisation d'une balise <link> dans la page HTML hôte.
Utilisation de l'élément <stylesheet> dans le fichier XML du module.
Utilisant un CssResource contenu dans un ClientBundle.
Utilisation d'un élément <ui: style> en ligne dans un UiBinder modèle.
Exemple CSS GWT
Cet exemple vous guidera à travers des étapes simples pour appliquer différentes règles CSS sur votre widget GWT. Laissez-nous avoir Eclipse IDE fonctionnel avec le plug-in GWT en place et suivez les étapes suivantes pour créer une application GWT -
| Étape | La description |
|---|---|
| 1 | Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application . |
| 2 | Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé. |
| 3 | Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée. |
Voici le contenu du descripteur de module modifié src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name = 'com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path = 'client'/>
<source path = 'shared'/>
</module>Voici le contenu du fichier de feuille de style modifié war/HelloWorld.css.
body {
text-align: center;
font-family: verdana, sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-Button {
font-size: 150%;
font-weight: bold;
width:100px;
height:100px;
}
.gwt-Big-Text {
font-size:150%;
}
.gwt-Small-Text {
font-size:75%;
}Voici le contenu du fichier hôte HTML modifié war/HelloWorld.html pour accueillir deux boutons.
<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id = "mytext"><h1>Hello, World!</h1></div>
<div id = "gwtGreenButton"></div>
<div id = "gwtRedButton"></div>
</body>
</html>Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui se chargera d'ajouter deux boutons en HTML et appliquera un style CSS personnalisé.
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// add button to change font to big when clicked.
Button Btn1 = new Button("Big Text");
Btn1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
RootPanel.get("mytext").setStyleName("gwt-Big-Text");
}
});
// add button to change font to small when clicked.
Button Btn2 = new Button("Small Text");
Btn2.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
RootPanel.get("mytext").setStyleName("gwt-Small-Text");
}
});
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
}
}Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -
Maintenant, essayez de cliquer sur les deux boutons affichés et observez "Hello, World!" texte qui ne cesse de changer de police en cliquant sur les deux boutons.