Ajouter

Définir le background color d'un composant Spark Application Control Bar dans Flash Builder 4 / Flex Gumbo

Cet exemple vous montre comment définir la couleur du composant Spark ControlBarContent dans une application Flex Gumbo / Flash Builder 4 Beta de différentes manières :

• Utilisation d'un style skinClass et modification du control bar fill
• Définition du style dans un fichier CSS externe ou dans un conteneur s:Style
• Définition du style skinClass via ActionScript

Mise en avant : Application – skinClass

Attention, vous devez utiliser une version de SDK équivalente ou supérieur à la version 4.0.0.10608

Utilisation d'un style skinClass et modification du control bar fill

Code de l'application : 

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/04/definir-le-background-color-spark-application-control-bar/ -->
<s:Application name="Spark_Application_skinClass_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"
        skinClass="skins.CustomApplicationSkin"
        backgroundColor="black">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
    <s:controlBarContent>
        <s:Button label="Button" />
        <s:CheckBox label="CheckBox" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
    </s:controlBarContent>
 
    <fx:Style>
        #topGroup {
            color: white;
        }
    </fx:Style>
 
    <mx:ColorPicker />
    <mx:DateChooser />
 
</s:Application>

Code de la skinClass skins/CustomApplicationSkin.mxml :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/04/definir-le-background-color-spark-application-control-bar/ -->
<s:Skin name="CustomApplicationSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5" >
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
    </s:states>
 
    <fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.Application")]
    ]]>
    </fx:Metadata> 
 
    <!-- fill -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
        <s:fill>
            <s:SolidColor color="{getStyle('backgroundColor')}" />
        </s:fill>
    </s:Rect>
 
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
 
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                    includeIn="normalWithControlBar, disabledWithControlBar" >
            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
               <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="white" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
               </s:stroke>
            </s:Rect>
 
            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2">
               <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0x333333" />
                        <s:GradientEntry color="0x666666" />
                    </s:LinearGradient>
               </s:fill>
            </s:Rect>
 
            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 3: control bar -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>
 
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
    </s:Group>
 
</s:Skin>

Définition du style dans un fichier CSS externe ou dans un conteneur s:Style

Code de l'application :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/04/definir-le-background-color-spark-application-control-bar/ -->
<s:Application name="Spark_Application_skinClass_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"
        backgroundColor="black">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
    <s:controlBarContent>
        <s:Button label="Button" />
        <s:CheckBox label="CheckBox" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Application {
            skinClass: ClassReference("skins.CustomApplicationSkin");
        }
 
        #topGroup {
            color: white;
        }
    </fx:Style>
 
    <mx:ColorPicker />
    <mx:DateChooser />
 
</s:Application>

Définition du style skinClass via actionscript

Code de l'application : 

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/04/definir-le-background-color-spark-application-control-bar/ -->
<s:Application name="Spark_Application_skinClass_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"
        backgroundColor="black" viewSourceURL="srcview/index.html">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
    <s:controlBarContent>
        <s:Button label="Set skinClass" click="button1_click(event);" />
        <s:CheckBox label="CheckBox" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.CustomApplicationSkin;
            import mx.core.FlexGlobals;
 
            protected function button1_click(evt:MouseEvent):void {
                FlexGlobals.topLevelApplication.setStyle("skinClass", CustomApplicationSkin);
            }
        ]]>
    </fx:Script>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        #topGroup {
            color: white;
        }
    </fx:Style>
 
    <mx:ColorPicker />
    <mx:DateChooser />
 
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger les sources de l'exemple

Source originale : Flex Example (en)

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. Gestion du lissage (smoothing) sur l'image de fond (BackGround) d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo
3. Afficher des images dans un composant Spark List en utilisant un item renderer (itemRenderer) personnalisé dans Flash Builder 4 / Flex Gumbo
4. Définir les fins de tabulation (Tab Stops) dans un composant Spark TextArea dans Flash Builder 4 / Flex Gumbo
5. Activer/Désactiver le click sur la zone transparente d'un composant Spark Graphic de Flash Builder 4 – Flex Gumbo
6. Créer un linear gradient backGround dans un composant Spark Border dans Flash Builder 4
7. Désactiver une application dans Flash Builder 4 Beta
8. Définir le BackGroundResize d'un composant Spark Border dans Flex 4
9. Configurer la barre de contrôle d'une Application Spark
10. Définir le « Corner Radius » d'un composant « Border » Spark