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

Dans un exemple précédent, « Définir la couleur d’arrière-plan d’un contrôle Spark Image dans Flex 4″, nous avons vu comment 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 montre comment vous pouvez définir la couleur d’arrière-plan d’un contrôle Spark Image invalide en définissant le style backgroundColor dans l’état invalid de la skin.

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-an-invalid-spark-image-control-in-flex-hero/ -->
<s:Application name="Spark_Image_invalid_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';"
                        chromeColor="haloGreen" />
                <s:Button label="logo"
                        click="img.source = 'http://helpexamples.com/flash/images/logo.png';"
                        chromeColor="haloGreen" />
                <s:Button label="(404)"
                        click="img.source = 'http://helpexamples.com/flash/images/404.gif';"
                        chromeColor="red" />
                <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:ready {
            backgroundColor: haloGreen;
        }
        s|Image:invalid {
            backgroundColor: red;
        }
    </fx:Style>

    <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 an invalid Spark Image control in Flex Hero