ActionScript FacileChapitre 10Création du Graphisme des Composants AS3 Facile

var button:Button = new Button();

// création un objet de type Button
var button:Button = new Button();
 
// définition du texte
button.label = 'Button Component';
 
// création d'une liste
var list:List = new List();
 
// définition de la taille de la List
list.resize( 230, 150 );
 
// ajout de plusieurs éléments dans la liste
for ( var i:int = 0; i < 35; i++ )
{
	list.addElement( getListElement(i+1) );
}

// ajout à la displaylsit
addChild( button );
 
// définition de sa taille en 150 * 30 pixels
button.resize( 150, 30 );
 
// définition de la position du button sur la scène
button.x = 60;
button.y = 60;
button.labelField.alignCenter(); // centre le texte
button.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte
button.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
 
// détermination de la position de la List
list.x = 30;
list.y = 30;
 
// affichage - ajout à la displaylist
addChild( list );
 
// ajout des marges au contenu de la liste
list.margins = new UIMargins( 5, 5, 5, 5 )

package
{
	import flash.events.MouseEvent;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.Font;
 
	import com.as3facileexemple.skin.classic.DefaultListSkin;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin2;
	import com.as3facileexemple.skin.classic.DefaultListSkin2;
	import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;
 
	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.ui.list.List;
	import com.actionscriptfacile.ui.utils.UIMargins;
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
	import com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.text.UITextField;
 
	/**
	 * Exemple d'utilisation du Framework de composants AS3 ActionScript-Facile
	 *
	 * @author Matthieu
	 */
	public class DeveloppezExample extends Sprite
	{
 
		protected var m_comboFonts:ComboBox;
		protected var m_list:List;
		protected var m_textField:UITextField;
 
		public function DeveloppezExample()
		{
			/**
			 * On construit les boutons
			 */
			var buttonHide:Button = new Button();
 
			// définition du texte
			buttonHide.label = 'Arc en Ciel Liste';
 
			// Application du skin par défaut
			// [ Attention ! Ce skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			buttonHide.applySkin( new DefaultButtonSkin() );
 
			// on écoute les changements qui interviennent sur le bouton
			buttonHide.addEventListener(MouseEvent.CLICK, changeSkinList );
 
			// ajout à la displaylist
			addChild( buttonHide );
 
			// définition de sa taille en 150 * 30 pixels
			buttonHide.resize( 150, 30 );
 
			// définition de la position du button sur la scène
			buttonHide.x = 10;
			buttonHide.y = 220;
 
			// acccès au composant de type UITextField (labelField)
			buttonHide.labelField.alignCenter(); // centre le texte
			buttonHide.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte
			buttonHide.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			buttonHide.labelField.changeFormat("font", "Arial");// changement de la police du texte
 
			var buttonShow:Button = new Button();
 
			// définition du texte
			buttonShow.label = 'Classique Liste';
 
			// Application du skin par défaut
			// [ Attention ! Ce skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			buttonShow.applySkin( new DefaultButtonSkin2() );
 
			// on écoute les changements qui interviennent sur le bouton
			buttonShow.addEventListener(MouseEvent.CLICK, changeSkinList2 );
 
			// ajout à la displaylist
			addChild( buttonShow );
 
			// définition de sa taille en 150 * 30 pixels
			buttonShow.resize( 150, 30 );
 
			// définition de la position du button sur la scène
			buttonShow.x = buttonHide.x;
			buttonShow.y = buttonHide.y + buttonShow.height + 10;
 
			// acccès au composant de type UITextField (labelField)
			buttonShow.labelField.alignCenter(); // centre le texte
			buttonShow.labelField.changeFormat("color", 0xff33ff);// changement de la couleur du texte
			buttonShow.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			buttonShow.labelField.changeFormat("font", "Arial");// changement de la police du texte
 
			/**
			 * On construit la liste
			 */
			m_list = new List();
 
			// Application du skin par défaut
			// [ Attention ! Ce skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			m_list.applySkin( new DefaultListSkin2() );
 
			// définition de la taille de la List
			m_list.resize( 230, 150 );
 
			// ajout de plusieurs éléments dans la liste
			for ( var i:int = 0; i < 35; i++ )
			{
				m_list.addElement( getListElement(i+1) );
			}
 
			// détermination de la position de la List
			m_list.x = 200;
			m_list.y = buttonHide.y;
 
			// ajout des marges au contenu de la liste
			m_list.margins = new UIMargins( 5, 10, 5, 5 );
 
			// affichage - ajout à la displaylist
			addChild( m_list );
 
			/**
			 * 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, 70 );
			m_comboFonts.componentsHeight = 25;// hauteur des éléments de la CombobBox
			m_comboFonts.margins = new UIMargins( 2, 2, 2, 2 );// ajout des marges au contenu de la liste
 
			/**
			 * Définition du format du titre de la ComboBox.
			 *
			 * Remarquez l'utilisation du paramètre true pour définir le format par défaut de notre titre
			 */
			m_comboFonts.currentElement.labelField.changeFormat("font", "Arial",-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF,-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("size", 15,-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("bold", true,-1,-1,true);
			m_comboFonts.currentElement.labelField.alignCenter();
 
			// 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 = 'Développez avec fun  ';
 
			m_textField.x = m_textField.y = 5;
			m_textField.width = m_textField.maxWidth = 390;
			m_textField.height  = m_textField.maxHeight = 30;
			m_textField.changeFormat("size", 20);// changement de la taille de la police du texte
			m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
 
			m_comboFonts.y = m_textField.y + m_textField.height;
			m_comboFonts.x = 20;
 
			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	Evènement de type MouseEvent.CLICK
		 */
		private function changeHandler(e:Event):void
		{
			m_textField.font = m_comboFonts.currentLabel;
			m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
		}
 
		/**
		 * Fonction servant à écouter les click de l'utilisateur sur le buttonHide.
		 * On modifie le skin de la List.
		 *
		 * @param	e	Evènement de type MouseEvent.CLICK
		 */
		 private function changeSkinList(e:MouseEvent) : void
		{
			m_list.applySkin(new DefaultListSkin() );
		}
 
		/**
		 * Fonction servant à écouter les click de l'utilisateur sur le buttonHide.
		 * On modifie le skin de la List.
		 *
		 * @param	e	Evènement de type MouseEvent.CLICK
		 */
		private function changeSkinList2(e:MouseEvent) : void
		{
			m_list.applySkin(new DefaultListSkin2() );
		}
 
		/**
		 * Création des éléments du composant List
		 */
		private function getListElement(id:Number):Sprite
		{
			// création de l'élément
			var oElement:Sprite = new Sprite();
 
			// ajout d'un fond avec une couleur aléatoire
			var shp:Shape = new Shape();
			var color:int = Math.random() * 0X00FFFFFF;
 
			shp.graphics.beginFill( color );
			shp.graphics.drawRect( 0, 0, 200, 30 );
			shp.graphics.endFill();
 
			// ajout d'un texte
			var oTxt:UITextField = new UITextField();
 
			// définition de la taille du texte
			oTxt.height = oTxt.maxHeight = 25;
			oTxt.width = oTxt.maxWidth = 195;
 
			oTxt.text = "Élément "+id;
			oTxt.selectable = false;
			oTxt.changeFormat("color", 0xffffff);// changement de la couleur du texte
			oTxt.changeFormat("size", 14);// changement de la taille de la police du texte
			oTxt.changeFormat("font", "Arial");// changement de la police du texte
 
			oTxt.alignCenter();
 
			oTxt.background = false;
			oTxt.backgroundColor = 0xff33ff;
 
			// ajout à la displaylist (le fond et le texte) de l'élément
			oElement.addChild(shp);
			oElement.addChild(oTxt);
 
			return oElement;
		}
	}
 
}