Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Spark TextArea

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 30 avril 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Présentation

Le contrôle TextArea est un champ de texte multilignes, éditable avec des bordures et éventuellement des barres de défilement. Le contrôle TextArea supporte les capacités de rendu de texte riche de Flash Player et AIR. Le contrôle TextArea diffuse les événements change et textInput.

Le contrôle TextArea supporte TLF. Le texte est rendu par un sous-composant RichEditableText qui est définit dans la classe d'apparence du contrôle TextArea.

Pour une information complète sur la référence de langage, regardez ActionScript 3.0 Reference for the Adobe Flash Platform.

Pour créer un champ de texte éditable d'une seule ligne, utilisez le contrôle TextInput. Pour plus d'information, regardez le contrôle TextInput. Pour créer des champs de texte non éditables, utilisez le contrôle Label. Pour plus d'informations, regardez le contrôle Label.

Pour changer la couleur du contrôle TextArea lorsqu'il est désactivé, vous devez modifier la classe TextAreaSkin.

Vous pouvez définir la propriété editable d'un contrôle TextArea sur false pour interdire l'édition du texte. Vous pouvez définir la propriété displayAsPassword d'un contrôle TextArea pour dissimuler la saisie de texte par l'affichage des caractères sous forme d'astérisques.

Création d'un contrôle TextArea

Vous définissez un contrôle TextArea en MXML en utilisant la balise <s:TextArea>, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- sparktextcontrols/SparkTextAreaControl.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:TextArea id="textConfirm" 
        width="300" height="100" 
        text="Please enter your thoughts here."/>
 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

L'utilisation de grandes quantités de texte dans le contrôle de TextArea peut entraîner une dégradation des performances. En conséquence, dans certains cas, vous devez utiliser le contrôle MX TextArea. Pour plus d'informations, regardez MX TextArea control.

Dimensionner le contrôle TextArea

Le contrôle TextArea ne se redimensionne pas pour s'adapter au texte qu'il contient.

Si le nouveau texte excède les capacités du contrôle TextArea et que la propriété horizontalScrollPolicy est définit sur true (valeur par défaut), le contrôle ajoute des barres de défilement.

Utiliser TLF avec le contrôle TextArea

Le contrôle TextArea supporte le formatage avancé de texte et les manipulations de TLF. Vous pouvez ajouter du contenu TLF au contrôle TextArea en utilisant soit la propriété textFlow, soit la propriété content.

L'exemple suivant ajoute un bloc de texte au format TLF dans le contrôle TextArea:

<?xml version="1.0" encoding="utf-8"?>
<!-- sparktextcontrols/TextAreaTLF.mxml -->
<s:Application name="RichEditableTextExample"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:Panel title="TextArea TLF"
            width="90%" height="90%"
            horizontalCenter="0" verticalCenter="0">
            <s:TextArea id="ta1" textAlign="left" percentWidth="90">
                <s:textFlow>
                    <s:TextFlow>
                        <s:p fontSize="24">TextArea with TLF block</s:p>
                        <s:p>1) Lorem ipsum dolor sit amet, consectetur adipiscing elit.</s:p>
                        <s:p>2) Cras posuere posuere sem, <s:span fontWeight="bold">eu congue orci mattis quis</s:span>.</s:p>
                        <s:p>3) Curabitur <s:span textDecoration="underline">pulvinar tellus</s:span> venenatis ipsum tempus lobortis.<s:br/> 
                            <s:span color="0x6600CC">Vestibulum eros velit</s:span>, bibendum at aliquet ut.
                        </s:p>
                    </s:TextFlow>
                </s:textFlow>
            </s:TextArea>
    </s:Panel>
 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour plus d'informations sur l'utilisation de TLF avec les contrôles de texte Spark, regardez Using Text Layout Framework.

Mettre en forme le contrôle TextArea

Le contrôle TextArea utilise en tant que sous-composant, un contrôle RichEditableText pour rendre le texte. Vous pouvez définir les valeurs des propriétés de style pouvant être héritées sur le contrôle TextArea, et ces propriétés seront héritées par le sous-composant RichEditableText.

Pour accéder au contrôle RichEditableText, vous utilisez la propriété textDisplay. Vous pouvez accéder à cette propriété pour définir les propriétés de style qui ne sont pas héritées, par exemple, les propriétés columnCount et columnGap.

Il y a quelques exceptions aux styles non hérités. Par exemple, les propriétés verticalAlign, lineBreak, et paddingBottom/Left/Right/Top ne sont pas héritées. Vous pouvez définir ces propriétés, qui sont définies dans le contrôle RichEditableText, directement sur le contrôle TextArea car la classe TextAreaSkin les transmet au sous-composant.

L'exemple suivant définit des styles sur le sous-composant RichEditableText avec la propriété textDisplay, et définit également les valeurs de certaines propriétés de style non-héritées qui ne sont pas normalement accessible:

<?xml version="1.0"?>
<!-- sparktextcontrols/SparkTextAreaStyles.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    creationComplete="initApp()">
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            /*
            Non-inheriting styles you must set on textDisplay:
                columnCount
                columnGap
                columnWidth
 
            Non-inheriting styles that you can set on TextArea because
            they are passed to the subcomponent through the TextAreaSkin class:
                lineBreak
                paddingTop/Bottom/Left/Right
                verticalAlign
            */       
 
            private function initApp():void {
                ta1.textDisplay.setStyle("columnCount", 3);
                ta1.textDisplay.setStyle("columnWidth", 100);
                ta1.textDisplay.setStyle("columnGap", 15);
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta1" height="100" width="400" verticalAlign="bottom" paddingBottom="20">
        This is a text area control. Because the text rendering is done by a RichEditableText subcontrol, 
        you have to use the textDisplay property to set the values of some non-inheriting styles. 
        Other non-inheriting styles are defined in the skin class and are passed through to the 
        subcomponent.
        For inheriting styles, they are inherited by the RichEditableText subcontrol.
    </s:TextArea>
 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.