Mise en forme du texte

La classe TextFormat permet de définir différentes propriétés d’affichage du texte et de les appliquer à tout le contenu d’un objet TextField, ou à une plage de texte.

L’exemple suivant applique un objet TextFormat à un objet TextField complet, puis un second objet TextFormat à une plage de texte de cet objet TextField :

var tf:TextField = new TextField(); 
tf.text = "Hello Hello"; 
 
var format1:TextFormat = new TextFormat(); 
format1.color = 0xFF0000; 
 
var format2:TextFormat = new TextFormat(); 
format2.font = "Courier"; 
 
tf.setTextFormat(format1); 
var startRange:uint = 6; 
tf.setTextFormat(format2, startRange); 
 
addChild(tf);

La méthode TextField.setTextFormat() n’affecte que le texte qui est déjà affiché dans le champ de texte. Si le contenu de l’objet TextField change, il peut être nécessaire d’appeler à nouveau la méthode TextField.setTextFormat() pour ré-appliquer la mise en forme. Vous pouvez également utiliser la propriété defaultTextFormat de TextField pour spécifier le format à utiliser pour le texte saisi par l’utilisateur.

Les champs de texte peuvent contenir du texte brut ou du texte au format HTML. Le texte brut est stocké dans la propriété text de l’occurrence, et le texte HTML dans la propriété htmlText .

Vous pouvez utiliser des déclarations de styles CSS pour définir des styles de texte à appliquer ensuite à différents champs de texte. Une déclaration de style CSS peut être créée par code ou chargée lors de l’exécution à partir d’un fichier CSS externe.

C’est la classe flash.text.StyleSheet qui gère les styles CSS. La classe StyleSheet ne reconnaît qu’un nombre limité de propriétés CSS. La liste détaillée des propriétés de style prises en charge par la classe StyleSheet figure dans l’entrée flash.textStylesheet du Guide de référence ActionScript 3.0 pour Flash Professional.

Comme le montre l’exemple suivant, vous pouvez créer des feuilles de style CSS et les appliquer à du texte HTML au moyen de l’objet StyleSheet :

var style:StyleSheet = new StyleSheet(); 
 
var styleObj:Object = new Object(); 
styleObj.fontSize = "bold"; 
styleObj.color = "#FF0000"; 
style.setStyle(".darkRed", styleObj); 
 
var tf:TextField = new TextField(); 
tf.styleSheet = style; 
tf.htmlText = "<span class = 'darkRed'>Red</span> apple"; 
 
addChild(tf);

Après la création de l’objet StyleSheet, le code crée un objet simple pour contenir un jeu de propriétés de déclaration de style. Il appelle ensuite la méthode StyleSheet.setStyle() , qui ajoute le nouveau style à la feuille de style sous le nom « .darkred ». Puis il applique les formats de la feuille de styles en affectant l’objet StyleSheet à la propriété styleSheet de TextField.

Pour que les styles CSS puissent prendre effet, il est nécessaire d’appliquer la feuille de style à l’objet TextField avant de définir la propriété htmlText .

Par essence, un champ de texte doté d’une feuille de style n’est pas modifiable. Si vous attribuez une feuille de style à un champ de texte de saisie, le champ de texte affiche les propriétés de la feuille de style, mais le champ de texte ne permet pas à l’utilisateur de saisir du texte. En outre, vous ne pouvez pas utiliser les méthodes ActionScript suivantes sur un champ de texte doté d’une feuille de style :

• La méthode TextField.replaceText()

• La méthode TextField.replaceSelectedText()

• La propriété TextField.defaultTextFormat

• La méthode TextField.setTextFormat()

Si un champ de texte est doté d’une feuille de style mais que par la suite la propriété TextField.styleSheet reçoit la valeur null , TextField.text et TextField.htmlText ajoutent des balises et des attributs à leurs contenus afin d’incorporer le formatage de la feuille de style précédemment attribuée. Pour préserver la propriété htmlText d’origine, enregistrez-la dans une variable avant d’attribuer la valeur null à la feuille de style.

