Définir la couleur d’arrière-plan d’un contrôle Spark Image dans Flex 4

L’exemple suivant montre comment vous pouvez définir la couleur d’arrière plan d’un contrôle Spark Image dans Flex 4 en définissant le style backgroundColor.

L’exemple suivant requiert Flash Player 10 et le SDK Adobe Flex 4. Vous pouvez télécharger la version d’évaluation d’Adobe Flash Builder 4 à l’adresse http://www.adobe.com/products/flex/. Pour télécharger la dernière version du SDK Flex 4, regardez http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex +4.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/25/setting-the-background-color-on-a-spark-image-control-in-flex-hero/ -->
<s:Application name="Spark_Image_backgroundColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Form>
            <s:FormItem label="backgroundColor:">
                <mx:ColorPicker id="cp" selectedColor="black" />
            </s:FormItem>
            <s:FormItem label="source:">
                <s:layout>
                    <s:HorizontalLayout />
                </s:layout>
                <s:Button label="image1.jpg" click="img.source = 'http://helpexamples.com/flash/images/image1.jpg';" />
                <s:Button label="logo" click="img.source = 'http://helpexamples.com/flash/images/logo.png';" />
                <s:Button label="(404)" click="img.source = 'http://helpexamples.com/flash/images/404.gif';" />
                <s:Button label="(null)" click="img.source = null;" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>

    <s:Image id="img"
             backgroundColor="{cp.selectedColor}"
             width="200" height="200"
             horizontalCenter="0" verticalCenter="0" />

</s:Application>

Vous pouvez aussi définir le style backgroundColor dans une feuille de styles externe, .CSS, ou dans un bloc Style, comme le montre l’exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/25/setting-the-background-color-on-a-spark-image-control-in-flex-hero/ -->
<s:Application name="Spark_Image_backgroundColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Form>
            <s:FormItem label="source:">
                <s:layout>
                    <s:HorizontalLayout />
                </s:layout>
                <s:Button label="image1.jpg" click="img.source = 'http://helpexamples.com/flash/images/image1.jpg';" />
                <s:Button label="logo" click="img.source = 'http://helpexamples.com/flash/images/logo.png';" />
                <s:Button label="(404)" click="img.source = 'http://helpexamples.com/flash/images/404.gif';" />
                <s:Button label="(null)" click="img.source = null;" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        s|Image {
            background-color: haloSilver;
        }
    </fx:Style>

    <s:Image id="img"
             width="200" height="200"
             horizontalCenter="0" verticalCenter="0" />

</s:Application>

Ou vous pouvez aussi définir le style backgroundColor en ActionScript, comme le montre l’exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/25/setting-the-background-color-on-a-spark-image-control-in-flex-hero/ -->
<s:Application name="Spark_Image_backgroundColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Form>
            <s:FormItem label="backgroundColor:">
                <mx:ColorPicker id="cp" selectedColor="black" change="cp_changeHandler(event);" />
            </s:FormItem>
            <s:FormItem label="source:">
                <s:layout>
                    <s:HorizontalLayout />
                </s:layout>
                <s:Button label="image1.jpg" click="img.source = 'http://helpexamples.com/flash/images/image1.jpg';" />
                <s:Button label="logo" click="img.source = 'http://helpexamples.com/flash/images/logo.png';" />
                <s:Button label="(404)" click="img.source = 'http://helpexamples.com/flash/images/404.gif';" />
                <s:Button label="(null)" click="img.source = null;" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>

    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            protected function cp_changeHandler(evt:ColorPickerEvent):void {
                img.setStyle("backgroundColor", evt.color);
            }
        ]]>
    </fx:Script>

    <s:Image id="img"
             width="200" height="200"
             horizontalCenter="0" verticalCenter="0" />

</s:Application>

L’exemple en action

Traduction de l’article de Peter DeHaan:

Setting the background color on a Spark Image control in Flex Hero