Ajouter

Gestion de la visibilité de la bordure d'un composant Spark Border dans Flash Builder 4 / Flex Gumbo

L'exemple suivant va vous montrer comment gérer la visibilité du bord (Border) d'un composant Spark Border dans Flash Builder 4 Beta / Flex 4 Gumbo de trois manières différentes  :

• Définition de la propriété borderVisible directement dans le composant (component) Spark Border
• Définition de la propriété borderVisible via un fichier .CSS externe ou dans un container fx:Style
• Définition de la propriété borderVisible via ActionScript 3 (AS3)

Mise en avant : borderVisible

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

1. Définition de la propriété borderVisible directement dans le composant (component) Spark Border

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/01/gestion-de-la-visibilite-de-la-bordure-dun-composant-spark-border-dans-flash-builder-4-flex-gumbo/ -->
<s:Application name="Spark_Border_borderVisible_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:controlBarContent>
        <s:CheckBox id="chckBx" label="borderVisible" selected="true" />
    </s:controlBarContent>
 
    <s:Border id="brdr"
              borderVisible="{chckBx.selected}"
              backgroundAlpha="0.1"
              backgroundColor="black"
              cornerRadius="25"
              width="90%" height="90%"
              horizontalCenter="0" verticalCenter="0">
    </s:Border>
 
</s:Application>

2. Définition de la propriété borderVisible via un fichier .CSS externe ou dans un container fx:Style

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/01/gestion-de-la-visibilite-de-la-bordure-dun-composant-spark-border-dans-flash-builder-4-flex-gumbo/ -->
<s:Application name="Spark_Border_borderVisible_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|Border {
            borderVisible: false;
            backgroundAlpha: 0.1;
            backgroundColor: black;
            cornerRadius: 25;
        }
    </fx:Style>
 
    <s:Border id="brdr"
            width="90%" height="90%"
            horizontalCenter="0" verticalCenter="0">
    </s:Border>
 
</s:Application>

3. Définition de la propriété borderVisible via ActionScript 3 (AS3)

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/10/01/gestion-de-la-visibilite-de-la-bordure-dun-composant-spark-border-dans-flash-builder-4-flex-gumbo/ -->
<s:Application name="Spark_Border_borderVisible_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>
        <s:CheckBox id="chckBx"
                label="borderVisible"
                selected="true"
                change="chckBx_change(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function chckBx_change(evt:Event):void {
                brdr.setStyle("borderVisible", chckBx.selected);
            }
        ]]>
    </fx:Script>
 
    <s:Border id="brdr"
            backgroundAlpha="0.1"
            backgroundColor="black"
            cornerRadius="25"
            width="90%" height="90%"
            horizontalCenter="0" verticalCenter="0">
    </s:Border>
 
</s:Application>

Rendu de l'exemple (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. Hauteurs variables de ligne (variable row heights) dans un composant Spark VGroup de 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. 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éfinir le BackGroundResize d'un composant Spark Border dans 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. Gestion du « drop shadow » sur un Panel Spark – Flash Builder 4