Ajouter

Définir l'épaisseur du bord (border weight) d'un Spark Border container dans Flash Builder 4 / Flex Gumbo

L'exemple suivant va vous montrer comment définir l'épaisseur du bord (border weight) d'un composant Spark Border de Flash Builder 4 Beta / Flex 4 Gumbo de différentes manières :

• Définition de la propriété borderWeight directement dans le composant Border
• Définition de la propriété borderWeight dans un fichier de Style CSS externe ou dans un container CSS <fx:Style/>
• Définition de la propriété de Style CSS directement en ActionScript
• borderWeight dans un custom border stroke object

Mise en avant : borderWeight

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

1. Définition de la propriété borderWeight directement dans le composant Border

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/28/definir-border-weight-spark-border-container-dans-flash-builder-4-flex-gumbo/ -->
<s:Application name="Spark_Border_borderWeight_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>
        <mx:Form>
            <mx:FormItem label="borderWeight :">
                <s:HSlider id="slider" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Border id="brdr"
              borderWeight="{slider.value}"
              horizontalCenter="0" verticalCenter="0"
              width="90%" height="90%">
        <s:RichText fontSize="72" width="100%" height="100%">
            <s:p>Flash Builder Tutorial</s:p>
        </s:RichText>
    </s:Border>
 
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

2. Définition de la propriété borderWeight dans un fichier de Style CSS externe ou dans un container CSS <fx:Style/>

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/28/definir-border-weight-spark-border-container-dans-flash-builder-4-flex-gumbo/ -->
<s:Application name="Spark_Border_borderWeight_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 {
            borderWeight: 10;
        }
    </fx:Style>
 
    <s:Border id="brdr"
              horizontalCenter="0" verticalCenter="0"
              width="90%" height="90%">
        <s:RichText fontSize="72" width="100%" height="100%">
            <s:p>Flash Builder Tutorial</s:p>
        </s:RichText>
    </s:Border>
 
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

3. Définition de la propriété directement en ActionScript 3 (AS3)

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/28/definir-border-weight-spark-border-container-dans-flash-builder-4-flex-gumbo/ -->
<s:Application name="Spark_Border_borderWeight_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>
            <mx:FormItem label="borderWeight:">
                <s:HSlider id="slider"
                           change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function slider_change(evt:Event):void {
                brdr.setStyle("borderWeight", slider.value);
            }
        ]]>
    </fx:Script>
 
    <s:Border id="brdr"
              horizontalCenter="0" verticalCenter="0"
              width="90%" height="90%">
        <s:RichText fontSize="72" width="100%" height="100%">
             <s:p>Flash Builder Tutorial</s:p>
        </s:RichText>
    </s:Border>
 
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

4. borderWeight dans un custom border stroke object

Si vous utilisez un custom border stroke object (par exemple, si vous définissez la propriété borderStroke et utilisez un objet customisé SolidColorStrole, LinearGradientStroke ou RadialGradientStroke) vous allez devoir définir la propriété d'épaisseur (weight property) sur le « stroke » au lieu de définir le borderWeight sur le composant Spark Border, comme dans l'exemple ci-dessous :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/28/definir-border-weight-spark-border-container-dans-flash-builder-4-flex-gumbo/ -->
<s:Application name="Spark_Border_borderWeight_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:Border id="brdr"
              horizontalCenter="0" verticalCenter="0"
              width="90%" height="90%">
        <s:borderStroke>
            <s:LinearGradientStroke weight="10">
                <s:GradientEntry color="red" />
                <s:GradientEntry color="white" />
                <s:GradientEntry color="blue" />
            </s:LinearGradientStroke>
        </s:borderStroke>
        <s:RichText fontSize="72" width="100%" height="100%">
             <s:p>Flash Builder Tutorial</s:p>
        </s:RichText>
    </s:Border>
 
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple