Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Initiation Flex Builder / MXML - Le projet AgessaCalculator

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Compatible Flex Builder 2. Cliquer pour en savoir plus sur les compatibilités.Par ekameleon (Marc Alcaraz), le 05 décembre 2006

Introduction.

Je vais essayer pour une fois d'écrire un petit tutorial qui vous permettra de créer une petite application utile ! Pour illustrer l'utilisation d'un projet MXML dans Flex2, je vais essayer d'illustrer la mise en place d'un mini projet Flex AgessaCalculator utilisant des classes AS3 et un fichier MXML généré par Flex2.

Nous allons donc réaliser un outil qui intéressera surtout les artistes auteurs affiliés à la Maison de Artistes ou à l'AGESSA, il va nous permettre de calculer le détail du précompte à définir sur vos factures. Pour ma part, j'ai souvant besoin de calculer pour chacune de mes factures toutes les valeurs comme la CSG, le 1% de l'auteur etc.. Je pense que ce tutorial peut donner à plusieurs d'entre nous une base pour ensuite créer un bureau virtuel contenant tous les outils indispensables pour un indépendant… Bref on va pas aller aussi loin tout de suite, le but de ce tutorial est de s'initier à l'utilisation du MXML dans Flex :-D

Généralités.

Pour tous ceux qui ne savent pas encore ce que c'est que le MXML, je vais tout de même faire un petit rappel à ce sujet.

Le MXML est un langage créé par Adobe/Macromedia comparable au XAML ou au XUL basé sur le format texte XML. Ce langage est une surcouche de l'AS3 utilisé par le compilateur du SDK de Flex2 et qui permet aux utilisateurs de développer rapidement des contenus intéractifs basés sur une animation au format swf sans se soucier réellement du code complexe nécessaire pour le mettre en place. Il est possible d'utiliser dans un format MXML des feuilles de styles, des composants, du code au format AS3, etc. Il est bien entendu possible d'utiliser du code ActionScript 3 en parallèle d'un fichier MXML.

Voici un exemple simple d'un fichier MXML :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2006/mxml" >
  <mx:Panel title="Test">
    <mx:Label text="Hello World !" fontSize="25" />
  </mx:Panel>
</mx:Application>

Pour le moment le MXML utilise surtout les composants développés par Adobe, mais si vous le désirez il est possible de créer totalement votre propre Framework de composants (en considérant que cela entraine vraiment beaucoup de travail …)

Le langage MXML possède donc de nombreuses balises pour chaque composant et outil disponibles dans le framework mx de Adobe. Je ne vais pas rentrer dans ce tutorial dans le détail de toutes ces balises et de tous les composants disponibles et je suppose que vous aurez pris un peu de temps avant de passer à la suite pour regarder de plus prêt la référence de Flex2 à ce sujet.

AgessaCalculator - Making Off

1 - Ouvrir Flex Builder 2 (on ne sait jamais cela peut toujours servir :ouch: :happy: )

2 - Dans le panneau Navigator de Flex (sur votre gauche par défaut en mode Flex Developper), cliquez avec le bouton droit de la souris dans le panneau et choisissez l'option New → Flex Project.

3 - Un panneau “New Flex Project” s'ouvre. Vous pouvez laisser l'option basic par défaut et appuyez ensuite sur le bouton Next.

4 - Vous pouvez maintenant donner un nom à votre projet, pour ma part je lui donne le nom AgessaCalculator, puis appuyez à nouveau sur le bouton Next.

agessa_name_project_mxml.jpg

5 - Il est possible sur ce nouvel écran du panneau de création du projet d'ajouter des “source path” ou des “library path” qui peuvent contenir du code provenant d'autres frameworks. Par défaut si vous jetez un oeil du côté des library path vous remarquerez que par défaut Flex met en place plusieurs fichiers au format swc nécessaires pour réaliser une application en MXML ( playerglobal.swc, utilities.swc, flex.swc, framework.swc, etc… ).

Au niveau de cet écran final, je vais vous demander de rajouter au niveau du champ Main source folder le nom de répertoire : src. Le but de cette manipulation est de localiser les classes et les fichiers mxml du projet dans un sous répertoire à la racine du projet. Ainsi vous n'aurez pas l'impression d'avoir des tas de fichiers de toute sorte à la base de votre projet (notion d'organisation oblige 8-) ).

agessa_src_project_mxml.jpg

