Les bases de l'ActionScript 3 » Flex http://www.bases-as3.fr Appréhender facilement la programmation en ActionScript 3. Thu, 28 Jul 2011 11:38:00 +0000 fr hourly 1 http://wordpress.org/?v=3.2.1 Définir la couleur d’arrière-plan d’un contrôle Spark Image invalide dans Flex 4 http://www.bases-as3.fr/flex-couleur-arriere-plan-spark-image http://www.bases-as3.fr/flex-couleur-arriere-plan-spark-image#comments Mon, 11 Jul 2011 17:00:18 +0000 tannoy http://www.bases-as3.fr/?p=404 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

]]> http://www.bases-as3.fr/flex-couleur-arriere-plan-spark-image/feed 0 Définir la couleur d’arrière-plan d’un contrôle Spark Image dans Flex 4 http://www.bases-as3.fr/flex-couleur-arriere-plan-image http://www.bases-as3.fr/flex-couleur-arriere-plan-image#comments Fri, 08 Jul 2011 17:00:31 +0000 tannoy http://www.bases-as3.fr/?p=397 L’exemple suivant montre comment vous pouvez 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 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-a-spark-image-control-in-flex-hero/ -->
<s:Application name="Spark_Image_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="backgroundColor:">
                <mx:ColorPicker id="cp" selectedColor="black" />
            </s:FormItem>
            <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';" />
                <s:Button label="logo" click="img.source = 'http://helpexamples.com/flash/images/logo.png';" />
                <s:Button label="(404)" click="img.source = 'http://helpexamples.com/flash/images/404.gif';" />
                <s:Button label="(null)" click="img.source = null;" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>

    <s:Image id="img"
             backgroundColor="{cp.selectedColor}"
             width="200" height="200"
             horizontalCenter="0" verticalCenter="0" />

</s:Application>

Vous pouvez aussi définir le style backgroundColor dans une feuille de styles externe, .CSS, ou dans un bloc Style, comme le montre l’exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/25/setting-the-background-color-on-a-spark-image-control-in-flex-hero/ -->
<s:Application name="Spark_Image_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';" />
                <s:Button label="logo" click="img.source = 'http://helpexamples.com/flash/images/logo.png';" />
                <s:Button label="(404)" click="img.source = 'http://helpexamples.com/flash/images/404.gif';" />
                <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 {
            background-color: haloSilver;
        }
    </fx:Style>

    <s:Image id="img"
             width="200" height="200"
             horizontalCenter="0" verticalCenter="0" />

</s:Application>

Ou vous pouvez aussi définir le style backgroundColor en ActionScript, comme le montre l’exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/25/setting-the-background-color-on-a-spark-image-control-in-flex-hero/ -->
<s:Application name="Spark_Image_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="backgroundColor:">
                <mx:ColorPicker id="cp" selectedColor="black" change="cp_changeHandler(event);" />
            </s:FormItem>
            <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';" />
                <s:Button label="logo" click="img.source = 'http://helpexamples.com/flash/images/logo.png';" />
                <s:Button label="(404)" click="img.source = 'http://helpexamples.com/flash/images/404.gif';" />
                <s:Button label="(null)" click="img.source = null;" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>

    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            protected function cp_changeHandler(evt:ColorPickerEvent):void {
                img.setStyle("backgroundColor", evt.color);
            }
        ]]>
    </fx:Script>

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

]]> http://www.bases-as3.fr/flex-couleur-arriere-plan-image/feed 1 Créer une skin personnalisée sur le contrôle Spark TabBar dans Flex 4 http://www.bases-as3.fr/flex-skin-tabbar http://www.bases-as3.fr/flex-skin-tabbar#comments Thu, 07 Jul 2011 20:22:04 +0000 tannoy http://www.bases-as3.fr/?p=388 L’exemple suivant montre comment vous pouvez créer une skin, basée sur le contrôle RadioButton, sur le contrôle Spark TabBar dans Flex 4 en définissant le style skinClass.

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/10/creating-a-custom-skin-on-the-spark-tabbar-control-in-flex-4/ -->
<s:Application name="Spark_TabBar_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/mx">

    <s:VGroup horizontalAlign="center"
            horizontalCenter="0" verticalCenter="0">
        <mx:ViewStack id="vs" width="300" height="100">
            <s:NavigatorContent label="One"
                    backgroundColor="red"
                    width="100%" height="100%" />
            <s:NavigatorContent label="Two"
                    backgroundColor="haloOrange"
                    width="100%" height="100%" />
            <s:NavigatorContent label="Three"
                    backgroundColor="Yellow"
                    width="100%" height="100%" />
            <s:NavigatorContent label="Four"
                    backgroundColor="haloGreen"
                    width="100%" height="100%" />
            <s:NavigatorContent label="Five"
                    backgroundColor="haloBlue"
                    width="100%" height="100%" />
        </mx:ViewStack>
        <s:TabBar dataProvider="{vs}" skinClass="skins.CustomSparkTabBarSkin" />
    </s:VGroup>

</s:Application>

et la classe de skin personnalisée du contrôle TabBar, skins/CustomSparkTabBarSkin.mxml, se présente comme suit:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/10/creating-a-custom-skin-on-the-spark-tabbar-control-in-flex-4/ -->
<spark:TabBarSkin name="CustomSparkTabBarSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:spark="spark.skins.spark.*">

    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:RadioButton />
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>

</spark:TabBarSkin>

L’exemple en action

Traduction de l’article de Peter DeHaan:

