Création d’un Mini Flex avec les Composants AS3 Facile
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.
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 :
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 !