Flex Styles: Styles Global et Priorités entre les Styles
Vous pouvez appliquer des styles globaux en utilisant le sélecteur "global". Vous pouvez utiliser ce sélecteur dans les feuilles CSS externes, les déclarations à l'intérieur des balises <mx:Style> ou en utilisant le StyleManager. Les Styles globaux ont la priorité la plus basse, ce qui veut dire qu'il sera appliqué uniquement s'il n'est pas écrasé par un paramètre de plus haute priorité (sélecteur de type/class ou instance de style).
L'exemple suivant utilise le sélecteur "global" avec aussi un sélecteur de classe.
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.
Flex Styles: Instances de Styles et Inline Style
Les instances de Style sont les styles fixés pour une instance spécifique d'un composant. Vous pouvez fixer ces instances de Style en utilisant du MXML ou de l'ActionScript. Fixer les instances de Style en utilisant du MXML est souvent appelé "inline style" car vous spécifiez simplement la valeur d'un attribut dans le tag du composant.Voici un exemple d'une bouton (Button) pour lequel on modifie le style "color":
<mx:Button label="Exemple" color="red"/>
Vous pouvez fixer plusieurs styles "inline" à la fois. Voici le même bouton mais avec d'autres styles en inline:
<mx:Button label="Exemple" color="red" borderColor="yellow" cornerRadius="10" fontStyle="italic"/>
Vous pouvez aussi fixer les Styles en utilisant de l'ActionScript via la méthode setStyle(). La méthode setStyle() est définie dans UIComponent, ce qui signifie que vous pouvez appeler cette méthode pour tous les composants (visuels) Flex. La méthode setStyle() requiert 2 paramètres:
- le nom de la propriété de style à modifier ("color" ou "fontSize" par exemple)
- la valeur de cette propriété
Mes projets (Open Source)
Autres
