Ajouter

Définir le BackGroundResize d'un composant Spark Border dans Flex 4

L'exemple suivant montre la méthode de paramètrage du redimensionnement du BackGround dans un composant Spark Border de Flash Builder 4 .

Propriété Css mise en avant : backgroundImageResizeMode

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

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/12/background-resize-border-spark-flex-4 -->
<s:Application name="Spark_Border_backgroundImageResizeMode_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>
        <mx:Form paddingTop="0" paddingBottom="0">
            <mx:FormItem label="backgroundImageResizeMode:">
                <s:DropDownList id="dropDownList" requireSelection="true">
                    <s:dataProvider>
                        <s:ArrayList source="[scale,noScale,repeat]" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
            <mx:FormItem label="cornerRadius:">
                <s:HSlider id="slider" minimum="0" maximum="50" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Border id="brdr"
            backgroundImage="@Embed('assets/pattern.png')"
            backgroundImageResizeMode="{dropDownList.selectedItem}"
            cornerRadius="{slider.value}"
            left="40" right="40" top="40" bottom="40">
        <s:Label id="sdkVer"
                fontSize="40" color="0xffffff"
                initialize="sdkVer.text = mx_internal::VERSION;"
                horizontalCenter="0" verticalCenter="0" />
    </s:Border>
 
</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. Définir le padding d'un composant Spark NavigatorContent dans Flash Builder 4 / Flex Gumbo
2. Définir le background color d'un composant Spark Application Control Bar dans Flash Builder 4 / Flex Gumbo
3. Gestion de la visibilité de la bordure d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo
4. Gestion du lissage (smoothing) sur l'image de fond (BackGround) d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo
5. Définir les fins de tabulation (Tab Stops) dans un composant Spark TextArea dans Flash Builder 4 / Flex Gumbo
6. Créer un linear gradient backGround dans un composant Spark Border dans Flash Builder 4
7. Définir un Style sur une Tooltip à partir d'un Composant Spark – Flex 4
8. Configurer la couleur de la bordure d'un Container Spark Border
9. Définir le « Corner Radius » d'un composant « Border » Spark
10. Définir un « Focus Alpha » sur un TextArea Spark