Custom Alert CSS

Version imprimable

Custom Alert CSS

Bonjour,

j'ai une application Flex 4 et je souhaiterais, via CSS (ou Skin), pouvoir customizer la fenêtre "Alert". (Couleur de fonds, couleur de Police, ...).

Voici ce que je mets dans ma CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 mx|Alert { color: black; font-size: 18; title-style-name : "title"; } .title { color: black; font-size:12; }
Mais Rien ne se passe, j'ai tj les écritures en blancs...

Est-ce que qlq à déjà eu le problème? Comment doit-on s'y prendre pour customizer l'Alert?

Merci

10/02/2011, 13h45
Jim_Nastiq

salut,

Peux tu me montrer comment tu appelles ton css et un peu de code stp ?

Code:

1
2
3
4
5
6
7
8
9
10
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
			xmlns:s="library://ns.adobe.com/flex/spark" 
			xmlns:mx="library://ns.adobe.com/flex/mx" 
			minWidth="955" minHeight="600" xmlns:component="component.*">
	<fx:Declarations>
 
	</fx:Declarations>
	<fx:Style source="css/style.css" />
	<component:Toto/>
</mx:Module>

L'appel à la CSS fonctionne bien car les boutons, datagrid, panel et autre sont bel et bien Customizé. Il y a juste un problème avec le "Alert".

CSS :

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
mx|Panel{
	borderColor: #e2e2e2;
	borderAlpha: 1;
	highlightAlphas: 0.48, 0.29;
	headerColors: #ffffff, #e2e2e2;
	backgroundColor: #e2e2e2;
	titleStyleName: "mypanelTitle";
}
 
.mypanelTitle {
	color: #666666;
}
 
s|Panel{
	skin-class :ClassReference("fluence.lib.skins.panelSkin");
}
s|Button{
	skin-class :ClassReference("fluence.lib.skins.btnSkin");	
}
 
mx|Button {
	fillColors: #70644E, #70644E, #FFFFFF, #FFFFFF;
	fillAlphas: 1, 1, 0.75, 0.65;
	color: #ffffff;
	textRollOverColor: #70644E;
	theme-color: #70644E; /*BRUN*/
}
 
mx|ProgressBar{
	bar-color: #70644E; /*BRUN*/
}
 
mx|Alert 
{         
	color: black;                
	font-size: 18;         
	title-style-name : "title";    
}     
.title     
{         
	color: black;               
	font-size:12;     
}

10/02/2011, 18h05
Jim_Nastiq

Hum ... étrange, je ne vois pas ce qui ne colle pas.
As tu testé ta css sur un projet Flex indépendant, tout simple qui ne fait qu'afficher une alert ?

PS: Alert étendant la classe Panel, il y'a peut être une subtilité à ce niveau, vérifie en commentant ton css affectant ton Panel ;)
11/02/2011, 07h52
npirard

Bonjour,

j'ai fait plusieurs tests et voici ce qui se passe.

Si je fais une CSS uniquement avec le Alert dans mon application rien ne se passe.
Mon application et gérée via des Skins dans Flex 4. (Un fichier .as relié dans la css avec son Skin mxml). Ce qui veut dire que le Alert.Show se fait dans une fonction Action Script.

Je viens de créé un nouvelle application "test" mxml dans laquelle j'ai un bouton et lors du click je fais un Alert.Show.... et là, mon Alert est bein customizée.

Je reprend donc le code de cette CSS que je remet au niveau de mon autre application, et là toujours rien...

Etrange donc... :calim2:
11/02/2011, 08h33
npirard

EUREKA!

Ca fonctionne.

En fait j'utilise mon application dans une application mère.
Certains composants prenneent les infos CSS de mon application et certain de mon application mère... dont Alert, qui n'était défini que dans ma sous application...

J'ai donc mis la même CSS au 2 niveau et Bingo... ça fonctionne!

Merci de votre aide! :ccool:
11/02/2011, 10h10
Jim_Nastiq

Aaaah c'est un module ??!! :mouarf:

bon en tout cas merci d'avoir pris le temps de revenir pour partager la solution ;)

PS: penses au tag résolu (bouton en bas de la discussion)