Ajouter

Tutorial : Utilisation des States et ItemRenderer dans un Composant List de Flash builder 4 / Flex Gumbo

Posté le 12 septembre 2009 à 2:50 | Tags: Fill, Flash Builder 4 Beta, List, Spark Controls, State, Transitions

Ce tutorial Adobe Flash Builder 4 (Flex 4 Gumbo) aborde le processus de création d'un  ItemRenderer (composant de rendu) pour la personnalisation d'un composant Spark List :

Etape 1 : Mise en place du composant List

Notre Application de départ a le code suivant :

 MXML | 
 Copier le code
 
<?xml version="1.0"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/12/utilisation-des-states-dans-un-composant-list -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
	<s:List id="myList">
 
	</s:List>
</s:Application>

Rendu (nécessite Flash Player 10) :

L'application ci-dessus a un simple composant Spark List d'implémenté.

Etape 2 : Mise en place du DataProvider :

Nous devons maintenant définir les valeurs qui vont être utilisées dans ce tableau, pour ce faire nous allons créer un ArrayCollection ou sera stocké les données, nous utiliserons dans notre exemple trois paramêtres : firstName / lastName et phoneNumber.

Nous devrons de plus appliquer la propriété [Bindable] à cet ArrayCollection, cela permet à Flex de réassigner la valeur à la variable si la valeur entrée à changé, en dispatchant un événement afin de signaler le changement de valeur de la propriété.

Ensuite nous devons appliquer ce tableau de données dynamique au composant List en utilisant l'attribut DataProvider au sein de celui-ci.

Nous aboutissons donc au code suivant :

 MXML | 
 Copier le code
 
<?xml version="1.0"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/12/utilisation-des-states-dans-un-composant-list -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
	<fx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var myArr:ArrayCollection = new ArrayCollection([
		{firstName:"Alex",lastName:"Dupont",phoneNumber:"988675"},
		{firstName:"Jean",lastName:"Paul",phoneNumber:"000000"},
		{firstName:"Frank",lastName:"Poliak",phoneNumber:"1111111"},
		{firstName:"Anil",lastName:"Ambani",phoneNumber:"222222"}
		]);
	]]>
	</fx:Script>
 
	<s:List id="myList" dataProvider="{myArr}">
	</s:List>
</s:Application>

Rendu (nécessite Flash Player 10) :

Nous remarquons que les quatres lignes de données de l'ArrayCollection ont bien été prises en compte dans le composant List avec l'affichage des lignes [object Object]. Nous devons maintenant définir comment vont être utilisées ces informations.

Etape 3 : Mise en place d'un ItemRenderer pour le composant List

Dans cette étape, nous allons en premier lieu mettre en place les différents états de ce composant, puis définir le rendu.

Pour ce faire, nous allons donc ajouter la classe au coeur du composant . Cette classe donne l'ordre à Flash Builder Gumbo d'utiliser un item de rendu dans le composant List. Nous devons dire à flex que l'item de rendu sera un composant ayant un certain type de rendu en implémentant les balises puis .

Nous allons maintenant définir les trois états (State) de notre futur composant de rendu en définissant tout d'abord le tableau d'états (states) avec la balise puis en implémentant une balise par état ce qui nous donne le code suivant :

Nos états (States) sont maintenant en place, nous devons nous occuper de la partie rendu (Render) du composant ItemRenderer.

Nous allons pour cet exemple faire un rendu simple en créant un rectangle simple avec une couleur de fond par état puis ajouter les textes (Label).

Procédons tout d'abord à la mise en place du Rectangle de rendu, nous allons ajouter à notre composant Spark un composant Spark . Nous devons de plus définir les propriétés de ce composant : ce composant sera rempli à l'aide de la balise par une couleur unie qui va varier en fonction de l'état (State) dans laquelle nous nous trouvons. Nous obtenons donc le code suivant :

Partie Label : nous allons mettre en place les textes (Label) qui seront affichés dans les différents états à l'aide des balises Halo . Le texte de ces balises sera personnalisé en fonction de l'état (State) dans lequel nous nous trouvons.

Mise en place des deux labels : nous souhaitons pour cet exemple, qu'un seul Label avec le prénom apparaisse dans l'état normal puis afficher d'autres informations quand on sélectionne la ligne. Nous définirons donc les textes avec la syntaxe à point nous permettant d'accéder aux propriétés spécifiques des trois states. De plus, pour afficher une information provenant de notre tableau de données dynamique (ArrayCollection), nous allons utiliser le code suivant : data. suivi du nom d'un attribut défini dans le tableau ArrayCollection ce qui nous donnerai le code suivant :

Enfin nous allons définir le second Label qui va uniquement s'afficher dans l'état selected en utilisant l'attribut includeIn, nous obtenons alors le code complet suivant :

 MXML | 
 Copier le code
 
