Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Composants : Comment bien structurer votre travail

Compatible Flex Builder 3. Cliquer pour en savoir plus sur les compatibilités.Par Freyskeyd (Simon Paitrault), le 13 février 2009

Bonjour à tous,

je vous propose un petit tuto sur comment bien structurer un projet Flex au niveau des composants. Je pense que beaucoup d'entre vous ont déjà créé des composants Flex, ceux qui ne l'ont jamais fais… c'est l'occasion!

Donc commençons.

1. Création de l'arborescence

Créez tout d'abord un nouveau projet (bah oui..), nous voila donc avec 4 dossiers dont le “src”. Dans ce dossier ce trouve notre .mxml Créez un dossier dans “src” nommé “com” puis dans “com” créez un dossier nommé “myComp” puis dans “myComp” un dossier “controls

composants_structure_1.jpg

2. Création du Composant

Notre arborescence est donc créée. Passons au composant, créez un nouveau composant Mxml :

FileName : myComp1 Based On : Canvas

Nous nous retrouvons avec ceci :

<?xml version="1.0" encoding="utf-8"?>
<!-- Fichier Composant -->
<mx:Canvas 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	width="400" 
	height="300">
 
</mx:Canvas>

Pour notre tuto nous allons créer un fichier CSS pour tester le fonctionnement. retournez à la racine du projet (“src”) et créez un dossier “css” dans ce dossier créer un fichier stylesheet.css

.fondComposant{ 
     backgroundColor: #FFFFFF; 
} 

Voila notre Css (rien de compliqué..) Il faut maintenant associer le Css au composant.

<?xml version="1.0" encoding="utf-8"?>
<!-- Fichier Composant -->
<mx:Canvas 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	width="400" 
	height="300"
	styleName="fondComposant"
	>
 
</mx:Canvas>

Notre composant est fini…

3.Paramétrage du fichier Projet

Passons au fichier de base du projet *.mxml placé à la racine. Nous allons lui définir un nouveau paramètre xmlns, lui permettant d'accéder à notre nouveau composant.

<?xml version="1.0" encoding="utf-8"?>
<!-- Fichier myProj.mxml  fichier de Projet -->
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	xmlns:controls="com.myComp.controls.*"
	>
 
</mx:Application>

Notre projet a donc maintenant accès à notre “bibliothèque” com.myComp.controls.* Il nous faut aussi définir le lien entre notre fichier et le fichier css. Pour cela :

<mx:Style source="css/stylesheet.css"/>

rien de bien dur. Il ne nous reste plus qu'a appeler notre composant..

<?xml version="1.0" encoding="utf-8"?>
<!-- Fichier myProj.mxml fichier de Projet -->
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	xmlns:controls="com.myComp.controls.*"
	>
	<mx:Style source="css/stylesheet.css"/>
	<b><controls:myComp1  horizontalCenter="0" verticalCenter="0"/></b>
</mx:Application>

Conclusion

vos composants sont désormais visibles dans l'aide à la saisi..

J'espère que ce tutoriel aidera quelqu'un =)

Merci de m'avoir lu =)