Ajouter

Afficher des images dans un composant Spark List en utilisant un item renderer (itemRenderer) personnalisé dans Flash Builder 4 / Flex Gumbo

L'exemple suivant va vous montrer comment ajouter une image dans un composant (component) Spark List  en utilisant un item renderer personnalisé (custom itemRenderer) dans Flash Builder 4 Beta / Flex 4 Gumbo.

Suite à la présentation de cet exemple provenant du blog Flex Examples de Peter Dehaan, vous verrez deux autres tests de ce même composant avec l'ajout de transitions entre les différents états.

Mise en avant : itemRenderer

Attention : vous devez impérativement disposer du SDK 4.0.0.10007 ou supérieur.

1. Affichage d'images dans un composant Spark List en utilisant un custom itemRenderer

Code de l'application : 

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/30/afficher-images-spark-list-item-renderer-flash-builder-4-flex-gumbo/ -->
<s:Application name="Spark_List_itemRenderer_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
 
    <s:List id="lst"
            itemRenderer="skins.CustomItemRenderer"
            width="300"
            horizontalCenter="0" verticalCenter="0"
            useVirtualLayout="false">
        <s:layout>
            <s:VerticalLayout gap="0" requestedRowCount="5" horizontalAlign="justify" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object name="Adobe Illustrator" src="assets/ai_appicon-tn.gif" />
                <fx:Object name="Adobe AIR" src="assets/air_appicon-tn.gif" />
                <fx:Object name="ColdFusion" src="assets/cf_appicon-tn.gif" />
                <fx:Object name="Dreamweaver" src="assets/dw_appicon-tn.gif" />
                <fx:Object name="Flash" src="assets/fl_appicon-tn.gif" />
                <fx:Object name="Flash Player" src="assets/fl_player_appicon-tn.gif" />
                <fx:Object name="Flex" src="assets/fx_appicon-tn.gif" />
                <fx:Object name="Photoshop" src="assets/ps_appicon-tn.gif" />
                <fx:Object name="Fireworks" src="assets/fw_appicon-tn.gif" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

Code de l'itemRenderer skins/CustomItemRenderer.mxml : 

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/30/afficher-images-spark-list-item-renderer-flash-builder-4-flex-gumbo/ -->
<s:ItemRenderer name="CustomItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        focusEnabled="false">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret" />
        <s:State name="hoveredAndShowsCaret" />
        <s:State name="selectedAndShowsCaret" />
    </s:states>
 
    <s:BitmapImage source="{data.src}" />
 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor color="black"
                    alpha="0"
                    alpha.hovered="0.4"
                    alpha.selected="0.4"
                    alpha.selectedAndShowsCaret="0.4" />
        </s:fill>
    </s:Rect>
 
    <s:Label color="white"
            maxDisplayedLines="1"
            backgroundAlpha="0.3"
            backgroundColor="black"
            width="100%"
            bottom="0"
            paddingLeft="5" paddingRight="5"
            paddingTop="5" paddingBottom="5"
            includeIn="hovered,hoveredAndShowsCaret,selected,selectedAndShowsCaret">
        <s:text>{data.name}</s:text>
    </s:Label>
 
</s:ItemRenderer>

Rendu (nécessite Flash Player 10) :

Télécharger la source de l'exemple

2. Création d'un effet simple en utilisant la propriété de transition Spark Fade

L'application reste la même, j'ai juste légerement modifié l'itemRenderer du composant Spark List afin d'ajouter une transition entre les états « normal » et « hovered » en prennant en cibles (targets) les composants (components) Spark Rect et Spark Label sur lequel j'ai ajouté un effet de Fade.

Code de l'itemRenderer : 

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/30/afficher-images-spark-list-item-renderer-flash-builder-4-flex-gumbo/ -->
<s:ItemRenderer name="CustomItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        focusEnabled="false">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret" />
        <s:State name="hoveredAndShowsCaret" />
        <s:State name="selectedAndShowsCaret" />
    </s:states>
 
 	<s:transitions>
 		<s:Transition fromState="normal" toState="hovered">
 			<s:Parallel>
 				<s:Fade targets="{[rect,lbl]}" alphaFrom="0" alphaTo="1" duration="600"/>
 			</s:Parallel>
 		</s:Transition>
 		<s:Transition fromState="hovered" toState="normal">
 			<s:Parallel>
 				<s:Fade targets="{[rect,lbl]}" alphaFrom="1" alphaTo="0" duration="600"/>
 			</s:Parallel>
 		</s:Transition>
 	</s:transitions>
    <s:BitmapImage source="{data.src}" />
 
    <s:Rect id="rect" left="0" right="0" top="0" bottom="0" >
        <s:fill>
            <s:SolidColor color="black"
                    alpha="0"
                    alpha.hovered="0.4"
                    alpha.selected="0.4"
                    alpha.selectedAndShowsCaret="0.4" />
        </s:fill>
    </s:Rect>
 
    <s:Label id="lbl" color="white"
            maxDisplayedLines="1"
            backgroundAlpha="0.3"
            backgroundColor="black"
            width="100%"
            bottom="0"
            paddingLeft="5" paddingRight="5"
            paddingTop="5" paddingBottom="5"
            includeIn="hovered,hoveredAndShowsCaret,selected,selectedAndShowsCaret">
        <s:text>{data.name}</s:text>
    </s:Label>
 