Creating a custom skin on the Spark TabBar control in Flex 4

]]> http://www.bases-as3.fr/flex-skin-tabbar/feed 0 Créer un fournisseur de données complexe utilisant des objets dans Flex 4 http://www.bases-as3.fr/fournisseur-donnees-objets-flex-4 http://www.bases-as3.fr/fournisseur-donnees-objets-flex-4#comments Sun, 13 Mar 2011 14:19:07 +0000 tannoy http://www.bases-as3.fr/?p=373 L’exemple suivant montre comment vous pouvez créer, en MXML, un fournisseur de données complexe pour un contrôle MX DataGrid avec des objets imbriqués en utilisant la balise <fx:Object>.

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/20/creating-complex-data-provider-objects-in-mxml-using-flex-4/ -->
<s:Application name="MX_DataGrid_dataProvider_Object_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">

	<mx:DataGrid id="dg" horizontalCenter="0" verticalCenter="0">
		<mx:columns>
			<mx:DataGridColumn dataField="firstName" />
			<mx:DataGridColumn dataField="lastName" />
			<mx:DataGridColumn dataField="address.town" />
			<mx:DataGridColumn dataField="address.state" />
			<mx:DataGridColumn dataField="address.zipCode" />
		</mx:columns>
		<mx:dataProvider>
			<mx:ArrayCollection>
				<fx:Object firstName="Carol" lastName="F.">
					<fx:address>
						<fx:Object town="Waltham" state="MA" zipCode="02452" />
					</fx:address>
				</fx:Object>
				<fx:Object firstName="Darrell" lastName="L.">
					<fx:address>
						<fx:Object town="Waltham" state="MA" zipCode="02452" />
					</fx:address>
				</fx:Object>
				<fx:Object firstName="Hans" lastName="M.">
					<fx:address>
						<fx:Object town="San Francisco" state="CA" zipCode="94103" />
					</fx:address>
				</fx:Object>
				<fx:Object firstName="Kevin" lastName="L.">
					<fx:address>
						<fx:Object town="San Francisco" state="CA" zipCode="94103" />
					</fx:address>
				</fx:Object>
			</mx:ArrayCollection>
		</mx:dataProvider>
	</mx:DataGrid>

</s:Application>

Ou vous pouvez aussi créer les objets imbriqués en utilisant ActionScript , comme vous pouvez le voir dans l’exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/20/creating-complex-data-provider-objects-in-mxml-using-flex-4/ -->
<s:Application name="MX_DataGrid_dataProvider_Object_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"
			   initialize="init();">

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.DataGrid;
			import mx.controls.dataGridClasses.DataGridColumn;

			protected var dg:DataGrid;

			protected function init():void {
				var cols:Array = [];
				cols.push(new DataGridColumn("firstName"));
				cols.push(new DataGridColumn("lastName"));
				cols.push(new DataGridColumn("address.town"));
				cols.push(new DataGridColumn("address.state"));
				cols.push(new DataGridColumn("address.zipCode"));

				var arr:Array = [];
				arr.push({firstName:"Carol", lastName:"F.", address:{town:"Waltham", state:"MA", zipCode:"02452"}});
				arr.push({firstName:"Darrell", lastName:"L.", address:{town:"Waltham", state:"MA", zipCode:"02452"}});
				arr.push({firstName:"Hans", lastName:"M.", address:{town:"San Francisco", state:"CA", zipCode:"94103"}});
				arr.push({firstName:"Kevin", lastName:"L.", address:{town:"San Francisco", state:"CA", zipCode:"94103"}});

				dg = new DataGrid();
				dg.columns = cols;
				dg.dataProvider = new ArrayCollection(arr);;
				dg.horizontalCenter = dg.verticalCenter = 0;
				addElement(dg);
			}
		]]>
	</fx:Script>

</s:Application>

