IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

ActionScript Facile
Chapitre 8
Création du composant AS3 TextField

Date de publication : 11 novembre 2010

Par Matthieu (Accueil) (Blog)
 


       Version PDF (Miroir)   Version hors-ligne (Miroir)
Viadeo Twitter Facebook Share on Google+        



I. Introduction
II. CDCF d'un TextField
III. CDCT d'un TextField
IV. Conclusion
V. Remerciements


I. Introduction

Pour travailler avec du texte dans Flash, il est nécessaire d'importer une multitude de classes afin de mettre à jour le formatage!

En effet, il y a les classes qui contiennent des constantes ( TextFieldAutoSize, TextFieldAlign, TextFieldType etc ... ), la classe TextFormat, la classe Font, la classe TextField etc... Sans compter qu'il en existe encore beaucoup d'autres pour des utilisations diverses et variées.

Dans cet article, nous allons créer un composant qui va nous simplifier tout ça.

Ce composant n'en est pas réellement un, dans le sens où il n'implémentera pas UIComponent. Il étendra simplement la classe de base TextField et ajoutera des fonctionnalités bien pratiques.


II. CDCF d'un TextField

En route pour la rédaction du CDCF (Cahier Des Charges Fonctionnel).

Il n'est pas forcément aisé de donner une liste de fonctionnalités pour un champ de type UITextField sans basculer directement dans la technique.

Effectivement, les fonctionnalités que nous pourrions décrire sont déjà toutes disponibles de manière native. La seule chose qui change, c'est la manière de les implémenter.

Nous passons donc directement au Cahier Des Charges Techniques.


III. CDCT d'un TextField

Nous développons la classe UITextField. Nous implémenterons également des méthodes supplémentaires sur cette classe. Celles-ci nous permettront de formater le texte sans passer par la classe TextFormat ni d'autres classes annexes.

Voici l'ensemble des méthodes de la classe UITextField :

  • Méthode changeFormat : elle permet de définir le formatage du texte ou d'un groupe de caractères à l'aide d'une seule et unique méthode.
  • Méthode changeLetterFormat : cette méthode permet de définir le format d'une seule lettre.
  • Méthode getLetterFormat : elle permet de récupérer le format d'une seule lettre.
  • Getter/ Setter appelé font : pour changer et récupérer la police de caractère. L'embarquement des polices sera géré automatiquement par le setter qui déterminera si la police est une police système ou non.
  • Méthode convertToInput : pour convertir le texte en champ de saisie.
  • Méthode convertToDynamic : pour convertir le texte en champ dynamique.
  • Nous implémenterons également des méthodes pour changer l'alignement et le redimensionnement automatique du texte : alignCenter, alignRight, alignLeft, alignJustify, autoSizeRight, autoSizeLeft, autoSizeCenter, autoSizeNone. Ce qui nous évitera de devoir utiliser les classes TextFieldAutoSize et TextFieldAlign.
  • Getters / Setters maxWidth et maxHeight : permet de définir une largeur et une hauteur maximale.
  • Méthode destroy : et enfin nous implémenterons une méthode qui permet de détruire proprement notre composant, comme pour un UIComponent.

IV. Conclusion

Nous disposons maintenant d'un champ texte dont le formatage peut être changé de manière extrêmement simplifiée.

Le Composant UITextField se révèle être une véritable bénédiction pour travailler avec du texte.

Évolutions des fonctionnalités

Pour améliorer notre Composant AS3 TextField, voici quelques exemples de fonctionnalités supplémentaires à développer.

> A vous de jouer !

TextField avec des fonts dynamiques
Je vous propose d'utiliser des fonts (polices) dynamiques pour vos textes. La lecture de cet article Utiliser des polices partagées dynamiquement en AS3 devrait grandement vous faciliter la tâche!

Sources commentées

  • com.actionscriptfacile.ui.text.UITextField.as
  • UITextFieldExample.as
Vous trouverez ci-dessous l'ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre leur fonctionnement.

Vous pouvez télécharger le fichier zip : Component TextField Framework actionscript-facile

Il contient l'ensemble du code source que nous venons de créer dans ce chapitre.

