Integrating Flex Charting 2 and Nitobi Grid with FABridge

Building the Flex 2 stub application

Since the main point of this tutorial is to take an Ajax application and enhance it with Flex Charting, a major component of this tutorial is the chart itself. To do this, one needs to create a new Flex 2 project and import all the classes for Flex Charting. No other coding in the Flex "stub" is needed. After creating and compiling the stub application, we can simply refer to the resulting Flash SWF file in the HTML of the Ajax charting application.

To begin with, open Flex Builder and create a new project for the Charting stub.

Creating a new Flex project

1. Open Adobe Flex Builder 2.
2. Create a new Flex project > Select basic. > Click OK.
3. Use ajaxflex for the project name.
4. Click Finish.

Once the Flex project is created, the FABridge source must be added to the project build path.

Adding FABridge to your Flex project

Go to project properties Flex Build Path > Source Path > Add Folder:

FABRIDGE_HOME\FABridge_B3_05-08\disc\src

After that, the Flex application stub needs to be created, which we can access through the FABridge. In the root "Application" declaration, we have included two child elements. The first is a reference to the external script file, which ensures that all the relevant libraries are included in the application. The second is a reference to the FABridge component, which will enable us to talk to the Flex movie from JavaScript.

Creating the MXML file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
   <mx:Script source="ajaxflex.as" />
   <bridge:FABridge xmlns:bridge="bridge.*" />
</mx:Application>

Next, you must create the ajaxflex.as file, which is included in the declaration of the Flex application's MXML file.

Creating the ActionScript file

import mx.charts.*;

To create an instance of any given Flex Class from JavaScript, one needs to ensure that the Class name is included in the array variable called refs. For example, to be able to create an instance of a ColumnChart:

public var refs:Array = [ColumnChart]

Since the final compiled SWF file grows as more classes are imported, it is advisable to add only the classes that you need. The final ActionScript file looks something like this:

import mx.core.*;

//charts
import mx.charts.*;
import mx.charts.series.*;
import mx.charts.effects.*;
import mx.charts.series.items.ColumnSeriesItem;

//controls
import mx.controls.*;

//mx graphics
import mx.graphics.LinearGradient;
import mx.graphics.GradientEntry;
import mx.graphics.IFill;

//utils
import flash.utils.Timer;
import flash.utils.clearInterval;

//effects
import mx.effects.*;
import mx.effects.easing.*;
import mx.effects.effectClasses.*;


public var refs:Array = [
  //Charts
  ColumnChart,

  //Series
  ColumnSeries,

  //Axis
  CategoryAxis,
  LinearAxis,

  //Renderer
  AxisRenderer,

  //SeriesEffects
  SeriesSlide,

  //mx.graphics
  LinearGradient,
  GradientEntry,

  //Controls
  Label
]

Now you can save the project and Flex Builder will automatically compile the SWF file by default. You will see the ajaxflex.swf file in the bin folder right away.

Page 2 of 4

Previous Page

Next Page