Bonjour à tous!
Je découvre actuellement GWT en version (je suis en version V2.4)...
Bref, pour le moment je découvre, et je suis face à une question, je vous expose la situation.
mon module gwt contient ceci (de manière à hériter de ce thème):
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2<inherits name="com.google.gwt.user.theme.clean.Clean" />
C'est mon fichier ui.xml .
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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:mikon.bb.client" xmlns:v="urn:import:mikon.bb.client.view" > <ui:style src="bb.css" > </ui:style> <g:TabLayoutPanel addStyleNames="{style.mikon-content}" animationDuration="500" barHeight="30" ui:field="tabLayoutPanel" > <g:tab> <g:header> Home1 </g:header> <g:HTML addStyleNames="{style.mikon-display}" > Coucou1 </g:HTML> </g:tab> <g:tab> <g:header> Home2 </g:header> <v:TeamView addStyleNames="{style.mikon-display}" ui:field="teamView" > </v:TeamView> </g:tab> <g:tab> <g:header> 1 </g:header> <g:HTML> d </g:HTML> </g:tab> <g:tab> <g:header> 3 </g:header> <g:HTML> b </g:HTML> </g:tab> <g:tab> <g:header> 5 </g:header> <g:HTML> a </g:HTML> </g:tab> </g:TabLayoutPanel> </ui:UiBinder>
Cette ligne :
Fait référence au fichier css qui contient ça :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3<g:TabLayoutPanel addStyleNames="{style.mikon-content}"
Bon déjà, j'utilise !important, qui à mon sens est un hack dégeu', mais passons.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 .mikon-content { width: 90%; top: 100px !important; left: 5% !important; background-color: #000000 !important; opacity: 0.5; }
Je génère, et après j'obtiens mon tab panel avec mes onglets tout bien.
Arrive le moment ou je veux changer les couleurs des différents composants du tabPanel.
Après avoir fait un coup de FireBug, je vois que les headers des onglets sont sur un div qui est de classe gwt-TabLayoutPanelTabs, et j'aimerai bien changer sa couleur! Mais comment faire au plus propre?
Le problème c'est que dans mon fichier ui.xml je n'ai pas "accès" à ce div :/
- dans mon .html ajouter un lien vers un fichier CSS qui surchargera cette classe?
- ajouter dans mon module la déclaration d'un fichier CSS (dans la même veine que la solution précédente)
Enfin, j'espère que j'ai été clair, je tiens à préciser que j'ai déjà pas mal feuilleté google et Cie, et je n'ai rien trouvé de satisfaisant (chez Google, ils disent que les 2 méthodes ci dessus sont "depecrated")... Bref, toutes les remarques/astuces/etc seront les bienvenues !!!!
Merci bien ;
Partager