<h2>Votre Formation vidéo</h2><br/>
Votre formation est décomposée<br/>
en chapitres très clairs de 20 à 30 min. <h2>Des exemples SWF </h2><br/>
Chaque leçon est accompagnée<br/>
du code source avec le fla et les classes. <h2>Votre Suivi personnalisé</h2><br/>
Vous pouvez  me poser toutes<br/>
vos questions sous les cours vidéos.

Création d’un Mini Flex avec les Composants AS3 Facile

1 question

Écrit le 3 octobre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Mots clés : , , , , , , , , ,

Le Kit du Développeur Flash

Et voici un article Bonus qui montre une autre facette du Framework AS3 Facile!

La création d’une Application avec les Composants AS3 Facile. Cet exemple Flash utilise un fichier xml pour la construction des Composants ActionScript.

I – CDCF et CDCT

Pour une fois, nous allons déroger à la règle.

En effet, cette fois-ci il n’y aura aucun cahier des charges techniques ni de cahier des charges fonctionnels.

Pourquoi me direz-vous ?

Eh bien tout simplement parce que nous n’allons pas développer une application flash destinée à être utilisé telle quelle en production.

Le contexte d’apprentissage de cet article est plus du domaine de la Recherche & Développement.

La fameuse R&D!

II – Mini Flex

Place à la pratique, au code !

Nous allons concevoir un mini Flex.

C’est à dire que nous allons coder une classe de document. Cette classe va nous permettre de créer des interfaces, à l’aide d’un fichier XML chargé dynamiquement.

Cela consiste à développer un parseur qui :

  • Va analyser notre XML de configuration.
  • En déduire ce qu’il doit créer et comment.

Le code en lui-même reste simple, je vous laisse donc le découvrir.

Sachez cependant qu’il est loin d’être terminé.

En effet, seul le composant Button est implémenté.

Je vous encourage vivement à continuer, en implémentant tous les composants que nous avons développés précédemment.

Debug dans Flash avec Firefox / Google Chrome

Vous remarquerez sans doute que j’ai ajouté dans la classe MiniFlexExample.as un système de debug d’application.

Cet ensemble de classes fonctionne avec Firefox pour effectuer un affichage – debug (ou trace) de votre application en ligne.

Cette fonctionnalité est indispensable pour les RIA Flash 🙂

Il vous suffit de :

Ensuite dans votre code ActionScript, vous n’avez plus qu’à utiliser la syntaxe suivante pour afficher le message, les variables que vous souhaitez.

import org.osflash.thunderbolt.Logger;
 
var myNumber: int = 5;
var myString: String = "Lorem ipsum";
Logger.error ("Logging two objects: A number typed as int and a string", myNumber, myString);
 
// some log objects
var myNumber: int = 5;
var myString: String = "Lorem ipsum";
 
// INFO log level
Logger.info ("Just an info message");
 
// DEBUG log level
Logger.debug ("A debug log ", myString);
 
// WARN log level
Logger.warn ("A warn message", myNumber);
 
// ERROR log level
Logger.error ("An error log ", myString);

Conclusion

Voilà, cette fois-ci tout est fini !

Notre mini application Flex en action :

https://www.actionscript-facile.com/wp-content/uploads/2010/10/miniflex_exemple.swf

Évolutions des fonctionnalités

Je vous propose de continuer à développer ce mini-flex pour :

  • intégrer les autres composants d’ActionScript-Facile.
  • ajouter des fonctionnalités propres à vos besoins.
  • l’utiliser comme modèle pour créer vos applications. Évidemment, il est nécessaire, voir indispensable, de concevoir une analyse beaucoup plus complète et structurée.

Le début de la programmation AS3 Facile

Ne perdez pas de vue que ce n’est que le début.

En effet, notre librairie est loin d’être complète, je vous encourage vivement à l’enrichir et à l’améliorer.

J’ai pris beaucoup de plaisir à être votre guide tout au long de ces 10 articles et j’espère que leur lecture vous aura aidé.