Vous pouvez aussi définir l’objet imbriqué en ligne dans le MXML en utilisant 2 caractères « { » au lieu d’1, comme vous pouvez le voir dans l’exemple suivant (ou le premier « { » correspond à la liaison de données et le second « { » correspond à la forme raccourcie de l’objet)

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/20/creating-complex-data-provider-objects-in-mxml-using-flex-4/ -->
<s:Application name="MX_DataGrid_dataProvider_Object_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">

	<mx:DataGrid id="dg" horizontalCenter="0" verticalCenter="0">
		<mx:columns>
			<mx:DataGridColumn dataField="firstName" />
			<mx:DataGridColumn dataField="lastName" />
			<mx:DataGridColumn dataField="address.town" />
			<mx:DataGridColumn dataField="address.state" />
			<mx:DataGridColumn dataField="address.zipCode" />
		</mx:columns>
		<mx:dataProvider>
			<mx:ArrayCollection>
				<fx:Object firstName="Carol" lastName="F." address="{{town:'Waltham', state:'MA', zipCode:'02452'}}" />
				<fx:Object firstName="Darrell" lastName="L." address="{{town:'Waltham', state:'MA', zipCode:'02452'}}" />
				<fx:Object firstName="Hans" lastName="M." address="{{town:'San Francisco', state:'CA', zipCode:'94103'}}" />
				<fx:Object firstName="Kevin" lastName="L." address="{{town:'San Francisco', state:'CA', zipCode:'94103'}}" />
			</mx:ArrayCollection>
		</mx:dataProvider>
	</mx:DataGrid>

</s:Application>

L’exemple en action

Traduction de l’article de Peter DeHaan:

Creating complex data provider objects in MXML using Flex 4

]]> http://www.bases-as3.fr/fournisseur-donnees-objets-flex-4/feed 0 Définir un format riche pour le texte d’un contrôle Spark Button en Flex 4 http://www.bases-as3.fr/format-riche-texte-bouton-flex-4 http://www.bases-as3.fr/format-riche-texte-bouton-flex-4#comments Thu, 10 Feb 2011 21:06:20 +0000 tannoy http://www.bases-as3.fr/?p=353 L'exemple suivant montre comment vous pouvez définir un format riche pour le texte d'un contrôle Spark Button en surclassant le contrôle Spark Button et en créant une skin de bouton personnalisée qui utilise un contrôle RichText en tant que partie d'affichage du texte dans 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.

COPIER-COLLER


XML:





    

  1. 

    <?xml version="1.0" encoding="utf-8"?>
    

    2. 

  2. 

    <!-- http://blog.flexexamples.com/2010/10/22/setting-a-rich-text-label-on-a-spark-button-control-in-flex-4/ -->
    

    3. 

  3. 

    <s:application name="Spark_Button_textFlow_test"
    

    4. 

  4. 

                   xmlns:fx="http://ns.adobe.com/mxml/2009"
    

    5. 

  5. 

                   xmlns:s="library://ns.adobe.com/flex/spark"
    

    6. 

  6. 

                   xmlns:mx="library://ns.adobe.com/flex/mx"
    

    7. 

  7. 

                   xmlns:comps="comps.*"
    

    8. 

  8. 

                   width="200"
    

    9. 

  9. 

                   height="200">
    

    10. 

  10. 

        
    

    11. 

  11. 

        <fx:style>
    

    12. 

  12. 

            @namespace comps "comps.*";
    

    13. 

  13. 

            
    

    14. 

  14. 

            comps|RichButton {
    

    15. 

  15. 

                skinClass: ClassReference("skins.RichButtonSkin");
    

    16. 

  16. 

            }
    

    17. 

  17. 

        </fx:style>
    

    18. 

  18. 

        
    

    19. 

  19. 

        <comps:richbutton horizontalCenter="0" verticalCenter="0">
    

    20. 

  20. 

            <comps:textflow>
    

    21. 

  21. 

                <s:textflow>
    

    22. 

  22. 

                    <s:p fontStyle="italic">The quick<s:br />brown fox <s:span fontWeight="bold">jumps<s:br />over the</s:span> lazy <s:span color="#FF0000" fontStyle="normal">dog</s:span>.</s:p>
    

    23. 

  23. 

                    <s:p>And then some more stuff.</s:p>
    

    24. 

  24. 

                </s:textflow>
    

    25. 

  25. 

            </comps:textflow>
    

    26. 

  26. 

        </comps:richbutton>
    

    27. 

  27. 

        
    

    28. 

  28. 

    </s:application> 
    

    29.

Le contrôle personnalisé Spark Button, comps/RichButton.as, se présente comme suit:

COPIER-COLLER


Actionscript:





    

  1. 

    /** http://blog.flexexamples.com/2010/10/22/setting-a-rich-text-label-on-a-spark-button-control-in-flex-4/ */
    

    2. 

  2. 

    package comps {
    

    3. 

  3. 

        import flashx.textLayout.elements.TextFlow;
    

    4. 

  4. 

        import spark.components.Button;
    

    5. 

  5. 

        
    

    6. 

  6. 

        public class RichButton extends Button {
    

    7. 

  7. 

            public function RichButton() {
    

    8. 

  8. 

                super();
    

    9. 

  9. 

            }
    

    10. 

  10. 

            
    

    11. 

  11. 

            [Bindable]
    

    12. 

  12. 

            public var textFlow:TextFlow;
    

    13. 

  13. 

        }
    

    14. 

  14. 

    } 
    

    15.

Et la skin personnalisée du contrôle RichButton, skins/RichButtonSkin.mxml, se présente comme suit:

COPIER-COLLER


XML:





    

  1. 

    <?xml version="1.0" encoding="utf-8"?>
    

    2. 

  2. 

    <!-- http://blog.flexexamples.com/2010/10/22/setting-a-rich-text-label-on-a-spark-button-control-in-flex-4/ -->
    

    3. 

  3. 

    <s:sparkskin name="RichButtonSkin"
    

    4. 

  4. 

                 xmlns:fx="http://ns.adobe.com/mxml/2009"
    

    5. 

  5. 

                 xmlns:s="library://ns.adobe.com/flex/spark"
    

    6. 

  6. 

                 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    

    7. 

  7. 

                 minWidth="21" minHeight="21"
    

    8. 

  8. 

                 alpha.disabled="0.5">
    

    9. 

  9. 

        <!-- states -->
    

    10. 

  10. 

        <s:states>
    

    11. 

  11. 

            <s:state name="up" />
    

    12. 

  12. 

            <s:state name="over" />
    

    13. 

  13. 

            <s:state name="down" />
    

    14. 

  14. 

            <s:state name="disabled" />
    

    15. 

  15. 

        </s:states>
    

    16. 

  16. 

        
    

    17. 

  17. 

        <fx:metadata>
    

    18. 

  18. 

            [HostComponent("comps.RichButton")]
    

    19. 

  19. 

        </fx:metadata>
    

    20. 

  20. 

        
    

    21. 

  21. 

        <fx:script fb:purpose="styling">
    

    22. 

  22. 

            <![CDATA[
    

    23. 

  23. 

                import spark.components.Group;
    

    24. 

  24. 

                
    

    25. 

  25. 

                /* Define the skin elements that should not be colorized.
    

    26. 

  26. 

                For button, the graphics are colorized but the label is not. */
    

    27. 

  27. 

                static private const exclusions:Array = ["labelDisplay"];
    

    28. 

  28. 

                
    

    29. 

  29. 

                override public function get colorizeExclusions():Array {
    

    30. 

  30. 

                    return exclusions;
    

    31. 

  31. 

                }
    

    32. 

  32. 

                
    

    33. 

  33. 

                override protected function initializationComplete():void {
    

    34. 

  34. 

                    useChromeColor = true;
    

    35. 

  35. 

                    super.initializationComplete();
    

    36. 

  36. 

                }
    

    37. 

  37. 

                
    

    38. 

  38. 

                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
    

    39. 

  39. 

                    var cr:Number = getStyle("cornerRadius");
    

    40. 

  40. 

                    
    

    41. 

  41. 

                    if (cornerRadius != cr) {
    

    42. 

  42. 

                        cornerRadius = cr;
    

    43. 

  43. 

                        shadow.radiusX = cornerRadius;
    

    44. 

  44. 

                        fill.radiusX = cornerRadius;
    

    45. 

  45. 

                        lowlight.radiusX = cornerRadius;
    

    46. 

  46. 

                        highlight.radiusX = cornerRadius;
    

    47. 

  47. 

                        border.radiusX = cornerRadius;
    

    48. 

  48. 

                    }
    

    49. 

  49. 

                    
    

    50. 

  50. 

                    if (highlightStroke) highlightStroke.radiusX = cornerRadius;
    

    51. 

  51. 

                    if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
    

    52. 

  52. 

                    if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
    

    53. 

  53. 

                    
    

    54. 

  54. 

                    super.updateDisplayList(unscaledWidth, unscaledHeight);
    

    55. 

  55. 

                }
    

    56. 

  56. 

                
    

    57. 

  57. 

                private var cornerRadius:Number = 2;
    

    58. 

  58. 

                
    

    59. 

  59. 

            ]]>
    

    60. 

  60. 

        </fx:script>
    

    61. 

  61. 

        
    

    62. 

  62. 

        <!-- layer 1: shadow -->
    

    63. 

  63. 

        <s:rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
    

    64. 

  64. 

            <s:fill>
    

    65. 

  65. 

                <s:lineargradient rotation="90">
    

    66. 

  66. 

                    <s:gradiententry color="0x000000" color.down="0xFFFFFF" alpha="0.01" alpha.down="0" />
    

    67. 

  67. 

                    <s:gradiententry color="0x000000" color.down="0xFFFFFF" alpha="0.07" alpha.down="0.5" />
    

    68. 

  68. 

                </s:lineargradient>
    

    69. 

  69. 

            </s:fill>
    

    70. 

  70. 

        </s:rect>
    

    71. 

  71. 

        
    

    72. 

  72. 

        <!-- layer 2: fill -->
    

    73. 

  73. 

        <s:rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
    

    74. 

  74. 

            <s:fill>
    

    75. 

  75. 

                <s:lineargradient rotation="90">
    

    76. 

  76. 

                    <s:gradiententry color="0xFFFFFF" color.over="0xBBBDBD" color.down="0xAAAAAA" alpha="0.85" />
    

    77. 

  77. 

                    <s:gradiententry color="0xD8D8D8" color.over="0x9FA0A1" color.down="0x929496" alpha="0.85" />
    

    78. 

  78. 

                </s:lineargradient>
    

    79. 

  79. 

            </s:fill>
    

    80. 

  80. 

        </s:rect>
    

    81. 

  81. 

        
    

    82. 

  82. 

        <!-- layer 3: fill lowlight -->
    

    83. 

  83. 

        <s:rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
    

    84. 

  84. 

            <s:fill>
    

    85. 

  85. 

                <s:lineargradient rotation="270">
    

    86. 

  86. 

                    <s:gradiententry color="0x000000" ratio="0.0" alpha="0.0627" />
    

    87. 

  87. 

                    <s:gradiententry color="0x000000" ratio="0.48" alpha="0.0099" />
    

    88. 

  88. 

                    <s:gradiententry color="0x000000" ratio="0.48001" alpha="0" />
    

    89. 

  89. 

                </s:lineargradient>
    

    90. 

  90. 

            </s:fill>
    

    91. 

  91. 

        </s:rect>
    

    92. 

  92. 

        
    

    93. 

  93. 

        <!-- layer 4: fill highlight -->
    

    94. 

  94. 

        <s:rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
    

    95. 

  95. 

            <s:fill>
    

    96. 

  96. 

                <s:lineargradient rotation="90">
    

    97. 

  97. 

                    <s:gradiententry color="0xFFFFFF" ratio="0.0" alpha="0.33" alpha.over="0.22" alpha.down="0.12"/>
    

    98. 

  98. 

                    <s:gradiententry color="0xFFFFFF" ratio="0.48" alpha="0.33" alpha.over="0.22" alpha.down="0.12" />
    

    99. 

  99. 

                    <s:gradiententry color="0xFFFFFF" ratio="0.48001" alpha="0" />
    

    100. 

  100. 

                </s:lineargradient>
    

    101. 

  101. 

            </s:fill>
    

    102. 

  102. 

        </s:rect>
    

    103. 

  103. 

        
    

    104. 

  104. 

        <!-- layer 5: highlight stroke (all states except down) -->
    

    105. 

  105. 

        <s:rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
    

    106. 

  106. 

            <s:stroke>
    

    107. 

  107. 

                <s:lineargradientstroke rotation="90" weight="1">
    

    108. 

  108. 

                    <s:gradiententry color="0xFFFFFF" alpha.over="0.22" />
    

    109. 

  109. 

                    <s:gradiententry color="0xD8D8D8" alpha.over="0.22" />
    

    110. 

  110. 

                </s:lineargradientstroke>
    

    111. 

  111. 

            </s:stroke>
    

    112. 

  112. 

        </s:rect>
    

    113. 

  113. 

        
    

    114. 

  114. 

        <!-- layer 6: highlight stroke (down state only) -->
    

    115. 

  115. 

        <s:rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
    

    116. 

  116. 

            <s:stroke>
    

    117. 

  117. 

                <s:lineargradientstroke rotation="90" weight="1">
    

    118. 

  118. 

                    <s:gradiententry color="0x000000" alpha="0.25" ratio="0.0" />
    

    119. 

  119. 

                    <s:gradiententry color="0x000000" alpha="0.25" ratio="0.001" />
    

    120. 

  120. 

                    <s:gradiententry color="0x000000" alpha="0.07" ratio="0.0011" />
    

    121. 

  121. 

                    <s:gradiententry color="0x000000" alpha="0.07" ratio="0.965" />
    

    122. 

  122. 

                    <s:gradiententry color="0x000000" alpha="0.00" ratio="0.9651" />
    

    123. 

  123. 

                </s:lineargradientstroke>
    

    124. 

  124. 

            </s:stroke>
    

    125. 

  125. 

        </s:rect>
    

    126. 

  126. 

        
    

    127. 

  127. 

        <s:rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
    

    128. 

  128. 

            <s:stroke>
    

    129. 

  129. 

                <s:lineargradientstroke rotation="90" weight="1">
    

    130. 

  130. 

                    <s:gradiententry color="0x000000" alpha="0.09" ratio="0.0" />
    

    131. 

  131. 

                    <s:gradiententry color="0x000000" alpha="0.00" ratio="0.0001" />
    

    132. 

  132. 

                </s:lineargradientstroke>
    

    133. 

  133. 

            </s:stroke>
    

    134. 

  134. 

        </s:rect>
    

    135. 

  135. 

        
    

    136. 

  136. 

        <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    

    137. 

  137. 

        <s:rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
    

    138. 

  138. 

            <s:stroke>
    

    139. 

  139. 

                <s:lineargradientstroke rotation="90" weight="1">
    

    140. 

  140. 

                    <s:gradiententry color="0x000000" alpha="0.5625" alpha.down="0.6375" />
    

    141. 

  141. 

                    <s:gradiententry color="0x000000" alpha="0.75" alpha.down="0.85" />
    

    142. 

  142. 

                </s:lineargradientstroke>
    

    143. 

  143. 

            </s:stroke>
    

    144. 

  144. 

        </s:rect>
    

    145. 

  145. 

        
    

    146. 

  146. 

        <!-- layer 8: text -->
    

    147. 

  147. 

        <s:richtext id="rt"
    

    148. 

  148. 

                    textFlow="{hostComponent.textFlow}"
    

    149. 

  149. 

                    textAlign="center"
    

    150. 

  150. 

                    verticalAlign="middle"
    

    151. 

  151. 

                    horizontalCenter="0" verticalCenter="1"
    

    152. 

  152. 

                    left="10" right="10" top="2" bottom="2" />
    

    153. 

  153. 

        
    

    154. 

  154. 

    </s:sparkskin> 
    

    155.

