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

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

Mots clés : application, AS3, components framework, composant en flex, composants graphiques, exemple de conception technique xml et as3 [flash], fdt explore swc, flex, flex as3 afficher un composant en boucle, framework

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 :

installer l’extension Firebug sous Firefox ou GoogleChrome.
de télécharger Flash Thunderbolt : Logging ActionScript projects using Firebug within Firefox!

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

[codesyntax lang= »actionscript3″ title= »ThunderBolt’s Logger.as » bookmarkname= »ThunderBolt’s Logger.as »]

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);

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);

[/codesyntax]

Conclusion

Voilà, cette fois-ci tout est fini !

Notre mini application Flex en action :

https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/10/miniflex_exemple.swf

1	http://e6msyji6epr.exactdn.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é 408 fois – 91,16 Ko

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!

[codesyntax lang= »actionscript3″ title= »MiniFlexExample.as » bookmarkname= »MiniFlexExample.as »]

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() &gt; 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éé
		}

	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

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éé

}

[/codesyntax]

[codesyntax lang= »xml » title= »interface.xml » bookmarkname= »interface.xml »]

&lt;?xml version="1.0" encoding="utf-8" ?&gt;
&lt;data&gt;

	&lt;button x = "20" y = "100" width = "100" height = "20" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin"&gt;

		&lt;labelField
			text = "Un Bouton"
			font = "Arial"
			textColor = "0XFFFFFF"&gt;

				&lt;callMethod name="changeFormat"&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;16&lt;/parameter&gt;
				&lt;/callMethod&gt;

		&lt;/labelField&gt;

	&lt;/button&gt;

	&lt;button x = "20" y = "20" width = "50" height = "30" buttonMode="true" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin"&gt;

		&lt;labelField
			text = "N 3"
			font = "Arial"
			textColor = "0XFFFFFF"&gt;

				&lt;callMethod name="changeFormat"&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;16&lt;/parameter&gt;
				&lt;/callMethod&gt;

				&lt;callMethod name="alignCenter" /&gt;

		&lt;/labelField&gt;

	&lt;/button&gt;

	&lt;button x = "100" y = "50" width = "150" height = "40" buttonMode="true" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin2"&gt;

		&lt;labelField
			text = "Mon long bouton"
			font = "Arial"
			textColor = "0XFFFFFF"&gt;

				&lt;callMethod name="changeLetterFormat"&gt;
					&lt;parameter&gt;0&lt;/parameter&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;30&lt;/parameter&gt;
				&lt;/callMethod&gt;

				&lt;callMethod name="changeLetterFormat"&gt;
					&lt;parameter&gt;2&lt;/parameter&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;30&lt;/parameter&gt;
				&lt;/callMethod&gt;

				&lt;callMethod name="alignLeft" /&gt;

		&lt;/labelField&gt;

	&lt;/button&gt;

&lt;/data&gt;

<?xml version="1.0" encoding="utf-8" ?>

<data>

<labelField

text = "Un Bouton"

font = "Arial"

textColor = "0XFFFFFF">

</callMethod>

</labelField>

</button>

<labelField

text = "N 3"

font = "Arial"

textColor = "0XFFFFFF">

</callMethod>

</labelField>

</button>

<labelField

text = "Mon long bouton"

font = "Arial"

textColor = "0XFFFFFF">

</callMethod>

</callMethod>

</labelField>

</button>

</data>

[/codesyntax]

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

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

I – CDCF et CDCT

II – Mini Flex

Debug dans Flash avec Firefox / Google Chrome

Conclusion

Évolutions des fonctionnalités

Le début de la programmation AS3 Facile

Sources commentées

Comment utilisez-vous les Composants AS3 Facile ?

Cours Récents

Liens / Partenaires

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

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

I – CDCF et CDCT

II – Mini Flex

Debug dans Flash avec Firefox / Google Chrome

Conclusion

Évolutions des fonctionnalités

Le début de la programmation AS3 Facile

Sources commentées

Comment utilisez-vous les Composants AS3 Facile ?

Cours AS3 pouvant vous intéresser :

Cours Récents

Liens / Partenaires