Définition des styles

Voici quelques points-clés relatifs à l’utilisation des styles :

Héritage

Un composant enfant est configuré, de par sa conception, de façon à hériter d’un style à partir du composant parent. Il est impossible de définir l’héritage de styles au sein d’ActionScript.

Priorité

Si un style de composant est défini de plusieurs façons, Flash utilise le premier style qu’il rencontre selon l’ordre de priorité. Il recherche les styles dans l’ordre suivant, jusqu’à la détection d’une valeur :

1. Flash cherche une propriété de style dans l’occurrence du composant.

2. Si le style fait partie des styles hérités, Flash recherche la valeur héritée dans la hiérarchie apparentée.

3. Flash recherche le style dans le composant.

4. Flash recherche un paramètre global dans StyleManager.

5. Si la propriété n’est toujours pas définie, elle prend la valeur undefined .

Vous pouvez accéder aux styles par défaut d’un composant en employant la méthode statique getStyleDefinition() pour la classe du composant. Par exemple, le code suivant extrait les styles par défaut du composant ComboBox et affiche les valeurs par défaut des propriétés buttonWidth et downArrowDownSkin :

import fl.controls.ComboBox; 
var styleObj:Object = ComboBox.getStyleDefinition(); 
trace(styleObj.buttonWidth); // 24 
trace(styleObj.downArrowDownSkin); // ScrollArrowDown_downSkin

Toute occurrence d’un composant d’interface utilisateur peut appeler directement les méthodes setStyle() et getStyle() pour définir ou obtenir un style. La syntaxe suivante définit un style et une valeur pour l’occurrence d’un composant :

instanceName.setStyle("styleName", value);

Cette syntaxe récupère un style pour l’occurrence d’un composant :

var a_style:Object = new Object(); 
a_style = instanceName.getStyle("styleName");

Notez que la méthode getStyle() renvoie le type Object, car elle peut renvoyer plusieurs styles possédant des types de données différents. Par exemple, le code suivant définit le style de police pour une occurrence de TextArea ( aTa ), puis l’obtient à l’aide de la méthode getStyle() . L’exemple attribue la valeur renvoyée à un objet TextFormat de façon à l’affecter à une variable TextFormat. Sans cette attribution, le compilateur produirait une erreur en raison d’une tentative de conversion forcée d’une variable Object en variable TextFormat.

import flash.text.TextFormat; 
 
var tf:TextFormat = new TextFormat(); 
tf.font = "Georgia"; 
aTa.setStyle("textFormat",tf); 
aTa.text = "Hello World!"; 
var aStyle:TextFormat = aTa.getStyle("textFormat") as TextFormat; 
trace(aStyle.font);

/* Create a new TextFormat object to set text formatting properties. */ 
var tf:TextFormat = new TextFormat(); 
tf.font = "Arial"; 
tf.size = 16; 
tf.bold = true; 
a_button.setStyle("textFormat", tf);

Vous pouvez définir un style pour toutes les occurrences d’une classe de composant à l’aide de la méthode statique setComponentStyle() de la classe StyleManager. Par exemple, vous pouvez définir la couleur du texte sur rouge pour tous les boutons en commençant par faire glisser un bouton sur la scène, puis en ajoutant le code ActionScript ci-dessous dans le panneau Actions de l’image 1 du scénario :

import fl.managers.StyleManager; 
import fl.controls.Button; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setComponentStyle(Button, "textFormat", tf);

Tous les boutons que vous ajouterez par la suite sur la scène auront des étiquettes rouges.

Vous pouvez définir un style pour tous les composants à l’aide de la méthode statique setStyle() de la classe StyleManager.

1. Faites glisser un composant List sur la scène et nommez l’occurrence aList .

2. Faites glisser un composant Button sur la scène et nommez l’occurrence aButton .

3. Appuyez sur F9 ou sélectionnez Actions dans le menu Fenêtre pour ouvrir le panneau Actions, s’il n’est pas déjà ouvert, et entrez le code suivant dans l’image 1 du scénario afin de définir la couleur du texte sur rouge pour tous les composants :

   import fl.managers.StyleManager; 
    
   var tf:TextFormat = new TextFormat(); 
   tf.color = 0xFF0000; 
   StyleManager.setStyle("textFormat", tf);

4. Ajoutez le code suivant dans le panneau Actions pour insérer du texte dans le composant List.

   aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
   aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
   aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
   aList.allowMultipleSelection = true;

5. Sélectionnez Contrôle > Tester l’animation ou appuyez sur Ctrl+Entrée pour compiler le code et tester votre contenu. Le texte inclus dans l’étiquette du bouton et dans la liste doit être de couleur rouge.