Ajouter

Afficher des Images dans un composant Spark List

Il y a différentes possibilités pour afficher des images dans un composant Spark List dans Flash Builder 4 / Flex 4 Gumbo :

Mise en avant : s:BitmapImage – SparkSkin

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

1. Utilisation simple du composant Spark List

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/21/afficher-des-images-dans-un-composant-spark-list/ -->
<s:Application name="Spark_List_itemRenderer_DefaultComplexItemRenderer_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" viewSourceURL="srcview/index.html">
 
    <s:List id="list"
            itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout requestedColumnCount="3" gap="0" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/cf_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/ps_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

Rendu (nécessite Flash Player 10) :

Télécharger la source de l'exemple

2. Déclaration d'une propriété itemRenderer en utilisant du MXML dans un composant Spark List

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/21/afficher-des-images-dans-un-composant-spark-list/ -->
<s:Application name="Spark_List_itemRenderer_DefaultComplexItemRenderer_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"
        xmlns:skins="spark.skins.spark.*" viewSourceURL="srcview/index.html">
 
    <s:List id="list"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout requestedColumnCount="3" gap="0" />
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <skins:DefaultComplexItemRenderer />
            </fx:Component>
        </s:itemRenderer>
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/cf_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/ps_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

Rendu (nécessite Flash Player 10) :

Télécharger la source de l'exemple

3. Définition des propriétés layout et itemRenderer dans un skin customisé pour le composant Spark List

Code de l'application :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/21/afficher-des-images-dans-un-composant-spark-list/ -->
<s:Application name="Spark_List_itemRenderer_DefaultComplexItemRenderer_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" viewSourceURL="srcview/index.html">
 
    <s:List id="list"
            skinClass="skins.CustomListSkin"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/cf_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/ps_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

Code de la classe personnalisée (skin class), skins/CustomListSkin.mxml :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/21/afficher-des-images-dans-un-composant-spark-list/ -->
<s:SparkSkin name="CustomListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="112" minHeight="112"
        alpha.disabled="0.5"
        blendMode="normal">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.List")]
    </fx:Metadata>
 
    <fx:Script>
        <![CDATA[
            /* Défini le skin de l'élément qui ne doit pas être colorié
               Pour la liste (List), le skin est lui même colorié mais pas les parties indivivuelles */
            static private const exclusions:Array = ["scroller", "background"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Défini le remplissage du contenu de l'item qui doit être colorié par le style "contentBackgroundColor" */
            static private const contentFill:Array = ["bgFill"];
 
            override public function get contentItems():Array {
                return contentFill
            };
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    scroller.minViewportInset = 1;
                } else {
                    border.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    scroller.minViewportInset = 0;
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="{getStyle('borderColor')}"
                                alpha="{getStyle('borderAlpha')}"
                                weight="1"/>
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Défini l'apparence du fond du composant de la base du composant Spark List. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
        <s:fill>
            <!--- Défini la couleur du BackGround. La couleur par défaut est le blanc : 0xffffff. -->
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
 
    <!--- Le composant Scroller pour ajouter un scroll au composant Spark List. -->
    <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" focusEnabled="false">
        <!--- Le Container pour les items des données. -->
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">
            <s:layout>
                <s:HorizontalLayout requestedColumnCount="3" gap="0" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
 
</s:SparkSkin>

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. Afficher du texte HTML formaté dans un composant Spark RichText dans Flash Builder 4 / Flex Gumbo
3. Gestion du lissage (smoothing) sur l'image de fond (BackGround) d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo
4. Afficher des images dans un composant Spark List en utilisant un item renderer (itemRenderer) personnalisé dans Flash Builder 4 / Flex Gumbo
5. Fondu (Fading) entre deux images en utilisant l'effet CrossFade de Flash Builder 4
6. Activation de la Tabulation dans un composant Spark Scroller
7. Effet d'AutoScrolling sur un composant Spark TextArea
8. Définir le BackGroundResize d'un composant Spark Border dans Flex 4
9. Tutorial : Utilisation des States et ItemRenderer dans un Composant List de Flash builder 4 / Flex Gumbo
10. Définir le « Corner Radius » d'un composant « Border » Spark