L'exemple en action

Traduction de l'article de Peter DeHaan:

Setting a rich text label on a Spark Button control in Flex 4

]]> http://www.bases-as3.fr/format-riche-texte-bouton-flex-4/feed 1 Définir plusieurs noms de styles pour un contrôle Spark Button dans Flex 4 http://www.bases-as3.fr/plusieurs-styles-composant-flex-4 http://www.bases-as3.fr/plusieurs-styles-composant-flex-4#comments Mon, 07 Feb 2011 12:47:39 +0000 tannoy http://www.bases-as3.fr/?p=348 L'exemple suivant montre comment vous pouvez définir plusieurs noms de styles d'un contrôle Spark Button dans Flex 4 en définissant la propriété styleName avec une liste de noms de styles CSS, séparés par un espace.

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/27/setting-multiple-style-names-on-a-spark-button-control-in-flex-4/ -->
<s:application name="Spark_Button_styleName_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:layout>
		<s:horizontallayout horizontalAlign="center" verticalAlign="middle" />
	</s:layout>

	<fx:style>
		.boldWeight {
			fontWeight: bold;
		}
		.redColor {
			color: red;
		}
	</fx:style>

	<s:button id="btn1"
			  label="MXML"
			  styleName="redColor boldWeight" />

	<s:button id="btn2"
			  label="ActionScript (click)"
			  toolTip="Click to apply styles"
			  click="btn2.styleName = 'redColor boldWeight';" />

