Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Optimisation de code MXML dans Flash Catalyst – Partie 7 Le composant Champ de texte

Compatible Flash Catalyst CS5. Cliquer pour en savoir plus sur les compatibilités.Compatible Illustrator CS5. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 04 juillet 2011

Cet article est une traduction du tutoriel Optimizing MXML code in Flash Catalyst “Panini” de Fabio Biondi.

Fabio Biondi m'a donné son accord concernant la traduction de ce tutoriel.

Présentation

Dans cet article, nous allons créer le Champ de texte de la barre d'action dans lequel l'utilisateur pourra saisir du texte.

NDT:la traduction de TextInput dans la version française de Flash Catalyst a donné le terme Entrée texte. Nous utiliserons donc cette version traduite pour désigner un champ de texte de saisie.

Vous avez besoin de lire les chapitres précédents pour comprendre cet article.

Création d'un champ de texte de saisie

Premièrement, supprimez le texte statique « Search in the blog » du composant BlogView importé depuis Illustrator. Ouvrez le composant BlogView, sélectionnez l'objet avec l'outil de sélection et appuyez sur la touche Suppr du clavier.

-

NOTE: OBJETS TEXTE DANS FLASH CATALYST Si dans les options d'import, vous avez spécifier pour la propriété Texte, la valeur « Conserver le caractère modifiable » alors les champs de texte sont automatiquement convertis en composants Spark RichText dont le contenu peut-être directement édité dans Catalyst ou plus tard dans Flex.

<s:RichText fontFamily="Arial" fontSize="18" text="Search in the blog..." />

Cependant, ce composant ne permet pas la saisie de contenu par l'utilisateur et nous allons donc le supprimer. A la place, nous allons créer un composant TextInput en utilisant le rectangle blanc de la mise en page.

<s:TextInput text="Type a word..."/>

-

Après avoir supprimé le texte statique, sélectionnez le rectangle blanc depuis le composant BlogView et convertissez le en Entrée texte en lui donnant comme nom de composant BlogInputText.

Quand vous sélectionnez n'importe quel élément du plan de travail, dans ce cas le composant Entrée texte que l'on vient de créer, vous pouvez définir les propriétés depuis le panneau Propriétés.
Changez la propriété Texte, par défaut vide, pour définir le texte par défaut affiché par le champ de texte.

Le changement est immédiatement visible dans l'espace de travail

Cependant, la taille du texte par défaut est trop petite et nous souhaitons l'agrandir.
Pour changer la position et la taille du champ de texte, vous devez éditer le composant BlogInputText ( clic droit > Modifier le composant)

Sélectionnez le champ de texte à l'intérieur du composant BlogInputText en utilisant l'outil de sélection.

Changez la taille du texte depuis le panneau Propriétés en utilisant la propriété Taille et changez aussi les autres options que vous souhaitez.

Centrez manuellement le champ de texte en utilisant l'outil de sélection.

Compilez le projet (Ctrl + Entrée) et vous visualisez que l'utilisateur peut désormais saisir à l'intérieur du champ de texte de l'état BlogList.

Le code MXML généré

Le composant BlogView.mxml contient maintenant une instance du composant Spark TextInput, qui utilise la nouvelle skin BlogInputText.

[…]
<s:TextInput x="100" y="12" enabled="true" 
			 skinClass="components.BlogInputText"
			 text="Type a word..."/>
[…]

Voici le code mxml de la skin - BlogInputText.mxml - utilisé par le composant TextInput.
Notez qu'à l'intérieur, une instance de RichEditableText a été crée, à la place du composant RichText utilisé précédemment.

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
		xmlns:d="http://ns.adobe.com/fxg/2008/dt"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.TextInput")]</fx:Metadata>
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
		<s:State name="normalWithPrompt"/>
		<s:State name="disabledWithPrompt"/>
	</s:states>
	<s:Rect d:userLabel="TextBg" x="0.5" y="0.5" width="312" height="45">
		<s:fill>
			<s:SolidColor color="#F2F2F2"/>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#333333"/>
		</s:stroke>
	</s:Rect>
 
 
	<s:RichEditableText id="textDisplay" x="5" y="5" width="303" heightInLines="1"
						x.normal="6" y.normal="13" fontSize.normal="22"
						tabStops.normal="S0 S50 S100 S150 S200 S250 S300" fontFamily="Arial"/>
</s:Skin>

Le projet nommé 007_TextInput.fxp attaché à ce tutoriel contient tous les codes générés précédemment.

Sommaire