</s:ItemRenderer>

Rendu (nécessite Flash Player 10) :

Télécharger la source de l'exemple

3. Création d'effets personnalisés de transitions entre les états de l'itemRenderer du composant Spark List

Dans l'exemple ci-dessous, j'ai poussé un peu plus les transitions avec un déplacement du logo et l'ajout d'une couleur personnalisée par ligne (row). De plus, j'ai ajouté un petit composant Spark controlBarContent avec un Spark HSlider permettant de faire des tests sur les itemRenderers après un redimensionnement de la largeur du composant Spark List. Je vous laisse regarder le résultat :

Code de l'application : 

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/30/afficher-images-spark-list-item-renderer-flash-builder-4-flex-gumbo/ -->
<s:Application name="Spark_List_itemRenderer_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
 	<s:controlBarContent>
 		<s:Label text="Flash Builder Tutorial | Largeur du Spark List :"/>
 		<s:HSlider id="slider" minimum="200" maximum="600" value="400"/> 		
 	</s:controlBarContent>
 
    <s:List id="lst"
            itemRenderer="skins.CustomItemRenderer3"
            width="{slider.value}"
            horizontalCenter="0" verticalCenter="0"
            useVirtualLayout="false">
        <s:layout>
            <s:VerticalLayout gap="0" requestedRowCount="5" horizontalAlign="justify" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object name="Adobe Illustrator" src="@Embed('assets/ai_appicon-tn.gif')" color="0xe07406"/>
                <fx:Object name="Adobe AIR" src="@Embed('assets/air_appicon-tn.gif')" color="0x8b1d16"/>
                <fx:Object name="ColdFusion" src="@Embed('assets/cf_appicon-tn.gif')" color="0x144a6f"/>
                <fx:Object name="Dreamweaver" src="@Embed('assets/dw_appicon-tn.gif')" color="0x596724"/>
                <fx:Object name="Flash" src="@Embed('assets/fl_appicon-tn.gif')" color="0x651a19"/>
                <fx:Object name="Flash Player" src="@Embed('assets/fl_player_appicon-tn.gif')" color="0x80211f"/>
                <fx:Object name="Flex" src="@Embed('assets/fx_appicon-tn.gif')" color="0x303131"/>
                <fx:Object name="Photoshop" src="@Embed('assets/ps_appicon-tn.gif')" color="0x2b4567"/>
                <fx:Object name="Fireworks" src="@Embed('assets/fw_appicon-tn.gif')" color="0xa26e14"/>
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

Code de l'itemRenderer skins/CustomItemRenderer3.mxml : 

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/30/afficher-images-spark-list-item-renderer-flash-builder-4-flex-gumbo/ -->
<s:ItemRenderer name="CustomItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        focusEnabled="false">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret" />
        <s:State name="hoveredAndShowsCaret" />
        <s:State name="selectedAndShowsCaret" />
    </s:states>
 
 	<s:transitions>
 		<s:Transition fromState="normal" toState="hovered">
 			<s:Parallel>
 				<s:Move target="{bmp}" xTo="{this.width-bmp.width}" duration="300"/>
 				<s:Fade targets="{[rect,lbl]}" alphaFrom="0" alphaTo="1" duration="600"/>
 			</s:Parallel>
 		</s:Transition>		
 <s:Transition fromState="*" toState="normal" excludeFrom="normal">
 			<s:Parallel>
 				<s:Move target="{bmp}" xTo="0" duration="300"/>
 				<s:Fade targets="{[rect,lbl]}" alphaFrom="1" alphaTo="0" duration="600"/>
 			</s:Parallel>
 		</s:Transition>	
 	</s:transitions>
 
    <s:Rect id="rect" left="0" right="0" top="0" bottom="0" >
        <s:fill>
            <s:SolidColor color="{data.color}"
                    alpha="0"
                    alpha.hovered="0.4"
                    alpha.selected="0.4"
                    alpha.selectedAndShowsCaret="0.4" />
        </s:fill>
    </s:Rect>
 
    <s:Label id="lbl" color="white"
            maxDisplayedLines="1"
            backgroundAlpha="0.3"
            backgroundColor="{data.color}"
            width="100%"
            bottom="0"
            paddingLeft="5" paddingRight="5"
            paddingTop="5" paddingBottom="5"
            includeIn="hovered,hoveredAndShowsCaret,selected,selectedAndShowsCaret">
        <s:text>{data.name}</s:text>
    </s:Label>
 
 	<s:BitmapImage source="{data.src}" id="bmp"/>
 
