Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

12jan/093

Flex PopUp – Personnaliser les styles d'une Alert (couleur, icône, alpha, boutons et texte)

Il y a déjà plusieurs articles sur flex-tutorial qui portent sur la manière de personnaliser l'apparence d'une fenêtre Alert. Voici une application trouvée sur ce blog qui résume bien les modifications que vous pouvez faire avec un démonstrateur. Il faut rappeler que l'utilisation des Alert est assez simpliste, si vous voulez affichez de la donnée de manière plus complexe, il vaut mieux ouvrir des fenêtres avec le PopUpManager.

Voici l'application en question (traduite):

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 11

9jan/090

Flex ToolTip – Appliquer des Styles aux ToolTips

Vous pouvez personnaliser l'apparence des toolTips en utilisant les styles. Le Framework Flex ne permet pas de fixer des styles pour des toolTips individuels, vous devez fixer le style des toolTips globalement pour toutes les instances. Vous pouvez le faire en changeant la définition du style ToolTip en utilisant le sélécteur CSS de la classe. L'exemple suivant montre comment changer la définition du style en utilisant le tag Style (il peut aussi être fait dans une feuille CSS séparée):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Style>
		ToolTip{
			fontFamily: "_typewriter";
			background-color:#FFFFFF;
		}
	</mx:Style>
	<mx:Button label="Tool Tip" toolTip="Exemple de toolTip avec style"/>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 11

31mai/087

Flex CSS: Modifier les CSS à l'exécution (Runtime CSS)

Dans Flex 2.0.1 ou supérieur, vous pouvez utiliser les CSS à l'exécution. Lorsque vous utilisez les CSS directement dans votre application, ceux-ci sont intégrés au moment de la compilation. On va maintenant voir comment charger et appliquer de nouvelles feuilles de style CSS à l'exécution, c'est à dire après le chargement de l'application Flex.

Puisque les styles Flex requièrent parfois des éléments graphiques, des skins, des classes ou des polices d'écriture, les CSS utilisés à l'exécution doivent être précompilés en SWF. Quand vous utilisez Flex 2.0.1, vous pouvez utiliser le compilateur mxmlc pour compiler un fichier CSS en fichier SWF qui inclut tous les éléments graphiques. Pour compiler un fichier CSS, passez simplement le chemin du fichier comme seul argument du compilateur comme dans l'exemple suivant:

mxmlc styles.css

Vous pouvez aussi les compiler directement dans Flex Builer en faisant Clic Droit sur le fichier>Compile CSS to SWF

22mai/082

Flex Styles: Utilisation du StyleManager et setStyleDeclaration

De manière transparente, Flex convertit tous le CSS à des instructions ActionScript qui sont gérées par une classe appelée mx.managers.StyleManager. Dans la plupart des cas, il n'est pas nécessaire de travailler directement avec la classe StyleManager. Cependant, dans le cas où vous voudriez avoir un contrôle plus précis sur les modification à l'exécution (modifications faites avec les sélecteurs de classe ou de type), vous devrez travailler avec le StyleManager.

La classe StyleManager permet d'accéder aux sélecteurs existants qui ont été crées en CSS, et vous autorise à ajouter de nouveaux sélecteurs avec du code. Pour accéder à un sélecteur existant, utilisez la méthode statique nommée getStyleDeclaration(). Cette méthode requiert une String en paramètre spécifiant le nom du sélecteur. Le nom du sélecteur doit inclure le point initial dans le cas d'un sélecteur de classe. La méthode retourne un objet mx.styles.CSSStyleDeclaration représentant le sélecteur.