Il ne vous reste plus qu'à appuyer sur le bouton Finish pour générer votre Projet Flex. Si tout c'est bien passé vous devez observer dans le panneau Navigator de Flex2 votre nouveau projet AgessaCalculator avec les 3 sous dossiers de base : bin, html-template et src.

  • bin : répertoire qui contient le déploiement de votre application (fichiers swf compilés, page HTML de base, script .js nécessaires)
  • html-template : répertoire contenant les éléments de bases pour générer le contenu du répertoire bin à chaque compilation du projet.
  • src : le répertoire “source code” contenant vos fichiers mxml et vos classes AS3.

6 - Dans le répertoire src pour le moment vous pouvez découvrir votre fichier principal qui permettra de lancer l'application : AgessaCalculator.mxml. En principe il doit contenir le code MXML suivant :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx:Application>

Remarque : Il existe 2 méthodes pour choisir un autre fichier de lancement pour votre application.

  • Dans le panneau Navigator faire un click droit sur le nom du projet en cours, puis choisir l'option properties. Ensuite dans le menu sur la gauche vous pouvez choisir l'option Flex Applications.
  • Dans le panneau Navigator faire un click droit dans le répertoire src directement sur le fichier que vous désirez définir comme fichier par défaut en choisissant l'option Set as Defaut Application.

7 - Nous allons maintenant créer la classe qui va nous servir pour gérer le calcul du détail précompte pour une prestation à l'AGESSA ou à la MDA.

Nous allons créer un package pour la classe de ce projet en créant dans le répertoire src un sous répertoire src/net/ekameleon/util/, pour cela dans le panneau Navigator de Flex2 il suffit de faire un click droit dans le répertoire src et de faire un New → Folder. (Cette manipulation doit être réalisée pour chaque sous répertoire que vous désirez créer dans votre projet)

Nous allons maintenant créer le fichier PrecompteCalculator.as dans le répertoire src/net/ekameleon/util, pour cela il vous suffit de faire un click droit sur le répertoire util et de choisir l'option New→ActionScript Class.

Un panneau New ActionScript Class s'ouvre. Par défaut dans le champ package Flex a automatiquement écrit le bon package net.ekameleon.util. Il ne vous reste plus qu'à donner un nom à votre classe : PrecompteCalculator. Pour finir, cliquez sur le bouton Finish en bas du panneau.

agessa_navigator_mxml.jpg

Le fichier PrecompteCalculator.as va apparaitre dans l'arborescence de votre projet. A noter que nous n'avons pas utilisé de SuperClasse ou d'Interfaces pour définir cette classe. Par défaut, Flex génère une classe de base avec le code suivant :

package net.ekameleon.util
{
	public class PrecompteCalculator
	{
	}
}

Nous allons maintenant modifier ce code avec le code suivant :

/*
 
  The contents of this file are subject to the Mozilla Public License Version
  1.1 (the "License"); you may not use this file except in compliance with
  the License. You may obtain a copy of the License at 
 
           http://www.mozilla.org/MPL/ 
 
  Software distributed under the License is distributed on an "AS IS" basis,
  WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  for the specific language governing rights and limitations under the License. 
 
  The Original Code is net.ekameleon Framework.
 
  The Initial Developer of the Original Code is
  ALCARAZ Marc (aka eKameleon)  <vegas@ekameleon.net>.
  Portions created by the Initial Developer are Copyright (C) 2004-2005
  the Initial Developer. All Rights Reserved.
 
  Contributor(s) :
 
*/
 