</s:application>

L'exemple en action

Traduction de l'article de Peter DeHaan:

Setting multiple style names on a Spark Button control in Flex 4

]]> http://www.bases-as3.fr/plusieurs-styles-composant-flex-4/feed 0 Ajouter des barres de défilement (scroll bar) à un conteneur Spark Application dans Flex 4 http://www.bases-as3.fr/barres-defilement-scroll-bar-application-flex-4 http://www.bases-as3.fr/barres-defilement-scroll-bar-application-flex-4#comments Tue, 25 Jan 2011 12:09:46 +0000 tannoy http://www.bases-as3.fr/?p=338 L'exemple suivant montre comment vous pouvez ajouter des barres de défilement (scroll bars) à un conteneur Spark Application dans Flex 4 en créant une skin personnalisée, en ajoutant un conteneur Spark Scroller autour de l'élément contentGroup de la skin, et en définissant le style skinClass sur l'élément Application.

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.

COPIER-COLLER


XML:





    

  1. 

    <?xml version="1.0" encoding="utf-8"?>
    

    2. 

  2. 

    <!-- http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ -->
    

    3. 

  3. 

    <s:application name="Spark_Application_Scroller_test"
    

    4. 

  4. 

            xmlns:fx="http://ns.adobe.com/mxml/2009"
    

    5. 

  5. 

            xmlns:s="library://ns.adobe.com/flex/spark"
    

    6. 

  6. 

            xmlns:mx="library://ns.adobe.com/flex/mx"
    

    7. 

  7. 

            skinClass="skins.CustomScrollingApplicationSkin">
    

    8. 

  8. 

        <s:controlbarcontent>
    

    9. 

  9. 

            <s:label text="Rect height (px):" />
    

    10. 

  10. 

            <s:hslider id="sl" minimum="100" maximum="1000" value="300" />
    

    11. 

  11. 

        </s:controlbarcontent>
    

    12. 

  12. 

     
    

    13. 

  13. 

        <s:rect top="20" horizontalCenter="0" width="50%" height="{sl.value}">
    

    14. 

  14. 

            <s:fill>
    

    15. 

  15. 

                <s:lineargradient rotation="45">
    

    16. 

  16. 

                    <s:gradiententry color="red" />
    

    17. 

  17. 

                    <s:gradiententry color="haloOrange" />
    

    18. 

  18. 

                    <s:gradiententry color="yellow" />
    

    19. 

  19. 

                    <s:gradiententry color="haloGreen" />
    

    20. 

  20. 

                    <s:gradiententry color="haloBlue" />
    

    21. 

  21. 

                </s:lineargradient>
    

    22. 

  22. 

            </s:fill>
    

    23. 

  23. 

        </s:rect>
    

    24. 

  24. 

     
    

    25. 

  25. 

    </s:application> 
    

    26.

