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

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.

var selector:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".exampleSelector");

Si vous essayez d'accéder à un sélecteur qui n'existe pas, l'application Flex enverra une erreur d'exécution

Vous pouvez utiliser la méthode setStyle() d'un objet CSSStyleDeclaration pour éditer les styles de cet objet. La méthode setStyle() de CSSStyleDeclaration est identique à la méthode du même nom de UIComponent. Vous lui passez le nom et le style de la nouvelle valeur comme dans l'exemple suivant:

selector.setStyle("color", "red");

Si vous voulez ajouter un nouveau sélecteur à l'exécution qui n'était pas défini à la compilation, vous pouvez le faire en construisant un nouvel objet de type CSSStyleDeclaration et en l'ajoutant au StyleManager en utilisant la méthode setStyleDeclaration(). La méthode setStyleDeclaration() permet de spécifier un nom pour sélecteur, un objet de type CSSStyleDeclaration et une valeur Boolean indiquant si les composants doivent être immédiatement affectés. Une valeur "null" pour le nom obligea le StyleManager à utiliser le nom de l'objet CSSStyleDeclaration.

var selector:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".newSelector");
StyleManager.setStyleDeclaration(null, selector, true);

Modifier la déclaration de style d'un composant peut être une opération lourde. Si vous allez modifier plus d'une déclaration à la fois, il est mieux de mettre le 3ème paramètre à false sauf pour le dernier appel:

StyleManager.setStyleDeclaration(".newSelector1", selector1, false);
StyleManager.setStyleDeclaration(".newSelector2", selector2, false);
StyleManager.setStyleDeclaration(".newSelector3", selector3, false);
StyleManager.setStyleDeclaration(".newSelector4", selector4, true);

Vous devrez faire attention à ne pas écrire sur un sélecteur déjà existant. La plupart des composants de base ont des sélecteurs définis dans le document default.css (utilisé par le thème par défaut de Flex), qui est compilé avec les applications Flex par défaut. Cela veut dire que même si vous n'aviez pas défini de sélecteur de type pour Button, votre application Flex utilise probablement celui compilé dans default.css.

Donc, si vous remplacez ce sélecteur de type en appelant setStyleDeclaration(), vous perdrez tous les styles du Button par défaut. La meilleure solution dans ce cas là est de récupérer la référence d'un objet CSSStyleDeclaration existant et d'éditer ses valeurs en utilisant setStyle()