Proposez vos exemples de code et posez vos questions sur le Forum AS3 Developpez.
com.actionscriptfacile.ui.text.UITextField.as
package  com.actionscriptfacile.ui.text
{
	import flash.text.Font;
	import flash.text.FontType;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.utils.Dictionary;
	import flash.utils.getDefinitionByName;
 
	/**
	 * La classe UITextField est une extension de la classe flash.text.TextField de base.
	 * Elle inclut quelques fonctionnalités qui permettent de gérer plus facilement la mise
	 * en forme d'un champ texte.
	 *
	 * @author Matthieu
	 */
	public class UITextField extends TextField
	{
 
		protected static var m_allowedFonts:Dictionary; 
		// Une liste des différentes polices de caractères autorisées.
 
		protected var m_currentFont:String; // Le nom de la police de caractère utilisée actuellement
		protected var m_maxWidth:Number; // la largeur maximale du champ texte
		protected var m_maxHeight:Number; // la hauteur maximale du champ texte
 
		public function UITextField()
		{
			super();
			/*
			 * on crée une méthode init pour gagner des ressources,
			 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
			 * pas optimisé à la compilation,
			 * on met donc toutes nos instructions dans une méthode privée init
			 *
			 */
			init();
		}
 
		/**
		 * Initialise proprement les différents éléments du composant
		 *
		 */
		private function init():void
		{
			// si le tableau de fonts n'est pas encore initialisé alors ...
			if ( m_allowedFonts == null )
			{
				m_allowedFonts = new Dictionary(); // on le crée
				var fonts:Array = Font.enumerateFonts( true ); // on récupère toutes les polices utilisables
				var max:int = fonts.length - 1;
 
				/**
				 * On boucle sur toutes les polices et on les ajoute à la liste des typos autorisées
				 */
				for ( ; max > -1; max-- )
				{
					m_allowedFonts[Font( fonts[max] ).fontName ] = fonts[max];
				}
 
				// on définit une police par défaut
				m_currentFont = Font( fonts[ 0 ] ).fontName;
			}
 
			// puis on définit une hauteur et une largeur maximale théorique.
			m_maxHeight = m_maxWidth = 500;
		}
 
		/**
		 * Cette fonction sert à changer le format d'un caractère
		 *
		 * @param	p_letterIndex	Index du caractère dont on veut changer le formatage
		 * @param	p_propertyName	La nom de la propriété de formatage que l'on veut changer
		 * @param	p_value			La valeur de la propriété de formatage
		 */
		public function changeLetterFormat( p_letterIndex:int, p_propertyName:String, p_value:* ):void
		{
			changeFormat( p_propertyName, p_value, p_letterIndex, p_letterIndex + 1, false );
		}
 
		/**
		 * Cette fonction sert à récupérer le format d'un caractère
		 *
		 * @param	p_letterIndex	Index du caractère dont on veut récupérer le formatage
		 * @return	Un objet de type TextFormat
		 */
		public function getLetterFormat( p_letterIndex:int ):TextFormat
		{
			return getTextFormat( p_letterIndex, p_letterIndex );
		}
 
		 /**
		  * Cette méthode permet un accès direct aux propriétés de l'objet TextFormat du TextField.
		  * Elle a pour but de simplifier la mise à jour graphique d'un champ texte par le biais
		  * d'un appel à une seule méthode.
		  * http://help.adobe.com/fr_FR/AS3LCR/Flash_10.0/flash/text/TextFormat.html
		  *
		  * @param	p_propertyName nom de la propriété à changer @see flash.text.TextFormat
		  * @param	p_value valeur de la propriété
		  * @param	p_startIndex index de départ à partir duquel les changements opéreront dans le texte.
		  * @param	p_endIndex index de fin.
		  */
		public function changeFormat( p_propertyName:String, p_value:*, p_startIndex:int = -1, p_endIndex:int = -1, 
									  p_isDefault:Boolean = false ):void
		{
			// si la longueur du champ texte est inférieur à l'index maximal des caractères demandés 
			// alors on arrête tout
			if ( text.length < p_endIndex )
				return;
 
			// on récupère le format des caractères compris entre p_startIndex et p_endIndex
			var format:TextFormat = getTextFormat( p_startIndex, p_endIndex );
 
			// si le textformat possède la propriété p_propertyName
			if ( format.hasOwnProperty( p_propertyName ) )
			{
				// alors on définit la nouvelle valeur de la propriété en question
				format[ p_propertyName ] = p_value;
			}
 
			// si on a définit le paramètre p_isDefault à true
			if ( p_isDefault )
			{
				// alors le format devient le format par défaut
				defaultTextFormat = format;
			}
 
			// enfin, on applique le format au champ texte pour les caractères spécifiés.
			setTextFormat( format, p_startIndex, p_endIndex );
		}
 
		/**
		 * Convertir le champ texte en champ de saisie
		 */
		public function convertToInput():void { type = TextFieldType.INPUT; }
 
		/**
		 * Convertir le champ texte en champ dynamique
		 */
		public function convertToDynamic():void { type = TextFieldType.DYNAMIC; }
 
		/**
		 * Aligne le champ texte par le centre
		 */
		public function alignCenter():void { changeFormat( 'align', TextFormatAlign.CENTER ); }
 
		/**
		 * Aligne le champ texte en mode justifié
		 */
		public function alignJustify():void { changeFormat( 'align', TextFormatAlign.JUSTIFY ); }
 
		/**
		 * Aligne le champ texte par la gauche
		 */
		public function alignLeft():void { changeFormat( 'align', TextFormatAlign.LEFT ); }
 
		/**
		 * Aligne le champ texte par la droite
		 */
		public function alignRight():void { changeFormat( 'align', TextFormatAlign.RIGHT ); }
 
		/**
		 * Redimensionne automatiquement le champ texte par le centre
		 */
		public function autoSizeLeft():void { autoSize = TextFieldAutoSize.LEFT; };
 
		/**
		 * Précise que le champ texte ne doit plus se redimensionner automatiquement
		 */
		public function autoSizeNone():void { autoSize = TextFieldAutoSize.NONE; };
 
		/**
		 * Redimensionne automatiquement le champ texte par la droite
		 */
		public function autoSizeRight():void { autoSize = TextFieldAutoSize.RIGHT; };
 
		/**
		 * Redimensionne automatiquement le champ texte par la gauche
		 */
		public function autoSizeCenter():void { autoSize = TextFieldAutoSize.CENTER; };
 
		/**
		 * Définit la nouvelle police de caractère utilisée pour ce champ texte.
		 * Si la police ne fait pas partie des polices autorisées, le système va tenter
		 * de la retrouver. En cas d'échec la police ne sera pas changée, dans le cas contraire
		 * la nouvelle police sera utilisée et ajoutée à la liste des polices autorisées.
		 */
		public function set font( p_font:String ):void
		{
 
			var fontDefinition:Class;
 
			if ( m_allowedFonts[p_font] == null || // si la police n'est pas autorisée alors ...
				Font( m_allowedFonts[p_font] ).fontType != FontType.DEVICE 
				// ou qu'il ne s'agit pas d'une typo système
			)
			{
				try
				{
					// on tente de récupérer sa définition
					fontDefinition = getDefinitionByName( p_font ) as Class;
 
					// on l'enregistre auprès du flash player
					Font.registerFont( fontDefinition );
 
					// et on l'ajoute à la liste des typos autorisées
					m_allowedFonts[ p_font ] = new fontDefinition() as Font;
				}
				catch ( e:Error )
				{
					// dans le cas ou l'on n'est pas arrivé à récupérer la définition de la classe 
					//on arrête tout
					return;
				}
 
			}
 
			// si il s'agit d'une police du système alors emebedFonts = false sinon embedFonts = true
			embedFonts = ( Font( m_allowedFonts[p_font] ).fontType != FontType.DEVICE );
 
			// on redéfinit la font utilisée
			m_currentFont = p_font;
 
			// et on applique la nouvelle police de caractère au format
			changeFormat( 'font', p_font );
		}
 
		/**
		 * Récupère le nom de la police utilisée pour ce champ texte
		 */
		public function get font():String { return m_currentFont; }
 
		/**
		 * Récupère / définit la valeur de la largeur maximale autorisée pour ce champ texte
		 */
		public function get maxWidth():Number { return m_maxWidth; }
		public function set maxWidth(value:Number):void { m_maxWidth = value; }
 
		/**
		 * Récupère / définit la valeur de la hauteur maximale autorisée pour ce champ texte
		 */
		public function get maxHeight():Number { return m_maxHeight; }
		public function set maxHeight(value:Number):void { m_maxHeight = value; }
 
		/**
		 * Définit la largeur / hauteur du champ texte
		 */
		override public function set width( p_width:Number ):void { 
				super.width = ( p_width > m_maxWidth ) ? m_maxWidth : p_width; }
		override public function set height( p_height:Number ):void { 
				super.height = ( p_height > m_maxHeight ) ? m_maxHeight : p_height; }
 
		/**
		 * Détruit proprement un composant de type UITextField
		 */
		public function destroy():void
		{
			// la police de caractère est passée à null.
			m_currentFont = null;
 
			// on enlève le composant de la displayList de son parent
			if ( parent && parent.contains( this ) )
			{
				parent.removeChild( this );
			}
 
			delete this;
		}
 
	}
 
}		
UITextFieldExample.as
package
{
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
	import com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.text.UITextField;
 
	import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;
 
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.Font;
 
	/**
	 * Exemple d'utilisation du composant UITextField
	 *
	 * @author Matthieu
	 */
	public class UITextFieldExample extends Sprite
	{
 
		protected var m_comboFonts:ComboBox;
		protected var m_textField:UITextField;
 
		public function UITextFieldExample()
		{
 
			/**
			 * On construit la combobox
			 */
			m_comboFonts = new ComboBox();
			m_comboFonts.applySkin( new DefaultComboBoxSkin() );
 
			// on écoute les changements qui interviennent dans la combobox
			m_comboFonts.addEventListener(Event.CHANGE, changeHandler );
			m_comboFonts.resize( 300, 100 );
			m_comboFonts.componentsHeight = 25;
 
			// on ajoute tous les noms de polices autorisées comme élément de la combobox
			var fonts:Array = Font.enumerateFonts( true );
 
			var boxElement:ComboBoxElement;
 
			for each ( var font:Font in fonts )
			{
				boxElement = m_comboFonts.addElement( font.fontName, font.fontName );
				boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);
				// changement de la couleur du texte
				boxElement.labelField.changeFormat("size", 14);
				// changement de la taille de la police du texte
			}
 
			/**
			 * On construit un UITextField
			 */
			m_textField = new UITextField();
			m_textField.text = 'Enjoy  ';
 
			m_textField.x = m_textField.y = 5;
			m_textField.width = m_textField.maxWidth = 300;
			m_textField.height  = m_textField.maxHeight = 30;
 
			m_comboFonts.y = m_textField.y + m_textField.height + 20;
			m_comboFonts.x = 5;
 
			addChild( m_comboFonts );
			addChild( m_textField );
		}
 
		/**
		 * Fonction servant à écouter le changement de police au sein de la combobox.
		 * On applique la police à l'UITextField que l'on a crée et placé sur la
		 * scène.
		 *
		 * @param	e	Evenement de type Event.CHANGE
		 */
		private function changeHandler(e:Event):void
		{
			m_textField.font = m_comboFonts.currentLabel;
		}
 
	}
 
}

V. Remerciements

Je remercie La Rédactrice Kalyparker qui a réalisé un travail énorme avec la mise au gabarit Developpez.com de l'ensemble des articles du Framework de Composants AS3 ActionScript-Facile.com.
Merci beaucoup à l'Equipe Developpez.com pour son aide concernant la diffusion de tous les tutoriels.

Rendez-vous sur ActionScript-Facile pour consulter des tutoriels, télécharger des codes sources supplémentaires et recevoir un guide sur l'utilisation de l'Editeur ActionScript FDT.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.0 TransitionalValid CSS!

Copyright © 2010 Matthieu - www.actionscript-facile.com. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.