[GWT 2.4] UiBinder, CSS, et Cie
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:
1
2
|
<inherits name="com.google.gwt.user.theme.clean.Clean" /> |
Code:
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> |
C'est mon fichier ui.xml .
Cette ligne :
Code:
1
2
3
|
<g:TabLayoutPanel
addStyleNames="{style.mikon-content}" |
Fait référence au fichier css qui contient ça :
Code:
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;
} |
Bon déjà, j'utilise !important, qui à mon sens est un hack dégeu', mais passons.
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 ;
