Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Spark TextInput

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 15 juillet 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 Spark TextInput est un champ de texte contenant une seule ligne et qui est optionnellement éditable. Ce contrôle supporte TLF. Le texte est rendu par un sous-composant RichEditableText dans sa classe de thème.

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

Pour créer un champ de texte multiligne et éditable, utilisez un contrôle TextArea. Pour plus d'informations, regardez Le contrôle TextArea. Pour créer un champ de texte non éditable, utilisez les contrôles Label ou RichText. Pour plus d'informations, regardez Le contrôle Label et Le contrôle RichText.

Le contrôle TextInput n'inclut pas de légende, mais vous pouvez en ajouter une en utilisant un contrôle Label ou en imbriquant le contrôle TextInput dans un conteneur FormItem d'un conteneur de mise en page Form. Le contrôle SparkTextInput diffuse tous ces événements à l'exception de l'événement dataChange.

Pour changer la couleur du contrôle Spark TextInput lorsqu'il est désactivé, vous devez éditer la classe TextInputSkin. L'exemple suivant montre les différences entre les versions activée et désactivée des contrôles Spark et MX TextInput:

<?xml version="1.0"?>
<!-- sparktextcontrols/TextInputDisabledColors.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:VGroup>
        <mx:TextInput enabled="false" text="disabled MX"/>
        <mx:TextInput enabled="true" text="enabled MX"/>
 
        <s:TextInput enabled="false" text="disabled Spark"/>
        <s:TextInput enabled="true" text="enabled Spark"/>
    </s:VGroup>
 
</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.

Vous pouvez définir la propriété editable du contrôle TextInput sur false pour empêcher les utilisateurs d'éditer le texte. Vous pouvez définir la propriété displayAsPassword du contrôle TextInput afin de cacher le texte d'entrée par l'affichage des caractères sous forme d'astérisques.

Création d'un contrôle TextInput

Vous définissez un contrôle TextInput en MXML en utilisant la balise <s:TextInput>, comme le montre l'exemple suivant. Spécifiez une valeur à la propriété id si vous souhaitez utiliser votre contrôle ailleurs dans une balise MXML ou dans un bloc ActionScript.

<?xml version="1.0"?>
<!-- sparktextcontrols/SparkTextInputControl.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:TextInput id="text1" width="100"/>
 
</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.

Vous pouvez utiliser la propriété text pour spécifier le texte du contrôle TextInput.

Dimensionner un contrôle TextInput

Si vous ne spécifiez pas de largeur, le contrôle TextInput se redimensionne automatiquement lorsque vous changez le texte. Il ne se redimensionne pas en réponse à une saisie utilisateur.

Le contrôle TextInput détermine la valeur de sa propriété measuredWidth en utilisant la propriété widthInChars plutôt que de mesurer le texte qui lui est assigné, parce que le texte commence souvent à vide. La valeur de sa propriété measuredHeight est déterminée par la hauteur de la police.

Liaison vers un contrôle TextInput

Dans certains cas, vous pouvez lier une variable à la propriété text d'un contrôle TextInput afin que le contrôle représente une valeur variable, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- sparktextcontrols/SparkBoundTextInputControl.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">
 
  <fx:Script><![CDATA[
     [Bindable]
     public var myProp:String="This is the initial String myProp.";
  ]]></fx:Script>
 
  <s:TextInput text="{myProp}"/> 
 
</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.

Dans cet exemple, le contrôle TextInput affiche la valeur de la variable myProp. Souvenez-vous que vous devez utiliser la balise de métadonnées [Bindable] si le contrôle doit suivre les changements de la valeur de la variable; aussi, le compilateur génère des avertissements si vous n'utilisez pas cette balise de métadonnées.

Utilisation de TLF avec le contrôle TextInput

Vous pouvez utiliser TLF avec le contrôle TextInput en accédant à la propriété textDisplay. Cette propriété pointe vers le sous-composant RichEditableText qui effectue le rendu du texte dans le contrôle TextInput. L'objet RichEditableText est un sous-composant qui est défini dans la classe de thème du contrôle TextInput.

L'exemple suivant défini un objet TextFlow à partir de données au format XML, et l'assigne à la propriété textDisplay du contrôle TextInput.

<?xml version="1.0"?>
<!-- sparktextcontrols/TextInputTLF.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" 
    creationComplete="initApp()">
 
    <fx:Declarations>
        <fx:XML id="myXML">
            <div>            
                <p>Hello <span fontWeight='bold'>world</span>!</p>
            </div>
        </fx:XML>    
    </fx:Declarations>
 
    <fx:Script>
        import spark.utils.TextFlowUtil;
 
        private function initApp():void {
            text1.textDisplay.textFlow = TextFlowUtil.importFromXML(myXML);
        }
    </fx:Script>
 
    <s:TextInput id="text1" width="100"/>
 
</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 Spark, regardez Using Text Layout Framework