Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

A propos des contrôles de texte Spark

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 29 avril 2010

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

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

Introduction

Vous utilisez des contrôles Flex de texte, pour afficher du texte et pour donner la possibilité aux utilisateurs de saisir du texte dans votre application.

Le tableau suivant liste les contrôles Flex de texte:

Contrôle Jeu de composants Classe mère Multiligne Editable Type (text, textFlow, textDisplay)
Label Spark UIComponent Y N text
RichEditableText Spark UIComponent Y Y textFlow/text
RichText Spark UIComponent Y N textFlow/text
TextArea Spark UIComponent Y Y textFlow/text
TextInput Spark UIComponent N Y text/textDisplay (textFlow)

Comparaison des contrôles de texte Spark et MX

Cette section décrit les contrôles de texte Spark. Pour plus d'informations sur les contrôles de texte MX, regardez MX text controls.

Le niveau de contrôle que vous avez sur le formatage du texte dépend du type de contrôle. Les contrôles MX supportent une faible quantité d'options de formatage avec les propriétés de style et la propriété htmlText. Les contrôles Spark supportent un grand nombre d'options de formatage car ils sont basés sur Flash Text Engine (FTE) et Text Layout Framework (TLF).

Quelques contrôles MX peuvent utiliser une quantité limitée de fonctionnalités FTE et TLF. Pour plus d'informations, regardez Using FTE in MX controls.

Quand vous construisez une application Flex 4, utilisez autant que possible les contrôles de texte Spark. C'est particulièrement vrai si vous prévoyez d'utiliser TLF ou des polices incorporées. Dans certains cas, il existe une version MX et Spark du même contrôle. Par exemple, il existe des versions MX et Spark des contrôles Label, TextArea, et TextInput. Les versions MX sont dans le package mx.controls.*. Les versions Spark sont dans le package spark.components.*.

Aperçu des fonctionnalités des contrôles de texte Spark

Les contrôles Spark pour afficher du texte sont Label, RichText, et RichEditableText. Le contrôle Label a le moins de fonctionnalités, mais c'est aussi le plus léger. Le contrôle RichEditableText a le plus de fonctionnalités, mais c'est celui qui utilise le plus de ressources système.

L'image suivante montre les relations entre les contrôles de texte Spark et FTE/TLF:

Relations entre les contrôles de texte Spark et FTE/TLF

Le tableau suivant montre plus d'informations sur ces contrôles:

Fonctionalité Spark Label RichText RichEditableText
Classe mère UIComponent UIComponent UIComponent
utilise FTE TLF TLF
typographie avancée Y Y Y
transparence Y Y Y
rotation Y Y Y
texte bi-directionnel Y Y Y
Formatage par défaut avec des styles CSS Y Y Y
multilignes Y Y Y
formats multiples N Y Y
paragraphes multiples N Y Y
modèle objets Text N Y Y
langage de balises N Y Y
liens HTML cliquables N N Y
images dans le texte N Y Y
liens hypertextes N N Y
défilement N N Y
sélection N N Y
édition N N Y

Mettre en forme les contrôles de texte

Les styles par défaut des contrôles de texte Spark sont définis en CSS. La meilleures façon de personnaliser vos contrôles de texte est d'utiliser le CSS pour changer les propriétés de style. Par exemple, vous pouvez définir la taille de la police et la couleur en utilisant les propriétés de style fontSize et color, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- sparktextcontrols/SimpleStyleExample.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:layout> 
        <s:VerticalLayout/> 
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";  
 
        s|RichText { 
            color: #33CC66;
            fontStyle: italic;
            fontSize: 24;
        }
    </fx:Style>
 
    <s:RichText id="myRET">
        This is the text.
    </s:RichText>
 
</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.

CSS vous permet de régler les styles de tous les contrôles d'un certain type (en utilisant un sélecteur de type) ou de tous contrôles qui utilisent une certaine classe (à l'aide d'un sélecteur de classe).

Les contrôles de texte Spark possèdent un jeu de propriétés de style plus riche que le CSS standard car ils supportent TLF. Ces propriétés de style incluent les espacements de paragraphes, les espacements de lignes, et les marges. L'exemple suivant définit la hauteur de ligne et l'espacement après de tous les paragraphes:

<?xml version="1.0"?>
<!-- sparktextcontrols/AnotherStyleExample.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:layout> 
        <s:VerticalLayout/> 
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";  
 
        s|RichText { 
            fontSize: 18;
            lineHeight:16;
            paragraphSpaceAfter: 10;
        }
    </fx:Style>
 
    <s:RichText id="myRET" width="200">
        <s:p>This is my text. There are many others like it, but this one is mine.</s:p>
        <s:p>My text is my best friend.</s:p>
        <s:p>It is my life. I must master it as I must master my life.</s:p>
        <s:p>Without me, my text is useless.</s:p>
    </s:RichText>
 
</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.

Avec TLF, vous pouvez également manipuler l'apparence du texte dans le flux de texte lors de la compilation ou de l'exécution. Pour plus d'informations, regardez Styling TLF-based text controls

Quand vous mettez en forme les contrôles TextInput et TextArea, vous devez garder à l'esprit que le texte est rendu par un sous composant de RichEditableText. Vous accédez aux propriétés de ce sous-composant avec la propriété textDisplay. Pour plus d'informations, regardez Subcomponent styles.