Utilisation du composant TextInput

TextInput est un composant texte à une seule ligne qui renvoie automatiquement à la ligne l’objet TextField ActionScript natif. Si vous avez besoin d’un champ de texte multiligne, utilisez le composant TextArea. Par exemple, vous pouvez utiliser un composant TextInput en tant que champ de mot de passe dans un formulaire. Vous pouvez également définir un écouteur qui vérifie si le champ comporte suffisamment de caractères lorsque l’utilisateur sort du champ. Cet écouteur peut afficher un message d’erreur indiquant que l’utilisateur n’a pas entré le nombre de caractères adéquat.

Vous pouvez définir la propriété textFormat en employant la méthode setStyle() pour modifier le style du texte qui s’affiche dans une occurrence de TextArea. Un composant TextInput peut également être formaté en HTML ou en tant que champ de mot de passe masquant le texte.

Interaction de l’utilisateur avec le composant TextInput

Un composant TextInput peut être activé ou désactivé dans une application. Lorsqu’il est désactivé, il ne reçoit pas les informations en provenance de la souris ou du clavier. Lorsqu’il est activé, il suit les mêmes règles de focus, de sélection et de navigation qu’un objet TextField ActionScript. Lorsqu’une occurrence de TextInput a le focus, vous pouvez également utiliser les touches suivantes pour le contrôler.

Touche

Description

Touches fléchées

Déplacent le point d’insertion d’un caractère vers la gauche ou vers la droite.

Maj+Tab

Place le focus sur l’objet précédent.

Tab

Place le focus sur l’objet suivant.

Pour plus d’informations sur le contrôle du focus, voir la classe FocusManager dans le Guide de référence d’ActionScript 3.0 pour Flash Professional et Utilisation de FocusManager .

L’aperçu en direct des occurrences de TextInput reflète les modifications apportées aux paramètres dans l’Inspecteur des propriétés ou l’Inspecteur des composants pendant la programmation. Lors d’un aperçu en direct, il n’est pas possible de sélectionner du texte et vous ne pouvez pas entrer de texte dans l’occurrence du composant sur la scène.

Lorsque vous ajoutez un composant TextInput à une application, vous pouvez utiliser le panneau Accessibilité pour le rendre accessible aux lecteurs d’écran.

Paramètres du composant TextInput

Dans l’Inspecteur des propriétés ou l’Inspecteur des composants, vous pouvez définir les paramètres de création suivants pour chaque occurrence du composant TextInput : editable , displayAsPassword , maxChars , restrict et text . A chacun de ces paramètres correspond une propriété ActionScript du même nom. Pour plus d’informations sur les valeurs gérées de ces paramètres, voir la classe TextInput dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Vous pouvez contrôler ces options et d’autres options du composant TextInput à l’aide des propriétés, méthodes et événements d’ActionScript. Pour plus d’informations, voir la classe TextInput dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Création d’une application avec le composant TextInput

La procédure suivante explique comment ajouter un composant TextInput à une application. L’exemple emploie deux zones TextInput destinées à la saisie et à la confirmation d’un mot de passe. Il utilise un écouteur d’événement afin de déterminer qu’au moins 8 caractères ont été entrés et que le texte des deux zones est identique.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser un composant Label du panneau Composants vers la scène et spécifiez les valeurs suivantes pour celui-ci dans l’Inspecteur des propriétés :

    • Entrez le nom d’occurrence pwdLabel .

    • Entrez la valeur 100 pour W.

    • Entrez la valeur 50 pour X.

    • Entrez la valeur 150 pour Y.

    • Dans la section Paramètres, entrez Password: comme paramètre de texte.

  3. Faites glisser un second composant Label du panneau Composants vers la scène et spécifiez les valeurs suivantes :

    • Entrez le nom d’occurrence confirmLabel .

    • Entrez la valeur 100 pour W.

    • Entrez la valeur 50 pour X.

    • Entrez la valeur 200 pour Y.

    • Dans la section Paramètres, entrez Confirm Password: comme paramètre de texte.

  4. Faites glisser un composant TextInput du panneau Composants vers la scène et spécifiez les valeurs suivantes :

    • Entrez le nom d’occurrence pwdTi .

    • Entrez la valeur 150 pour W.

    • Entrez la valeur 190 pour X.

    • Entrez la valeur 150 pour Y.

    • Dans la section Paramètres, double-cliquez sur la valeur du paramètre displayAsPassword et sélectionnez true . Ce faisant, la valeur entrée dans la zone de texte sera masquée par des astérisques.

  5. Faites glisser un second composant TextInput du panneau Composants vers la scène et spécifiez les valeurs suivantes :

    • Entrez le nom d’occurrence confirmTi .

    • Entrez la valeur 150 pour W.

    • Entrez la valeur 190 pour X.

    • Entrez la valeur 200 pour Y.

    • Dans la section Paramètres, double-cliquez sur la valeur du paramètre displayA s Password et sélectionnez true . Ce faisant, la valeur entrée dans la zone de texte sera masquée par des astérisques.

  6. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    function tiListener(evt_obj:Event){ 
if(confirmTi.text != pwdTi.text || confirmTi.length < 8) 
{ 
        trace("Password is incorrect. Please reenter it."); 
}  
else { 
        trace("Your password is: " + confirmTi.text); 
} 
} 
confirmTi.addEventListener("enter", tiListener);

    Ce code configure un gestionnaire d’événements enter sur l’occurrence de composant TextInput appelée confirmTi . Si les deux mots de passe ne sont pas identiques, ou si l’utilisateur entre moins de 8 caractères, l’exemple affiche le message « Password is incorrect. Please reenter it. » Si les deux mots de passe sont identiques et comportent au moins 8 caractères, l’exemple affiche la valeur entrée dans le panneau Sortie.

  7. Choisissez Contrôle > Tester l’animation.

Création d’une occurrence du composant TextInput à l’aide d’ActionScript

L’exemple suivant crée un composant TextInput à l’aide d’ActionScript. Il crée également un composant Label qui sert à inviter l’utilisateur à entrer son nom. L’exemple définit la propriété restrict du composant de manière à autoriser uniquement les majuscules et les minuscules, les points et les espaces. Il crée également un objet TextFormat qu’il emploie pour mettre en forme le texte dans les composants Label et TextInput.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser un composant TextInput du panneau Composants vers le panneau Bibliothèque.

  3. Faites glisser un composant Label du panneau Composants vers le panneau Bibliothèque.

  4. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    import fl.controls.Label; 
import fl.controls.TextInput; 
 
var nameLabel:Label = new Label(); 
var nameTi:TextInput = new TextInput(); 
var tf:TextFormat = new TextFormat(); 
 
addChild(nameLabel); 
addChild(nameTi); 
 
nameTi.restrict = "A-Z .a-z"; 
 
tf.font = "Georgia"; 
tf.color = 0x0000CC; 
tf.size = 16; 
 
nameLabel.text = "Name: " ; 
nameLabel.setSize(50, 25); 
nameLabel.move(100,100); 
nameLabel.setStyle("textFormat", tf); 
nameTi.move(160, 100); 
nameTi.setSize(200, 25); 
nameTi.setStyle("textFormat", tf);

  5. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.