</s:ItemRenderer>

Rendu (nécessite Flash Player 10) :

Télécharger la source de l'exemple

Sur l'exemple ci-dessus, on se rend compte qu'il y a un problème de replacement de l'icône quand on redimensionne (resize) le composant Spark List. Il manque donc un évenement qui va provoquer le replacement celle-ci quand on est dans notre itemRenderer dans l'état : selected et selectedAndShowCaret.

Nous allons donc ajouter le déclenchement de l'évenement grâce à l'ajout de l'event resize pour ces deux states en utilisant la syntaxe à point. Puis ajouter la petite ligne de code pour replacer l'icon au coeur de la fonction icon_setNewIconPosition comme ci-dessous :

Code source du composant : skins/CustomItemRenderer4.mxml :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/30/afficher-images-spark-list-item-renderer-flash-builder-4-flex-gumbo/ -->
<s:ItemRenderer name="CustomItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        focusEnabled="false"
        resize.selected="icon_setNewIconPosition(event)"
        resize.selectedAndShowsCaret="icon_setNewIconPosition(event)">
 
    <fx:Script>
    	<![CDATA[
    		protected function icon_setNewIconPosition(e:Event):void
    		{
    			bmp.x = this.width-bmp.width;
       		}
 
    	]]>
    </fx:Script>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret" />
        <s:State name="hoveredAndShowsCaret" />
        <s:State name="selectedAndShowsCaret" />
    </s:states>
 
 	<s:transitions>
 		<s:Transition fromState="normal" toState="hovered">
 			<s:Parallel>
 				<s:Move target="{bmp}" xTo="{this.width-bmp.width}" duration="300"/>
 				<s:Fade targets="{[rect,lbl]}" alphaFrom="0" alphaTo="1" duration="600"/>
 			</s:Parallel>
 		</s:Transition>		
 <s:Transition fromState="*" toState="normal" excludeFrom="normal">
 			<s:Parallel>
 				<s:Move target="{bmp}" xTo="0" duration="300"/>
 				<s:Fade targets="{[rect,lbl]}" alphaFrom="1" alphaTo="0" duration="600"/>
 			</s:Parallel>
 		</s:Transition>	
 	</s:transitions>
 
    <s:Rect id="rect" left="0" right="0" top="0" bottom="0" >
        <s:fill>
            <s:SolidColor color="{data.color}"
                    alpha="0"
                    alpha.hovered="0.4"
                    alpha.selected="0.4"
                    alpha.selectedAndShowsCaret="0.4" />
        </s:fill>
    </s:Rect>
 
    <s:Label id="lbl" color="white"
            maxDisplayedLines="1"
            backgroundAlpha="0.3"
            backgroundColor="{data.color}"
            width="100%"
            bottom="0"
            paddingLeft="5" paddingRight="5"
            paddingTop="5" paddingBottom="5"
            includeIn="hovered,hoveredAndShowsCaret,selected,selectedAndShowsCaret">
        <s:text>{data.name}</s:text>
    </s:Label>
 
 	<s:BitmapImage source="{data.src}" id="bmp"/>
 
</s:ItemRenderer>

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. Définir le padding d'un composant Spark NavigatorContent dans Flash Builder 4 / Flex Gumbo
2. Ajout d'un objet FTETextField dans un display list dans Flash Builder 4 / Flex Gumbo
3. Afficher du texte HTML formaté dans un composant Spark RichText dans Flash Builder 4 / Flex Gumbo
4. Définir le background color d'un composant Spark Application Control Bar dans Flash Builder 4 / Flex Gumbo
5. Gestion de la visibilité de la bordure d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo
6. Gestion du lissage (smoothing) sur l'image de fond (BackGround) d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo
7. Activer/Désactiver le click sur la zone transparente d'un composant Spark Graphic de Flash Builder 4 – Flex Gumbo
8. Fondu (Fading) entre deux images en utilisant l'effet CrossFade de Flash Builder 4
9. Afficher des Images dans un composant Spark List
10. Tutorial : Utilisation des States et ItemRenderer dans un Composant List de Flash builder 4 / Flex Gumbo