Composants : Comment bien structurer votre travail

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.

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”

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…

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>

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