Et la classe de skin personnalisée, skins/CustomScrollingApplicationSkin.mxml, se présente comme suit:

COPIER-COLLER


XML:





    

  1. 

    <?xml version="1.0" encoding="utf-8"?>
    

    2. 

  2. 

    <!-- http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ -->
    

    3. 

  3. 

    <s:skin name="CustomScrollingApplicationSkin"
    

    4. 

  4. 

            xmlns:fx="http://ns.adobe.com/mxml/2009"
    

    5. 

  5. 

            xmlns:s="library://ns.adobe.com/flex/spark"
    

    6. 

  6. 

            xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    

    7. 

  7. 

            alpha.disabledStates="0.5">
    

    8. 

  8. 

        <!-- states -->
    

    9. 

  9. 

        <s:states>
    

    10. 

  10. 

            <s:state name="normal" stateGroups="normalStates" />
    

    11. 

  11. 

            <s:state name="disabled" stateGroups="disabledStates" />
    

    12. 

  12. 

            <s:state name="normalWithControlBar" stateGroups="normalStates" />
    

    13. 

  13. 

            <s:state name="disabledWithControlBar" stateGroups="disabledStates" />
    

    14. 

  14. 

        </s:states>
    

    15. 

  15. 

     
    

    16. 

  16. 

        <fx:metadata>
    

    17. 

  17. 

            [HostComponent("spark.components.Application")]
    

    18. 

  18. 

        </fx:metadata> 
    

    19. 

  19. 

     
    

    20. 

  20. 

        <fx:script fb:purpose="styling">
    

    21. 

  21. 

            <![CDATA[
    

    22. 

  22. 

                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
    

    23. 

  23. 

                    bgRectFill.color = getStyle('backgroundColor');
    

    24. 

  24. 

                    bgRectFill.alpha = getStyle('backgroundAlpha');
    

    25. 

  25. 

                    super.updateDisplayList(unscaledWidth, unscaledHeight);
    

    26. 

  26. 

                }
    

    27. 

  27. 

            ]]>
    

    28. 

  28. 

        </fx:script>
    

    29. 

  29. 

     
    

    30. 

  30. 

        <!-- fill -->
    

    31. 

  31. 

        <!--- 
    

    32. 

  32. 

        A rectangle with a solid color fill that forms the background of the application.
    

    33. 

  33. 

        The color of the fill is set to the Application's backgroundColor property.
    

    34. 

  34. 

        -->
    

    35. 

  35. 

        <s:rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >
    

    36. 

  36. 

            <s:fill>
    

    37. 

  37. 

                <s:solidcolor id="bgRectFill" color="#FFFFFF"/>
    

    38. 

  38. 

            </s:fill>
    

    39. 

  39. 

        </s:rect>
    

    40. 

  40. 

     
    

    41. 

  41. 

        <s:group left="0" right="0" top="0" bottom="0">
    

    42. 

  42. 

            <s:layout>
    

    43. 

  43. 

                <s:verticallayout gap="0" horizontalAlign="justify" />
    

    44. 

  44. 

            </s:layout>
    

    45. 

  45. 

     
    

    46. 

  46. 

            <!--- Application Control Bar -->
    

    47. 

  47. 

            </s:group><s:group id="topGroup" minWidth="0" minHeight="0"
    

    48. 

  48. 

                     includeIn="normalWithControlBar, disabledWithControlBar">
    

    49. 

  49. 

     
    

    50. 

  50. 

                <!-- layer 0: control bar highlight -->
    

    51. 

  51. 

                <s:rect left="0" right="0" top="0" bottom="1">
    

    52. 

  52. 

                    <s:stroke>
    

    53. 

  53. 

                        <s:lineargradientstroke rotation="90" weight="1">
    

    54. 

  54. 

                            <s:gradiententry color="0xFFFFFF" />
    

    55. 

  55. 

                            <s:gradiententry color="0xD8D8D8" />
    

    56. 

  56. 

                        </s:lineargradientstroke>
    

    57. 

  57. 

                    </s:stroke>
    

    58. 

  58. 

                </s:rect>
    

    59. 

  59. 

     
    

    60. 

  60. 

                <!-- layer 1: control bar fill -->
    

    61. 

  61. 

                <s:rect left="1" right="1" top="1" bottom="2">
    

    62. 

  62. 

                    <s:fill>
    

    63. 

  63. 

                        <s:lineargradient rotation="90">
    

    64. 

  64. 

                            <s:gradiententry color="0xEDEDED" />
    

    65. 

  65. 

                            <s:gradiententry color="0xCDCDCD" />
    

    66. 

  66. 

                        </s:lineargradient>
    

    67. 

  67. 

                    </s:fill>
    

    68. 

  68. 

                </s:rect>
    

    69. 

  69. 

     
    

    70. 

  70. 

                <!-- layer 2: control bar divider line -->
    

    71. 

  71. 

                <s:rect left="0" right="0" bottom="0" height="1" alpha="0.55">
    

    72. 

  72. 

                    <s:fill>
    

    73. 

  73. 

                        <s:solidcolor color="0x000000" />
    

    74. 

  74. 

                    </s:fill>
    

    75. 

  75. 

                </s:rect>
    

    76. 

  76. 

     
    

    77. 

  77. 

                <!-- layer 3: control bar -->
    

    78. 

  78. 

                </s:group><s:group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
    

    79. 

  79. 

                    <s:layout>
    

    80. 

  80. 

                        <s:horizontallayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
    

    81. 

  81. 

                    </s:layout>
    

    82. 

  82. 

                </s:group>
    

    83. 

  83. 

            
    

    84. 

  84. 

     
    

    85. 

  85. 

            <s:scroller id="contentScroller" width="100%" height="100%" minWidth="0" minHeight="0">
    

    86. 

  86. 

                <s:group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
    

    87. 

  87. 

            </s:scroller>
    

    88. 

  88. 

     
    

    89. 

  89. 

        
    

    90. 

  90. 

     
    

    91. 

  91. 

    </s:skin> 
    

    92.

