Comment utiliser un autre thème graphique ?
Utiliser une des 3 variantes proposées en commentant les autres.
1
2
3
| <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'/> --> |
Pourquoi je ne peux pas modifier par CSS les couleurs des bordures des panneaux GWT ?
Parce que ce sont des images. Il faut fabriquer d'autres images.
Où trouver d'autres thèmes graphiques pour GWT ?
Il existe une petite application qui permet de fabriquer un thème avec votre couleur préférée.
Comment installer ce thème graphique "couleur" généré ?
- Copier le fichier gwttheme.jar généré dans le dossier war/WEB-INF/lib de votre projet GWT.
- Ajouter la ligne <inherits name='com.sensei.themes.couleur.Couleur'/> dans votre module.gwt.xml
- Désactiver le style par défaut en retirant la ligne <inherits name='com.google.gwt.user.theme.standard.Standard'/>
- Ajouter la librairie gwttheme.jar dans le classpath de votre projet GWT. (Faites Add Jar... et aller pointer sur le jar précédemment placé dans war/WEB-INF/lib )
- Décompresser le contenu du dossier public (gwt\couleur\...) de gwttheme.jar dans le dossier war de votre projet.
Comment définir l'icône à côté de l'URL ?
- Une solution consiste à créer un fichier image "favicon.png" et le placer à la racine de votre application (directement dans le dossier war)
- Une autre solution consiste à créer une image icon.png et d'ajouter un lien vers cette image dans le fichier html de votre module (module.html par exemple)
<link rel="shortcut icon" type="image/png" href="mod/img/icon.png" id="icon" />
- mod représente le nom du dossier de compilation de votre module. Par défaut, c'est le nom du module préfixé par le nom du package.
Il peut être renommé avec l'attribut rename-to de la balise module de votre module (module.gwt.xml)
- img peut être un dossier ajouté après la compilation ou bien un sous dossier du dossier public qui sera recopié à chaque compilation.
Comment modifier l'icône à côté de l'URL par programmation ?
Vous noterez l'id "icon" dans la ligne :
<link rel="shortcut icon" type="image/png" href="mod/img/icon.png" id="icon" />
Il permet de le modifier par cette méthode ajoutée à la classe entry-point déclarée dans votre module :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| /**
* Définit l'icone de la page.<br>
*
* @param iconPath L'emplacement de l'icone.
*/
public void setIcon(String iconPath)
{
if (iconPath != null)
{
this.iconPath = iconPath;
Element element = DOM.getElementById("icon");
DOM.setElementProperty(element, "href", iconPath.toString());
}
} |
Comment se faire une belle petite page d'attente en attendant que le code JS soit chargé ?
index.html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" type="image/png" href="gui/images/favicon.png" id="icon" />
<link rel="stylesheet" type="text/css" href="gui/styles/loading.css" />
<script type="text/javascript" language="javascript" src="gui/gui.nocache.js"></script>
<title>Chargement en cours ...</title>
</head>
<body style="overflow: hidden">
<div id="loading">
<div class="loading-indicator">
<img id="loading-img" src="gui/images/loading.gif" width="32" height="32"/>
Merci de patienter<br/>
<span id="loading-msg">Chargement en cours ...</span>
</div>
</div>
</body>
</html> |
loading.css :
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
29
30
31
32
33
| #loading
{
position: absolute;
left: 45%;
top: 40%;
margin-left: -45px;
padding: 2px;
z-index: 20001;
height: auto;
border: 1px solid #ccc;
}
#loading .loading-indicator
{
background: white;
color: #444;
font: bold 13px tahoma, arial, helvetica;
padding: 10px;
margin: 0;
height: auto;
}
#loading-img
{
margin-right:8px;
float:left;
vertical-align:top;
}
#loading-msg
{
font: normal 10px arial, tahoma, sans-serif;
} |
loading.gif :
Vous mettrez l'image que vous voudrez, moi, je l'ai généré avec cet outil et ces paramètres :
Indicator type : Indicator Big
Background color : FFFFFF
Foreground color : 000000
Mickael Baron 
Brouillon de FAQ
Répondre avec citation
)
)
Partager