Sources commentées

  • MiniFlexExample.as
  • bin/interface.xml

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Mini Flex Framework AS3 Facile” miniflex_framework_actionscript-facile.zip – Téléchargé 148 fois – 91 KB

Comment utilisez-vous les Composants AS3 Facile ?

Je serais ravi de consulter les Applications Flash que vous avez développés avec le Framework AS3 Facile.

Postez-les dans les commentaires juste en dessous, je les rajouterais prochainement dans un article!

package
{
	import flash.events.MouseEvent;
 
	import com.actionscriptfacile.skin.ISkin;
 
	import flash.utils.getDefinitionByName;
 
	import org.osflash.thunderbolt.Logger;
 
	import com.as3facileexemple.skin.classic.DefaultButtonSkin;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin2;
 
	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.ui.UIComponent;
 
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.utils.Dictionary;
 
	/**
	 * Exemple de Mini Flex avec les composants graphiques ActionScript-Facile.
	 *
	 * @author Matthieu
	 */
	 public class MiniFlexExample extends Sprite
	{
		private var m_correspTable:Dictionary;// création d'une table de correspondance.
 
		/*
		 * Permet de forcer l'inclusion des classes de Skin Button dans le swf
		 */
        public static var linkages:Array = [DefaultButtonSkin, DefaultButtonSkin2, MouseEvent.CLICK];
 
		public function MiniFlexExample()
		{
			Logger.debug ("info a="+Math.random()*28); // debug de l'application avec l'extension firefox Firebug
 
			// chargement le fichier XML
			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, completeHandler );
			loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler );
 
			var file:URLRequest =  new URLRequest('interface.xml?a='+Math.random()*28);
			loader.load(file );
		}
 
		private function errorHandler(e:IOErrorEvent):void
		{
			// gestion des erreurs
			var loader:URLLoader = e.target as URLLoader;
			loader.removeEventListener(Event.COMPLETE, completeHandler );
			loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler );
 
			var text:TextField = addChild( new TextField() ) as TextField;
			text.width = stage.stageWidth;
			text.autoSize = 'center';
			text.text = "Erreur : "+e.text;
		}
 
		private function completeHandler(e:Event):void
		{
			// récupération des données puis transmission de celles-ci à la méthode parseInterface
			var loader:URLLoader = e.target as URLLoader;
			loader.removeEventListener(Event.COMPLETE, completeHandler );
			loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler );
 
			parseInterface( new XML( loader.data ) );
		}
 
		/**
		 * Analyse du fichier xml et construction de l'interface.
		 *
		 */
		private function parseInterface( p_interface:XML ):void
		{
			// on référence le composant button dans la table de correspondance
			m_correspTable = new Dictionary();
			m_correspTable['button'] = buildButton;// appel automatique de la méthode de construction d'un Button
 
			var component:UIComponent;
			var func:Function;
 
			XML.ignoreComments = true;
			XML.ignoreWhitespace = true;
			XML.ignoreProcessingInstructions = true;
 
			for each ( var xml:XML in p_interface.children() )
			{
				// on cherche la fonction de parsing du composant
				func = m_correspTable[ xml.name() ] as Function;
 
				// si on ne la trouve pas on continue
				if ( func == null )
					continue;
 
				// sinon on  l'éxécute
				component = func( xml ) as UIComponent;// création du composant
 
				// on écoute les changements qui interviennent sur le composant
				component.addEventListener(MouseEvent.CLICK, updateLabel );
 
				// et on ajoute le composant à la scène
				addChild ( component );
			}
		}
 
		/**
		 * Modifie la label du Button
		 *
		 */
		private function updateLabel(e:MouseEvent): void
		{
			var oButton:Button = e.target as Button;
			oButton.label = "N° " + Math.ceil(Math.random()*28);
 
			Logger.debug ("updateLabel : "+oButton.label);
		}
 
		/**
		 * fonction permettant de construire un composant button
		 *
		 */
		private function buildButton( p_xml:XML ):Button
		{
 
			var prop:XML;
			var l_labelField:XML;
			var l_labelsList:XMLList = p_xml.child('labelField');
 
			var l_component:Button = new Button();
			var parameters:Array = new Array();
			var parameter:XML;
			var method:Function;
 
			// on regarde si l'objet labelField est défini dans le XML
			if ( l_labelsList.length() > 0 )
			{
				// si oui on le récupère
				l_labelField = l_labelsList[0];
			}
 
			// récupère le skin du fichier xml et l'applique au composant
			var definition:Class = getDefinitionByName(p_xml.attribute('skin') ) as Class;
			l_component.applySkin( new definition() as ISkin);
 
			Logger.debug ("p_xml : "+p_xml.attribute('skin'));
 
			l_component.resize( Number ( p_xml.attribute('width') ), Number ( p_xml.attribute('height') ) );
 
			for each( prop in p_xml.attributes() )
			{
				// on a déjà défini le width et le height
				if ( prop.name() == "width" || prop.name() == "height" )
					continue;
 
				// on vérifie que la propriété existe avant de lui appliquer la valeur définit dans le XML
				if ( l_component.hasOwnProperty( new String( prop.name() ) ) )
				{
					l_component[ new String( prop.name() ) ] = prop.valueOf();
				}
			}
 
			// si le labelField est défini
			if ( l_labelField != null )
			{
				// on boucle sur ses propriétés
				for each( prop in l_labelField.attributes() )
				{
					// on regarde si la propriété existe et le cas échéant on lui applique la valeur
					if ( l_component.labelField.hasOwnProperty( new String( prop.name() ) ) )
					{
						l_component.labelField[new String( prop.name() )] = prop.valueOf();
					}
				}
 
				for each( prop in l_labelField.children() )
				{
 
					// on regarde si le noeud est un appel de méthode
					if ( prop.name() == "callMethod" )
					{
						if ( l_component.labelField.hasOwnProperty( prop.attribute('name').toString() ) )
						{
 
							// on récupère les paramètres
							parameters = new Array();
							for each( parameter in prop.children() )
							{
								parameters.push( parameter.valueOf() );
							}
 
							method = l_component.labelField[prop.attribute('name').toString()] as Function;
 
							if ( method != null )
							{
								// et on appelle la méthode
								method.apply( this, parameters );
							}
 
						}
					}
				}
			}
			return l_component;// renvoie une référence vers le composant créé
		}
 
	}
}
<?xml version="1.0" encoding="utf-8" ?>
<data>
 
	<button x = "20" y = "100" width = "100" height = "20" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin">
 
		<labelField
			text = "Un Bouton"
			font = "Arial"
			textColor = "0XFFFFFF">
 
				<callMethod name="changeFormat">
					<parameter>size</parameter>
					<parameter>16</parameter>
				</callMethod>
 
		</labelField>
 
	</button>
 
	<button x = "20" y = "20" width = "50" height = "30" buttonMode="true" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin">
 
		<labelField
			text = "N 3"
			font = "Arial"
			textColor = "0XFFFFFF">
 
				<callMethod name="changeFormat">
					<parameter>size</parameter>
					<parameter>16</parameter>
				</callMethod>
 
				<callMethod name="alignCenter" />
 
		</labelField>
 
	</button>
 
	<button x = "100" y = "50" width = "150" height = "40" buttonMode="true" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin2">
 
		<labelField
			text = "Mon long bouton"
			font = "Arial"
			textColor = "0XFFFFFF">
 
				<callMethod name="changeLetterFormat">
					<parameter>0</parameter>
					<parameter>size</parameter>
					<parameter>30</parameter>
				</callMethod>
 
				<callMethod name="changeLetterFormat">
					<parameter>2</parameter>
					<parameter>size</parameter>
					<parameter>30</parameter>
				</callMethod>
 
				<callMethod name="alignLeft" />
 
		</labelField>
 
	</button>
 
</data>


Développez des Jeux et Applications Flash avec la Formation AS3 Facile !

Recevez Gratuitement Des Cours en Vidéos, des codes source et des livrets de formation.
Et en bonus gratuit : Le Framework AS3 Facile ! 


sed ultricies Praesent odio mi, venenatis, Sed elit. ut Curabitur