Mode d'emploi ADOBE FLEX 4.5

[. . . ] Dernière mise à jour le 19/6/2011 iii Sommaire Chapitre 1 : Introduction to Flex 4. 944 Data providers and collections MX data-driven controls Dernière mise à jour le 19/6/2011 USING FLEX 4. 2298 Dernière mise à jour le 19/6/2011 USING FLEX 4. 2553 Dernière mise à jour le 19/6/2011 1 Chapitre 1 : Introduction to Flex 4. [. . . ] YNumber Dernière mise à jour le 19/6/2011 USING FLEX 4. Show(s); } ]]> </fx:Script> <s:layout> <s:VerticalLayout/> </s:layout> <s:Panel title="Using a custom fillFunction in a Column Chart"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:ColumnChart id="myChart" dataProvider="{sales}" type="overlaid" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis title="Sales Person" categoryField="Name"/> </mx:horizontalAxis> <mx:verticalAxis> <mx:LinearAxis title="Sales (in $USD)"/> </mx:verticalAxis> <mx:series> <mx:ColumnSeries id="salesGoalSeries" xField="Name" yField="SalesGoal" fillFunction="myFillFunction" displayName="Sales Goal"> </mx:ColumnSeries> <mx:ColumnSeries id="currSalesSeries" xField="Name" yField="CurrentAmount" displayName="Current Sales"> <mx:fill> <mx:SolidColor color="0x00FF00"/> </mx:fill> </mx:ColumnSeries> </mx:series> </mx:ColumnChart> <mx:Legend> Dernière mise à jour le 19/6/2011 USING FLEX 4. You can specify the minField property for the following chart series types: • AreaSeries • BarSeries • ColumnSeries Setting a value for the minField property creates two values on the axis for each data point in an area; for example: Dernière mise à jour le 19/6/2011 USING FLEX 4. Result}" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="month"/> </mx:horizontalAxis> <mx:series> <mx:AreaSeries yField="profit" minField="expenses" displayName="Profit"/> </mx:series> </mx:AreaChart> <mx:Legend dataProvider="{myChart}"/> </s:Panel> </s:Application> Dernière mise à jour le 19/6/2011 USING FLEX 4. Overlaid stacked 100% The following example creates an AreaChart control that has four data series, stacked on top of each other: Dernière mise à jour le 19/6/2011 USING FLEX 4. Result}" showDataTips="true" type="stacked"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="Month"/> </mx:horizontalAxis> <mx:series> <mx:AreaSeries yField="profit" displayName="Profit"/> <mx:AreaSeries yField="expenses" displayName="Expenses"/> <mx:AreaSeries yField="amount" displayName="Amount"/> </mx:series> </mx:AreaChart> <mx:Legend dataProvider="{myChart}"/> </s:Panel> </s:Application> Dernière mise à jour le 19/6/2011 USING FLEX 4. The example shows how to do this in MXML and ActionScript: Dernière mise à jour le 19/6/2011 USING FLEX 4. Type = "clustered"; var series1:BarSeries = new BarSeries(); Dernière mise à jour le 19/6/2011 USING FLEX 4. AddElement(l); } ]]></fx:Script> <s:Panel title="Mixed Sets Chart Created in MXML" id="panel1"> <s:layout> <s:HorizontalLayout/> </s:layout> <mx:BarChart id="myChart" dataProvider="{yearlyData}" showDataTips="true"> <mx:verticalAxis> <mx:CategoryAxis categoryField="month"/> </mx:verticalAxis> <mx:series> <mx:BarSet type="clustered"> <mx:BarSeries xField="revenue" displayName="Revenue"/> <mx:BarSet type="stacked"> <mx:BarSeries xField="costs" displayName="Recurring Costs"/> <mx:BarSeries xField="oneTime" displayName="One-Time Costs"/> </mx:BarSet> </mx:BarSet> </mx:series> </mx:BarChart> <mx:Legend dataProvider="{myChart}"/> </s:Panel> <s:Panel title="Mixed Sets Chart Created in ActionScript" id="panel2"> <s:layout> <s:VerticalLayout/> </s:layout> </s:Panel> </s:Application> Dernière mise à jour le 19/6/2011 USING FLEX 4. ArrayCollection; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month:"Jan", Profit:-2000, Expenses:-1500}, {Month:"Feb", Profit:1000, Expenses:-200}, {Month:"Mar", Profit:1500, Expenses:-500} ]); ]]></fx:Script> <s:layout> <s:VerticalLayout/> </s:layout> <s:Panel title="Column Chart"> Dernière mise à jour le 19/6/2011 USING FLEX 4. 5 Using data-driven UI components 1315 <s:layout> <s:HorizontalLayout/> </s:layout> <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSet type="stacked" allowNegativeForStacked="true"> <mx:series> <mx:ColumnSeries xField="Month" yField="Profit" displayName="Profit"/> <mx:ColumnSeries xField="Month" yField="Expenses" displayName="Expenses"/> </mx:series> </mx:ColumnSet> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider="{myChart}"/> </s:Panel> </s:Application> The resulting chart shows three months of data, with all expenses and some income data rendering in negative values: Dernière mise à jour le 19/6/2011 USING FLEX 4. ArrayCollection; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month:"2005", top:25, middle:20, bottom:17, Invisible:0}, {Month:"Jan", top:14, middle:12, bottom:10, Invisible:62}, {Month:"Feb", top:8, middle:6, bottom:4, Invisible:98}, {Month:"Mar", top:6, middle:5, bottom:5, Invisible:116}, {Month:"Apr", top:5, middle:4, bottom:4, Invisible:132}, {Month:"May", top:5, middle:3, bottom:5, Invisible:140}, {Month:"Jun", top:4, middle:3, bottom:2, Invisible:155}, {Month:"2006", top:68, middle:57, bottom:39, Invisible:0} ]); ]]></fx:Script> <s:layout> <s:VerticalLayout/> </s:layout> <s:Panel title="Stacked Waterfall"> <s:layout> <s:HorizontalLayout/> Dernière mise à jour le 19/6/2011 USING FLEX 4. Dernière mise à jour le 19/6/2011 USING FLEX 4. Result}" showDataTips="true"> <mx:verticalAxis> <mx:CategoryAxis categoryField="month"/> </mx:verticalAxis> <mx:series> <mx:BarSeries xField="amount" displayName="Amount (in $USD)"/> <mx:BarSeries xField="profit" displayName="Profit (in $USD)"/> <mx:BarSeries xField="expenses" displayName="Expense (in $USD)"/> </mx:series> </mx:BarChart> <mx:Legend dataProvider="{myChart}"/> </s:Panel> </s:Application> You add a Legend to a chart in ActionScript by instantiating a new object of type Legend, and then calling the container’s addElement() method to add the Legend to the container, as the following example shows: Dernière mise à jour le 19/6/2011 USING FLEX 4. Dernière mise à jour le 19/6/2011 USING FLEX 4. The following example creates a custom legend for the chart with multiple axes: Dernière mise à jour le 19/6/2011 USING FLEX 4. [CDATA[ [Bindable] public var strkColor:Number = 0x224488; [Bindable] public var feColor:Number = 0x884422; ]]></fx:Script> <s:layout> <s:VerticalLayout/> </s:layout> <s:Panel title="Column Chart With Multiple Axes"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:ColumnChart id="myChart" showDataTips="true"> <mx:horizontalAxis> <mx:DateTimeAxis id="h1" dataUnits="days"/> </mx:horizontalAxis> <mx:horizontalAxisRenderers> <mx:AxisRenderer placement="bottom" axis="{h1}"/> </mx:horizontalAxisRenderers> <mx:verticalAxisRenderers> <mx:AxisRenderer placement="left" axis="{v1}"> <mx:axisStroke>{h1Stroke}</mx:axisStroke> </mx:AxisRenderer> <mx:AxisRenderer placement="left" axis="{v2}"> <mx:axisStroke>{h2Stroke}</mx:axisStroke> </mx:AxisRenderer> </mx:verticalAxisRenderers> <mx:series> <mx:ColumnSeries id="cs1" horizontalAxis="{h1}" Dernière mise à jour le 19/6/2011 USING FLEX 4. Dernière mise à jour le 19/6/2011 USING FLEX 4. AddChild(gr); for (var k:int = 0; k < rowSize; k++) { Dernière mise à jour le 19/6/2011 USING FLEX 4. Data; drawLegend(); } ]]></fx:Script> <s:layout> <s:VerticalLayout/> </s:layout> <s:Panel title="Custom Legend in Grid" width="500" height="750"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:BarChart id="myChart" dataProvider="{expenses}" height="400" showDataTips="true"> <mx:verticalAxis> <mx:CategoryAxis dataProvider="{expenses}" categoryField="Expense"/> </mx:verticalAxis> <mx:series> Dernière mise à jour le 19/6/2011 USING FLEX 4. ChartDoubleClick Dernière mise à jour le 19/6/2011 USING FLEX 4. */ Dernière mise à jour le 19/6/2011 USING FLEX 4. [. . . ] Ensure that you configure the proxy server correctly so that deployed Flex applications can access your web services, or other data services, through the proxy. If a deployed Flex application directly accesses web services, or other data services, ensure that access is allowed. Enter the information about your servers in the following table: Name DNS name IP address Enter information about the server hosting the web service proxy: Name DNS Name IP Address Enter information about your web services or any other services accessible from a deployed Flex application: Name Location (URL) Dernière mise à jour le 19/6/2011 USING FLEX 4. Dernière mise à jour le 19/6/2011 USING FLEX 4. [. . . ]