L’utilisation de feuilles de style CSS pour la mise en forme offre plus de possibilités s’il est possible de charger les informations de CSS à partir d’un fichier externe lors de l’exécution. Si les données CSS sont externes à l’application, il est possible de changer le style visuel du texte sans devoir modifier le code source ActionScript 3.0. En effet, après le déploiement de l’application, vous pouvez encore modifier le fichier CSS externe pour obtenir un nouvel aspect, sans devoir redéployer le fichier SWF de l’application.

La méthode StyleSheet.parseCSS() convertit une chaîne contenant des données CSS en déclarations de style dans l’objet StyleSheet. L’exemple suivant montre comment lire un fichier CSS externe et appliquer ses déclarations de style à un objet TextField.

Voici le contenu du fichier CSS à charger. Il est appelé « example.css » :

p { 
    font-family: Times New Roman, Times, _serif; 
    font-size: 14; 
} 
 
h1 { 
    font-family: Arial, Helvetica, _sans; 
    font-size: 20; 
    font-weight: bold; 
} 
 
.bluetext { 
    color: #0000CC; 
}    

Voici maintenant le code ActionScript d’une classe qui charge le fichier example.css et en applique les styles au contenu de l’objet TextField :

package 
{ 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.net.URLLoader; 
    import flash.net.URLRequest; 
    import flash.text.StyleSheet; 
    import flash.text.TextField; 
    import flash.text.TextFieldAutoSize; 
 
    public class CSSFormattingExample extends Sprite 
    { 
        var loader:URLLoader; 
        var field:TextField; 
        var exampleText:String = "<h1>This is a headline</h1>" +  
            "<p>This is a line of text. <span class='bluetext'>" + 
            "This line of text is colored blue.</span></p>"; 
         
        public function CSSFormattingExample():void 
        { 
            field = new TextField(); 
            field.width = 300; 
            field.autoSize = TextFieldAutoSize.LEFT; 
            field.wordWrap = true; 
            addChild(field); 
             
            var req:URLRequest = new URLRequest("example.css"); 
             
            loader = new URLLoader(); 
            loader.addEventListener(Event.COMPLETE, onCSSFileLoaded); 
            loader.load(req); 
        } 
         
        public function onCSSFileLoaded(event:Event):void 
        { 
            var sheet:StyleSheet = new StyleSheet(); 
            sheet.parseCSS(loader.data); 
            field.styleSheet = sheet; 
            field.htmlText = exampleText; 
        } 
    } 
}

Lorsque les données de CSS sont chargées, la méthode onCSSFileLoaded() s’exécute et appelle la méthode StyleSheet.parseCSS() pour transférer les déclarations de style à l’objet StyleSheet.

La classe flash.text.TextField contient une méthode particulièrement utile, setTextFormat() . La méthode setTextFormat() permet d’affecter des propriétés spécifiques à une partie du contenu d’un champ de texte en réponse à une action de l’utilisateur, par exemple pour rappeler à l’utilisateur que certains champs d’un formulaire doivent être renseignés, ou encore pour changer l’aspect d’un passage de texte si l’utilisateur sélectionne une partie de ce texte.

L’exemple suivant utilise la méthode TextField.setTextFormat() sur une plage de caractères pour modifier l’aspect d’une partie du contenu de myTextField lorsque l’utilisateur clique dans ce champ de texte :

var myTextField:TextField = new TextField(); 
myTextField.text = "No matter where you click on this text field the TEXT IN ALL CAPS changes format."; 
myTextField.autoSize = TextFieldAutoSize.LEFT; 
addChild(myTextField); 
addEventListener(MouseEvent.CLICK, changeText); 
 
var myformat:TextFormat = new TextFormat(); 
myformat.color = 0xFF0000; 
myformat.size = 18; 
myformat.underline = true; 
 
function changeText(event:MouseEvent):void 
{ 
    myTextField.setTextFormat(myformat, 49, 65); 
}