L'exemple en action

Traduction de l'article de Peter DeHaan:

Adding scroll bars to an Spark Application container in Flex 4

]]> http://www.bases-as3.fr/barres-defilement-scroll-bar-application-flex-4/feed 0 Effacer un style d’un contrôle Spark Button dans Flex 4 http://www.bases-as3.fr/flex-4-effacer-style-bouton http://www.bases-as3.fr/flex-4-effacer-style-bouton#comments Sat, 22 Jan 2011 10:40:11 +0000 tannoy http://www.bases-as3.fr/?p=330 L'exemple suivant montre comment vous pouvez effacer un style d'un contrôle Spark Button dans Flex 4 en utilisant la méthode clearStyle().

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.

COPIER-COLLER


XML:





    

  1. 

    <?xml version="1.0" encoding="utf-8"?>
    

    2. 

  2. 

    <!-- http://blog.flexexamples.com/2010/10/27/clearing-a-style-on-the-spark-button-control-in-flex-4/ -->
    

    3. 

  3. 

    <s:application name="Spark_Button_clearStyle_test"
    

    4. 

  4. 

                   xmlns:fx="http://ns.adobe.com/mxml/2009"
    

    5. 

  5. 

                   xmlns:s="library://ns.adobe.com/flex/spark"
    

    6. 

  6. 

                   xmlns:mx="library://ns.adobe.com/flex/mx">
    

    7. 

  7. 

        <s:controlbarcontent>
    

    8. 

  8. 

            <s:button label="bold" fontWeight="bold" click="btn.setStyle('fontWeight', FontWeight.BOLD);" />
    

    9. 

  9. 

            <s:button label="no bold" click="btn.clearStyle('fontWeight');" />
    

    10. 

  10. 

        </s:controlbarcontent>
    

    11. 

  11. 

     
    

    12. 

  12. 

        <fx:script>
    

    13. 

  13. 

            <![CDATA[
    

    14. 

  14. 

                import flash.text.engine.FontWeight;
    

    15. 

  15. 

            ]]>
    

    16. 

  16. 

        </fx:script>
    

    17. 

  17. 

     
    

    18. 

  18. 

        <s:button id="btn"
    

    19. 

  19. 

                  label="Button"
    

    20. 

  20. 

                  horizontalCenter="0" verticalCenter="0" />
    

    21. 

  21. 

     
    

    22. 

  22. 

    </s:application> 
    

    23.

Traduction de l'article de Peter DeHaan:

Clearing a style on the Spark Button control in Flex 4

]]> http://www.bases-as3.fr/flex-4-effacer-style-bouton/feed 0 Définir une largeur fixe aux boutons d’un contrôle Spark ButtonBar dans Flex 4 http://www.bases-as3.fr/largeur-fixe-boutons-buttonbar http://www.bases-as3.fr/largeur-fixe-boutons-buttonbar#comments Fri, 21 Jan 2011 13:01:11 +0000 tannoy http://www.bases-as3.fr/?p=312 L'exemple suivant montre comment vous pouvez définir une largeur fixe pour les boutons d'un contrôle Spark ButtonBar dans Flex 4 en créant une mise en page personnalisé de type HorizontalLayout et en définissant les propriétés columnWidth et variableColumnWidth.

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.

COPIER-COLLER


XML:





    

  1. 

    <?xml version="1.0" encoding="utf-8"?>
    

    2. 

  2. 

    <!-- http://blog.flexexamples.com/2010/12/10/setting-a-fixed-button-width-on-a-spark-buttonbar-control-in-flex-4/ -->
    

    3. 

  3. 

    <s:application name="Spark_ButtonBar_layout_columnWidth_test"
    

    4. 

  4. 

                   xmlns:fx="http://ns.adobe.com/mxml/2009"
    

    5. 

  5. 

                   xmlns:s="library://ns.adobe.com/flex/spark"
    

    6. 

  6. 

                   xmlns:mx="library://ns.adobe.com/flex/mx">
    

    7. 

  7. 

        
    

    8. 

  8. 

        <s:buttonbar id="bBar" horizontalCenter="0" verticalCenter="0">
    

    9. 

  9. 

            <s:layout>
    

    10. 

  10. 

                <s:horizontallayout gap="-1" columnWidth="80" variableColumnWidth="false" />
    

    11. 

  11. 

            </s:layout>
    

    12. 

  12. 

            <s:dataprovider>
    

    13. 

  13. 

                <s:arraylist source="[Red,Halo Orange,Yellow,Halo Green,Halo Blue,A,The quick brown fox]" />
    

    14. 

  14. 

            </s:dataprovider>
    

    15. 

  15. 

        </s:buttonbar>
    

    16. 

  16. 

        
    

    17. 

  17. 

    </s:application> 
    

    18.
Exemple Flash pour l\'article Définir une largeur fixe aux boutons d’un contrôle Spark ButtonBar dans Flex 4

