User manual ADOBE FLEX 4.5

[. . . ] 5 introduces new features and continues to build upon the major architectural changes in Flex 4. If you are a new Flex developer, and have not previously developed applications in Flex, you can use the many available resources to learn more about Flex. For more information on the resources available for new Flex developers, see « Getting started with Flex 4. If you are an existing Flex developer, you can use the information in « Migration » à la page 2 to decide how best to upgrade your applications to the newest SDK. [. . . ] To get the individual month’s widget data, you typically make another database call and pass a parameter to the listening service that describes the specific data you want. Typically, when you drill down into chart data, you create new charts in your application with ActionScript. When creating new charts in ActionScript, you must be sure to create a series, add it to the new chart’s series Array, and then call the addElement() method (on Spark containers) or addChild() method (on MX containers) to add the new chart to the display list. For more information, see « Creating charts in ActionScript » à la page 1085. One way to provide drill-down functionality is to make calls that are external to the application to get the drill-down data. You typically do this by using the chart’s itemClick event listener, which gives you access to the HitData object. The HitData object lets you examine what data was underneath the mouse when the event was triggered. For more information, see « Using the HitData object » à la page 1328. You can also use a simple Event object to get a reference to the series that was clicked. When you click on a column in the initial view, the example drills down into a second view that shows the change in value of a particular asset class over time. The following example uses the Event object to get a reference to the clicked ColumnSeries. It then drills down into the single ColumnSeries by replacing the chart’s series Array with the single ColumnSeries in the chart. When you click a column again, the chart returns to its original configuration with all ColumnSeries. -- View source of the following page to see the structure of the data that Flex uses in this example. [CDATA[ public var initSeriesArray:Array = new Array(); public var level:Number = 1; public var newSeries:Array; private function initApp():void { // Get initial series Array -- to be reloaded when it returns // from a drill down. Series; } private function zoomIntoSeries(e:Event):void { newSeries = new Array(); if (level == 1) { newSeries. 5 Using data-driven UI components 1356 click="zoomIntoSeries(event)"/> <mx:ColumnSeries id="s2" displayName="Stocks" yField="stocks" xField="date" click="zoomIntoSeries(event)"/> <mx:ColumnSeries id="s3" displayName="Retirement" yField="retirement" xField="date" click="zoomIntoSeries(event)"/> <mx:ColumnSeries id="s4" displayName="Home" yField="home" xField="date" click="zoomIntoSeries(event)"/> <mx:ColumnSeries id="s5" displayName="Other" yField="other" xField="date" click="zoomIntoSeries(event)"/> </mx:series> <mx:horizontalAxis > <mx:DateTimeAxis title="Date" dataUnits="months"/> </mx:horizontalAxis> </mx:ColumnChart> <mx:Legend dataProvider="{chart}"/> </s:Panel> </s:Application> Another approach to drilling down into chart data is to use unused data within the existing data provider. You can do this by changing the properties of the series and axes when the chart is clicked. The following example is similar to the previous example in that it drills down into the assets of a fictional person’s net worth. In this case, though, it shows the value of the asset classes for the clicked-on month in the drill-down view rather than the change over time of a particular asset class. This example uses the HitData object’s item property to access the values of the current data provider. By building an Array of objects with the newly-discovered data, the chart is able to drill down into the series without making calls to any external services. [. . . ] The syntax of the value of the style property is determined by the default style sheet language. In CSS, property declarations have the form "name:value" and are separated by a semicolon. Styles set with this property do not affect components or the Application container in the application. supportembed Boolean Determines whether the Netscape-specific <embed> tag is supported. [. . . ]