Discussion :

[claire34]

Coucou tout le monde je développe actuellement une application flex et je désire pouvoir intégrer ma feuille de style css dans mon code AS3.
Je sais le faire en mxml mais là en Actionscript 3 j'avoue que je suis un peu perdue.
Comment peut on intégrer un fichier css dans un code AS3?

Merci par avance

[Jim_Nastiq]

Salut,

pense a faire des recherches avant de poster

pour modifier le style d'un composant en AS3 il faut utiliser la méthode setStyle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

canvas.setStyle("backgroundColor", "#FF0000");

[claire34]

Oui merci

Par contre je dispose d'un fichier .css :

1) Est il possible d'appeler ce fichier .css depuis mon application.as ?
2) Ou dois je directement mettre la feuille de style dans application.as?

Merci et bonne soirée

Edit:

J'ai pu tester ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 button.setStyle("color", "red");
button.setStyle("borderColor", "yellow");
button.setStyle("cornerRadius", "10");
button.setStyle("fontStyle", "italic");

Je trouve très embêtant de déclarer chaque composant avec ses différents setstyle alors que j'ai travaillé une feuille .css qui sert à toute mon application (panel, box, button, etc etc...)

Est il possible d'appeller uniquement la feuille de style ?

Merci mille fois

[Kantizbak]

en fait : je ne crois pas que tu puisse "importer" une css en AS3
Tu peux définir des styleNames pour tes composants et t'appuyer sur la description du style dans ta CSS

Mais à la fin tu dois utiliser quelque chose du genre, au niveau de l'application (par exemple) et en Flex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<mx:Style source="styles.css"/>

voilà...

ensuite, il existe des techniques pour customiser par défaut ton composant (si le styleName correspondant n'existe pas dans la css importée justement) :

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
var styleNameFocus:String = selector.getStyle("styleNameFocus");
			var winFocusSelector:CSSStyleDeclaration = StyleManager.getStyleDeclaration("." + styleNameFocus);
			if(!winFocusSelector)
			{
				winFocusSelector = new CSSStyleDeclaration();
			}
			winFocusSelector.defaultFactory = function():void
			{
				this.headerHeight = 26;
				this.roundedBottomCorners = true;
				this.borderColor = 0xCCCCCC;
				this.borderThicknessTop = 0;
				this.borderThicknessRight = 3;
				this.borderThicknessBottom = 3;
				this.borderThicknessLeft = 3;
				this.borderAlpha = 1;
				this.backgroundAlpha = 1;
			}
			StyleManager.setStyleDeclaration("." + styleNameFocus, winFocusSelector, false);

C'est un exemple de code que j'ai trouvé dans FlexLib (pour le lien voir googlecode)