Traduction de l'article de Peter DeHaan:

Setting a fixed button width on a Spark ButtonBar control in Flex 4

]]> http://www.bases-as3.fr/largeur-fixe-boutons-buttonbar/feed 0 Ajouter des barres de défilement à un conteneur Spark Application dans Flex 4 http://www.bases-as3.fr/scrollbar-spark-application http://www.bases-as3.fr/scrollbar-spark-application#comments Tue, 09 Nov 2010 21:46:08 +0000 tannoy http://www.bases-as3.fr/?p=282 Traduction de l'article de Peter DeHaan:
Adding scroll bars to an Spark Application container in Flex 4

L'exemple suivant montre comment vous pouvez ajouter des barres de défilement à un conteneur Spark Application dans Flex 4 en créant une skin personnalisée, en ajoutant un conteneur Spark Container autour de la partie de skin contentGroup et en spécifiant le style skinClass de la balise Application.

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.

COPIER-COLLER
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ -->
  3. <s:Application name="Spark_Application_Scroller_test"
  4.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  5.         xmlns:s="library://ns.adobe.com/flex/spark"
  6.         xmlns:mx="library://ns.adobe.com/flex/mx"
  7.         skinClass="skins.CustomScrollingApplicationSkin">
  8.     <s:controlBarContent>
  9.         <s:Label text="Rect height (px):" />
  10.         <s:HSlider id="sl" minimum="100" maximum="1000" value="300" />
  11.     </s:controlBarContent>
  12.  
  13.     <s:Rect top="20" horizontalCenter="0" width="50%" height="{sl.value}">
  14.         <s:fill>
  15.             <s:LinearGradient rotation="45">
  16.                 <s:GradientEntry color="red" />
  17.                 <s:GradientEntry color="haloOrange" />
  18.                 <s:GradientEntry color="yellow" />
  19.                 <s:GradientEntry color="haloGreen" />
  20.                 <s:GradientEntry color="haloBlue" />
  21.             </s:LinearGradient>
  22.         </s:fill>
  23.     </s:Rect>
  24.  
  25. </s:Application>

Et la classe de skin personnalisée, skins/CustomScrollingApplicationSkin.mxml, est définit comme suit:

COPIER-COLLER
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ -->
  3. <s:Skin name="CustomScrollingApplicationSkin"
  4.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  5.         xmlns:s="library://ns.adobe.com/flex/spark"
  6.         xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
  7.         alpha.disabledStates="0.5">
  8.     <!-- states -->
  9.     <s:states>
  10.         <s:State name="normal" stateGroups="normalStates" />
  11.         <s:State name="disabled" stateGroups="disabledStates" />
  12.         <s:State name="normalWithControlBar" stateGroups="normalStates" />
  13.         <s:State name="disabledWithControlBar" stateGroups="disabledStates" />
  14.     </s:states>
  15.  
  16.     <fx:Metadata>
  17.         [HostComponent("spark.components.Application")]
  18.     </fx:Metadata>
  19.  
  20.     <fx:Script fb:purpose="styling">
  21.         <![CDATA[
  22.             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  23.                 bgRectFill.color = getStyle('backgroundColor');
  24.                 bgRectFill.alpha = getStyle('backgroundAlpha');
  25.                 super.updateDisplayList(unscaledWidth, unscaledHeight);
  26.             }
  27.         ]]>
  28.     </fx:Script>
  29.  
  30.     <!-- fill -->
  31.     <!---
  32.     A rectangle with a solid color fill that forms the background of the application.
  33.     The color of the fill is set to the Application's backgroundColor property.
  34.     -->
  35.     <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >
  36.         <s:fill>
  37.             <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
  38.         </s:fill>
  39.     </s:Rect>
  40.  
  41.     <s:Group left="0" right="0" top="0" bottom="0">
  42.         <s:layout>
  43.             <s:VerticalLayout gap="0" horizontalAlign="justify" />
  44.         </s:layout>
  45.  
  46.         <!--- Application Control Bar -->
  47.         <s:Group id="topGroup" minWidth="0" minHeight="0"
  48.                  includeIn="normalWithControlBar, disabledWithControlBar">
  49.  
  50.             <!-- layer 0: control bar highlight -->
  51.             <s:Rect left="0" right="0" top="0" bottom="1">
  52.                 <s:stroke>
  53.                     <s:LinearGradientStroke rotation="90" weight="1">
  54.                         <s:GradientEntry color="0xFFFFFF" />
  55.                         <s:GradientEntry color="0xD8D8D8" />
  56.                     </s:LinearGradientStroke>
  57.                 </s:stroke>
  58.             </s:Rect>
  59.  
  60.             <!-- layer 1: control bar fill -->
  61.             <s:Rect left="1" right="1" top="1" bottom="2">
  62.                 <s:fill>
  63.                     <s:LinearGradient rotation="90">
  64.                         <s:GradientEntry color="0xEDEDED" />
  65.                         <s:GradientEntry color="0xCDCDCD" />
  66.                     </s:LinearGradient>
  67.                 </s:fill>
  68.             </s:Rect>
  69.  
  70.             <!-- layer 2: control bar divider line -->
  71.             <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
  72.                 <s:fill>
  73.                     <s:SolidColor color="0x000000" />
  74.                 </s:fill>
  75.             </s:Rect>
  76.  
  77.             <!-- layer 3: control bar -->
  78.             <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
  79.                 <s:layout>
  80.                     <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
  81.                 </s:layout>
  82.             </s:Group>
  83.         </s:Group>
  84.  
  85.         <s:Scroller id="contentScroller" width="100%" height="100%" minWidth="0" minHeight="0">
  86.             <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
  87.         </s:Scroller>
  88.  
  89.     </s:Group>
  90.  
  91. </s:Skin>

]]> http://www.bases-as3.fr/scrollbar-spark-application/feed 0