Les bases de l'ActionScript 3 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.3.2 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 FileReference et Chrome – IOError en utilisant la méthode download() http://www.bases-as3.fr/filereference-chrome-ioerror http://www.bases-as3.fr/filereference-chrome-ioerror#comments Thu, 20 Jan 2011 12:37:13 +0000 tannoy http://www.bases-as3.fr/?p=292 Lorsque l'on souhaite donner la possibilité à un utilisateur de télécharger un fichier depuis une animation Flash, on utilise la méthode download() de la classe FileReference.

Le fichier téléchargé peut-être un fichier présent physiquement sur le serveur où un fichier généré à la volée par un script serveur.

Dans une de mes applications, je devais télécharger un fichier zip qui était généré dynamiquement depuis un script PHP. Le téléchargement fonctionnait très bien sous tous les navigateurs sauf avec Chrome où j'obtenais une erreur 2038:

Error #2038: Erreur d'E/S de fichier


Dans ce cas précis, la problématique provenait du header PHP 'Content-Length' qui était utilisé dans mon script.

COPIER-COLLER
PHP:
  1. header('Content-Type: application/zip');
  2. header('Content-Length: ' . filesize($tempFile));
  3. header('Content-Disposition: attachment; filename="monfichier.zip"');

La solution a donc été de supprimer le header PHP du script et le téléchargement fonctionne bien désormais sous Chrome.

COPIER-COLLER
PHP:
  1. header('Content-Type: application/zip');
  2. header('Content-Disposition: attachment; filename="monfichier.zip"');

]]> http://www.bases-as3.fr/filereference-chrome-ioerror/feed 1