package net.ekameleon.util
{
 
	public class PrecompteCalculator
	{
 
		// ----o Constructor
 
		public function PrecompteCalculator( value:Number=0 )
		{
 
			this.value = isNaN(value) ? 0 : value ;
 
		}
 
		// ----o Constants
 
		static public const MIN_PERCENT:Number = 0.97 ;
 
		static public const CSG:Number = 7.5 ;
		static public const CRDS:Number = 0.5 ;
		static public const WIDOWHOOD:Number = 0.85 ;
 
		// ----o Private Properties
 
		/**
		 * Montant de la prestation HT.
		 */
		public var value:uint ;
 
		// -----o Public Methods
 
		/**
		 * Renvoi le 1% de l'auteur sur le prix total de la prestation HT.
		 */
		public function get authors():Number
		{
			return Math.round(value / 100) ;
		}
 
		/**
		 * Renvoi le total des cotisations a reverser a l'agessa.
		 */
		public function get contributions():Number
		{
			return crds + csg + widowhood + authors ;
		}
 
		/**
		 * Renvoi le montant du C.R.D.S.
		 */
		public function get crds():Number
		{
			return Math.round(CRDS * (value * MIN_PERCENT) / 100) ;
		}
 
		/**
		 * Renvoi le montant de la C.S.G.
		 */
		public function get csg():Number
		{
			return Math.round(CSG * (value * MIN_PERCENT) / 100) ;
		}
 
		/**
		 * Renvoi le total a reverser a l'artiste.
		 */
		public function get total():Number
		{
			return value - (crds + csg + widowhood) ;
		}	
 
		/**
		 * Renvoi la cotisation de maladie veuvage 0.85% du montant brut HT
		 */
		public function get widowhood():Number
		{
			return Math.round(WIDOWHOOD * value / 100) ;
		}
 
		/**
		 * Renvoi une chaine de caractere définissant simplement tous les details du precompte.
		 */
		public function toFormatString():String
		{
			var calculator:PrecompteCalculator = this ;
			var s:String = "" ;
			s += "> Montant brut HT : " + calculator.value + " euro\r" ;
			s += "  * Cotisation maladie veuvage 0.85 % du montant brut HT : " + calculator.widowhood + " euro\r" ;
			s += "  * C.S.G taux 7.50 % de 97 % du montant brut HT : " + calculator.csg + " euro\r" ;
			s += "  * C.R.D.S taux 0.50 % de 97% du montant brut HT : " + calculator.crds + " euro\r" ;
			s += "  * Contribution a acquitter par le diffuseur (1% du brut HT) : " + calculator.authors + " euro\r" ;
			s += "> Total cotisations : " + calculator.contributions + " euro\r" ;
			s += "> Total reverser : " + calculator.total + " euro\r"  ;
			return s ;
		}
 
	}
}

Pensez à enregistrer votre fichier, en général j'utilise beaucoup le CTRL + S dans Flex2 pour enregistrer à tout moment mon document en cours. A savoir que cela permet à Flex de tester le projet en cours pour y retrouver des erreurs, etc.

8 - Il reste maintenant à cabler les éléments graphiques de l'application. Pour cela il faut retourner dans le fichier AgessaCalculator.mxml. Vous remarquez en haut du fichier mxml qu'il existe 2 onglets : Source et Design. Nous allons passer maintenant en mode Design pour la suite des opérations.

Je vous conseille pour commencer d'afficher les panneaux Components et Flex Properties en passant par le menu Window en haut de Flex2. C'est en mode Design que ces 2 panneaux prennent leur importance.

agessa_components_mxml.jpg

Le mode Design est un espace de création qui vous permet un peu comme dans Dreamweaver de créer rapidement le visuel de votre application Flex. Vous pouvez par exemple facilement glisser des composants dans la zone de l'application et définir les propriétés pour chacun d'eux (ou pour un groupe) en passant par le panneau Flex Properties.

Pour notre exercice nous allons glisser sur la scène différents composants :

  • 1 composant de type Label
  • 1 composant de type Button
  • 1 composant de type TexInput
  • 1 composant de type TextArea

agessa_design_mxml.jpg

Il devient très facile d'ébaucher votre environnement graphique via cette méthode. A noter qu'il est possible de sélectionner plusieurs composants dans la scène et de passer par la rubrique Layout du panneau Flex Properties pour définir l'alignement d'un groupe de composants dans l'environnement de la scène principale.

agessa_layout_mxml.jpg

Vous pouvez à tout moment revenir vers le code source de votre fichier MXML en cliquant sur l'onglet Source. Cela vous permettra de voir en temps réel les modifications apportées via l'interface Design.

9 - Finalisation du dicument MXML.

Il est très facile de mettre en place la base visuelle de l'application via l'interface Design mais j'avoue que je me sens ensuite vraiment plus à l'aise dans l'interface Source en utilsant le code MXML directement et ses balises. Tout devient très facile avec l'autocomplétion automatique disponible dans Flex2.

Au final j'obtiens le code MXML suivant dans mon fichier AgessaCalculator.mxml :

<?xml version="1.0" encoding="utf-8"?>
 
<mx:Application 
 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	backgroundGradientColors="[#fdefc4, #955413]"
 
