Posts Tagged ‘as3’

Module Optimization: Link report and load externs

January 12, 2011

When modules are released or built (using Clean or Project>Export Release Build..), the exported module swf’s will include any Flash/Flex framework classes and external swc/swf classes that are used by the modules.

This is not always optimal, as some of the files included in the Module’s swf’s may already be in used by the Main app, and included in the MainApp.swf. You can remove the overlapping classes from the module swf’s by doing the following:

  1. In your main app i.e. the one that will use the module, go to Project>Properties>Flex Compiler and add an Additional compiler arguments:

-link-report=link_report.xml

  1. Clean or Export Release Build the project.
  2. Copy the link_report.xml file from the bin-debug or bin-release folder and paste it to the root of the module project folder i.e. the same folder as the Module.mxml file(s).
  3. Repeat step 1 for the Modules project, and add the compiler arguments:

-load-externs=link_report.xml

  1. Clean or Export Release Build the project.

The released module swf’s will not include any external files that it shares with the main app. Reduced the size of the module I was optimizing in work by 15%!

Additional Compiler Arguments

More details on the compiler arguments and module optimization from:

http://livedocs.adobe.com/flex/3/html/help.html?content=modular_4.html

Caution: any time you change your main app, and remove or change dependencies or SDK versions, you will need to repeat the above process. The modules will not work with apps that they have not been optimized for.

If you receive an error message -load-externs “could not open …..”, make sure that the xml file is at the root of the module project.

Advertisements

Flex: Stacked column chart – programmatically in actionscript

January 27, 2010

I was looking for ages for an example of a dynamically generated stacked column chart in Flex, but most of the examples were incorporating some MXML, or contained hard-coded series objects.  

The example below is based on Adobe Livedocs, but I show how to generate the series arrays programatically in as3, with no use of mxml code, and apply these series to a column chart (added to panelActionscript as seen in the code below). Also, this could be easily adapted to a barchart.

If youve got any suggestions, let me know.

Flex Stacked Chart

 

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()" width="622" height="660">
  <mx:Script><![CDATA[

  	 import mx.charts.CategoryAxis;
  	 import mx.charts.series.ColumnSeries;
  	 import mx.charts.ColumnChart;
  	 import mx.charts.series.ColumnSet;
     import mx.charts.Legend;
     import mx.charts.BarChart;
     import mx.charts.series.BarSet;
     import mx.charts.series.BarSeries;
     import mx.collections.ArrayCollection;

     [Bindable]
     private var yearlyData:ArrayCollection = new ArrayCollection([
        {month:"January", revenue:120, costs:45,
            overhead:102, oneTime:23},
        {month:"February", revenue:108, costs:42,
            overhead:87, oneTime:47},
        {month:"March", revenue:150, costs:82,
            overhead:32, oneTime:21},
        {month:"April", revenue:170, costs:44,
            overhead:68},
        {month:"May", revenue:250, costs:57,
            overhead:77, oneTime:17},
        {month:"June", revenue:200, costs:33,
            overhead:51, oneTime:30},
        {month:"July", revenue:145, costs:80,
            overhead:62, oneTime:18},
        {month:"August", revenue:166, costs:87,
            overhead:48},
        {month:"September", revenue:103, costs:56,
            overhead:42},
        {month:"October", revenue:140, costs:91,
            overhead:45, oneTime:60},
        {month:"November", revenue:100, costs:42,
            overhead:33, oneTime:67},
        {month:"December", revenue:182, costs:56,
            overhead:25, oneTime:48},
        {month:"May", revenue:120, costs:57,
            overhead:30}
     ]);

     private function initApp():void {

     	// Create a column chart object
        var stackedColumnChart:ColumnChart = new ColumnChart();
        stackedColumnChart.dataProvider = yearlyData;
        stackedColumnChart.showDataTips = true;
 stackedColumnChart.width	= 460;

 // Set the horizontal axix category
        var xAxis:CategoryAxis = new CategoryAxis();
        xAxis.categoryField = "month";
        stackedColumnChart.horizontalAxis = xAxis;

 // ColumnSet.series is an array which contains
 // an array of ColumnSeries objects.
        var columnSet:ColumnSet = new ColumnSet();
        columnSet.type = "stacked";

        // Each item in seriesDetails becomes a different segment of
        // a column in the stacked chart i.e. each item represents a series.
        var seriesDetails:ArrayCollection = new ArrayCollection([
        	{YField:"costs", DisplayName:"Recurring Costs"},
        	{YField:"overhead", DisplayName:"Overhead Costs"},
        	{YField:"oneTime", DisplayName:"One-Time Costs"}
        	]);

        // Create a ColumnSeries, and an array to be
        // populated with dynamically generated columnSeries objects
        var columnSeries:ColumnSeries;
    	var seriesArray:Array = new Array();

    	// Generate an array of ColumnSeries objects
        // which are then be applied to the ColumnSet series.
        for(var i:int = 0; i < seriesDetails.length; i++){
        	columnSeries = new ColumnSeries();
        	columnSeries.yField = seriesDetails[i].YField;
        	columnSeries.displayName = seriesDetails[i].DisplayName;
        	seriesArray.push(columnSeries);
        }
        columnSet.series = seriesArray;

 // c.series could take an array of column sets
 // for displaying mixed charts i.e. c.series = [columnSet1, columnSet2];
 stackedColumnChart.series = [columnSet];

        var legend:Legend = new Legend();
        legend.direction = "horizontal";
        legend.dataProvider = stackedColumnChart;

        panelActionscript.addChild(stackedColumnChart);
        panelActionscript.addChild(legend);

     }

  ]]></mx:Script>
  <mx:VBox height="100%">
    <mx:Panel title="Stacked chart (dynamically created in ActionScript)"
    				id="panelActionscript" width="490">
    </mx:Panel>
  </mx:VBox>
  <mx:Panel title="Same chart created solely in MXML" id="panelMxml" width="490">
    <mx:ColumnChart id="mxmlColumnChart" dataProvider="{yearlyData}"
    				showDataTips="true" width="470">
      <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
       </mx:horizontalAxis>
       <mx:series>
           <mx:ColumnSet type="stacked">
               <mx:ColumnSeries
                   yField="costs"
                   displayName="Recurring Costs"/>
               <mx:ColumnSeries
                   yField="overhead"
                   displayName="Overhead Costs"/>
               <mx:ColumnSeries
                   yField="oneTime"
                   displayName="One-Time Costs"/>
           </mx:ColumnSet>
       </mx:series>
    </mx:ColumnChart>
    <mx:Legend dataProvider="{mxmlColumnChart}" direction="horizontal"/>
  </mx:Panel>
</mx:WindowedApplication>