<?xml version="1.0"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/12/utilisation-des-states-dans-un-composant-list -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
	<fx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var myArr:ArrayCollection = new ArrayCollection([
		{firstName:"Alex",lastName:"Dupont",phoneNumber:"988675"},
		{firstName:"Jean",lastName:"Paul",phoneNumber:"000000"},
		{firstName:"Frank",lastName:"Poliak",phoneNumber:"1111111"},
		{firstName:"Anil",lastName:"Ambani",phoneNumber:"222222"}
		]);
	]]>
	</fx:Script>
 
	<s:List id="myList" dataProvider="{myArr}" color="0xffffff">
		<s:itemRenderer>
			<fx:Component>
				<s:ItemRenderer>			
					<s:states>
						<s:State name="normal"/>
						<s:State name ="hovered"/>
						<s:State name="selected"/>
					</s:states>
					<s:Rect left="0" right="0" top="0" bottom="0">
						<s:fill>
							<s:SolidColor color="0xffffff"
										  color.hovered="0xfff00f"
										  color.selected="0x32ff23"/>
						</s:fill>
					</s:Rect>
					<mx:Label id="nameLabel" text="{data.firstName}"
							  text.hovered="{data.firstName},{data.lastName}"
							  color="0x000000"/>
					<mx:Label id="phoneLabel" y="15" text="Ph: {data.phoneNumber}"
							  includeIn="selected" color="0x000000"/>
				</s:ItemRenderer>  
			</fx:Component>
	        </s:itemRenderer>
	</s:List>
</s:Application>

Rendu (nécessite Flash Player 10) :

Télécharger la source de l'exemple

Notre code est maintenant complet et nous pouvons voir que l'item dans le composant List a bien trois états, avec l'affichage du second Label dans l'état selected.

Pour aller plus loin, nous allons rapidement voir comment mettre en place un effet de transition simple entre les états. Les transitions seront abordées plus en détail dans d'autres articles.

Etape 4 : Mise en place d'un effet de transition entre les états (States)

Ajoutons à notre composant de rendu (ItemRenderer) la balise afin de définir le tableau de transitions qui devra être utilisé dans le composant de rendu de notre « List Component ».

Ce tableau doit être rempli par différentes transitions, dans notre exemple nous allons en définir deux, une transition quand on vient de l'état « selected » et une quand on va dans l'état « selected ». Nous ajouterons donc deux balises : avec pour la première le paramètre : fromState (qui défini de quel état on vient) comme ceci : fromState="selected", et pour la seconde, le paramètre toState (qui défini dans quel état on va) comme ceci : toState="selected", nous obtenons alors le code suivant :

Enfin, nous allons définir le contenu des deux transitions.

Info utile : dans le cadre d'une transition avec la modification de plusieurs propriétés, nous pouvons utiliser deux méthodes :

• la Sequence Spark, balise qui actionne les propriétés de transition une par une à la suite.
• la Parallel Spark, balise qui action les propriétés de transition en même temps.

Dans notre cas, nous utiliserons les deux types afin de vous montrer leur utilisation, nous obtiendrons donc au final le code suivant :

 MXML | 
 Copier le code
 
<?xml version="1.0"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/12/utilisation-des-states-dans-un-composant-list -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
	<fx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.states.Transition;
		[Bindable]
		private var myArr:ArrayCollection = new ArrayCollection([
		{firstName:"Alex",lastName:"Dupont",phoneNumber:"988675"},
		{firstName:"Jean",lastName:"Paul",phoneNumber:"000000"},
		{firstName:"Frank",lastName:"Poliak",phoneNumber:"1111111"},
		{firstName:"Anil",lastName:"Ambani",phoneNumber:"222222"}
		]);
	]]>
	</fx:Script>
 
	<s:List id="myList" dataProvider="{myArr}" color="0xffffff">
		<s:itemRenderer>
			<fx:Component>
				<s:ItemRenderer>			
					<s:states>
						<s:State name="normal"/>
						<s:State name ="hovered"/>
						<s:State name="selected"/>
					</s:states>
					<s:transitions>
						<s:Transition fromState="selected">
							<s:Sequence>
								<s:Parallel>
									<s:Fade target="{phoneLabel}" />
									<s:Resize target="{this}" />
								</s:Parallel>
								<s:RemoveAction target="{phoneLabel}" />
							</s:Sequence>
						</s:Transition>
						<s:Transition toState="selected">
							<s:Parallel>
								<s:Fade target="{phoneLabel}" />
								<s:Resize target="{this}" />
							</s:Parallel>
						</s:Transition>
					</s:transitions>
					<s:Rect left="0" right="0" top="0" bottom="0">
						<s:fill>
							<s:SolidColor color="0xffffff"
										  color.hovered="0xfff00f"
										  color.selected="0x32ff23"/>
						</s:fill>
					</s:Rect>
					<mx:Label id="nameLabel" text="{data.firstName}"
							  text.hovered="{data.firstName},{data.lastName}"
							  color="0x000000"/>
					<mx:Label id="phoneLabel" y="15" text="Ph: {data.phoneNumber}"
							  includeIn="selected" color="0x000000"/>
				</s:ItemRenderer>  
			</fx:Component>
		</s:itemRenderer>
	</s:List>
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

Autre(s) source(s) proche(s) de ce sujet :

1. Ajout d'un objet FTETextField dans un display list dans Flash Builder 4 / Flex Gumbo
2. Utilisation d'un Spark NavigatorContent dans un Halo Accordion dans Flash Builder 4 / Flex Gumbo
3. Tutorial – Utilisation de la nouvelle syntaxe CSS dans Flash Builder 4 / Flex Gumbo
4. Tutorial – Utilisation de Flex & PHP dans Flash Builder 4 / Flex Gumbo – Part 2
5. Afficher des images dans un composant Spark List en utilisant un item renderer (itemRenderer) personnalisé dans Flash Builder 4 / Flex Gumbo
6. Tutorial – Utilisation de Flex & PHP dans Flash Builder 4 / Flex Gumbo – Part 1
7. Afficher des Images dans un composant Spark List
8. Ajouter un Style CSS aux différents états d'un composant Spark Button
9. Création d'états « View States » dans un « Custom Component »
10. Présentation des States dans Flash Builder 4 (Flex 4/Gumbo)