>
 
	<mx:Script>
		<![CDATA[
 
			import net.ekameleon.util.PrecompteCalculator;
			import flash.ui.Keyboard ;
 
			public function calculate():void
			{
				var value:Number = Number(input.text) ;
				var calculator:PrecompteCalculator = new PrecompteCalculator(value) ;
				result.text = calculator.toFormatString()  ;
				input.text = "" ;
			}
 
			public function keyDown(event:KeyboardEvent):void
			{
				if (event.keyCode == Keyboard.ENTER)
				{
					calculate();
				}
			}
 
		]]>
	</mx:Script>
	<mx:Button 
		id = "bt"
		label="calculer" 
		click="calculate();"
		horizontalCenter="116.5"
		verticalCenter="-109"
		width="106"
		fontFamily="Arial"
		fontSize="11"
		color="#005555"
		cornerRadius="4" 
		fillColors="[#c4ba86, #808040]"
	/>
 
	<mx:TextInput 
		id = "input"
	        keyDown="keyDown(event)"
	 	horizontalCenter="-81.5"
	 	verticalCenter="-109" 
	 	width="274"
	 />
 
	<mx:TextArea 
		id = "result"
		width="397" 
		height="174" 
		editable="false"
	 	horizontalCenter="-20" 
	 	verticalCenter="-3"
	 />
 
	<mx:Label 
		text="Calcul du precompte."
		fontFamily="Arial"
		fontWeight="bold"
		fontSize="13"
		color="#804000"
		enabled="true"
		horizontalCenter="-148"
		verticalCenter="-135"
	/>
 
</mx:Application>

J'utilise au début de mon document MXML une balise <mx:Script> qui permet via une CDATA d'insérer du code directement dans le fichier MXML.

Je crée donc 2 fonctions calculate() et keyDown(). La première va me permettre d'afficher dans mon TextArea le résultat du calcul du précompte en fonction de la somme inscrite dans le champ de texte saisie (TextInput). La seconde va me permettre d'intercepter un événement si l'utilisateur appui sur la touche ENTER de son clavier lorsqu'il a le focus sur le champ de texte de saisie.

Pour intercepter l'événement sur le click du composant Button, il suffit de regarder de plus prêt la balise <mx:Button> et surtout l'attribut click=“calculate();”. Dans cet attribut j'insère directement du code pour appeler la méthode calculate(). Ecrire du code dans un l'attribut click du composant Button revient à taper du code dans une fonction invoquée à chaque click sur celui-ci.

De même dans la balise <mx:TextInput> j'ai inséré l'attribut keyDown qui me permet d'invoquer la fonction keyDown() définie dans la balise <mx:Script>. A noter que le mot clé event dans cet attribut correspond à l'événement envoyé vers la fonction keyDown(e:KeyboardEvent).

Vous remarquerez que tous les composants possèdent un attribut id qui vous permettra dans le code de localiser les différentes occurences de vos composants affichés.

Je vous conseille de prendre un peu de temps pour bien consulter les différents attributs contenus dans chacune des balises de ce document MXML. N'oubliez pas qu'il suffit de sélectionner un mot dans le document avec la souris et de faire Help → Help In Language Reference (Shift + F2) pour obtenir une aide directe sur la balise, l'attribut, etc. que vous ne comprenez pas correctement dans le code AS3 ou MXML.

10 - Publication de l'application.

Il reste maintenant à publier votre projet, pour cela il existe plusieurs solutions mais pour moi la plus simple et de faire un click droit sur le fichier AgessaCalculator.mxml et de choisir la commande “Run Application” . Vous pouvez également passer par le menu princidpal en haut de Flex2 avec le menu Run et les options Run AgessaCalculator (CTRL + F11) ou Debug AgessaCalculator (F11) si vous désirez utiliser des trace() dans votre code pour obtenir des informations dans le panneau Console de Flex2.

Je ne vais pas fournir toutes les sources du projet car je considère que ce tutorial est assez détaillé pour que vous réalisez par vous même toute l'application sans trop de problème. Le but de l'exercice est de réaliser étape par étape ce projet MXML et pas de faire du simple copier coller ;)

Vous voyez donc qu'il est vraiment assez facile de se mettre au MXML et à l'AS3 en ayant un minimum de connaissance en ActionScript et en syntaxe XML de base. A mon avis l'utilisation combinée de Flex2 et du prochain Flash9 pour la création des animations et des visuels des applications va faire très très mal !

Je vous rappel qu'il est possible pour le moment de récupérer une version alpha de Flash9 sur le labs de Adobe (Update de Flash8 pour le moment) qui vous permettra de vous initier à la publication d'animations swf au format FP9. 8-)

Par EKAMELEON - ALCARAZ Marc (2006). Vous pouvez retrouver ce tutorial et des commentaires à ce sujet sur mon blog.