Using Open Flash Charts in Flex 3.0

By now Continuum was finding, collating and storing data from various sources like emails, web pages, documents, presentations and spreadsheets. What we needed now was a capability to analyze this information and display it as charts or graphs. This would make Continuum a decision making tool rather than just a traditional DMS. The upper management, who is short on time, likes to see data in colourful, neat charts and graphs rather than long list of numbers.

We looked at a few open source and licensed tools for this. Finally we settled with Open Flash Charts. Its a open source project under GNU/GPL license. It supports line, bar, pie and area charts. To use it, you simply need to include the Open Flash Chart in your HTML, and provide the data file on the server. We got the Open Flash Chart working in HTML but the glitch came when we tried to integrate it with Flex 3.0.

Being new to Flex, our first instinct was to use SWFLoader to load the swf file of Open Flash Chart (OFC). So we used the following code:

<mx:SWFLoader id="ldr" x="36" y="232" source="./open-flash-chart.swf" autoLoad="true" width="734" height="272" complete="initNestedProps(event)"/>

public function loadData():void{
sysMgr.application["width"] = "300";
sysMgr.application["height"] = "300";
sysMgr.application["data"] = "/continuum/chart-data-files/test.txt";
}

public function initNestedProps(event:Event):void{
sysMgr = SystemManager(event.target.content);
}

This throws the classic Error #1034: Type Coercion failed: cannot convert flash.display::AVM1Movie@c223201 to mx.managers.SystemManager.

We realized that OFC is in Flex 2.0 (AS2) which means the display object is AVM1Movie and not a MovieClip as expected by Flex 3.0 (AS3).

Trying to convert the loader.Content to MovieClip fails as well.

The next logically step was to try using Loader class.
So we tried the following code:
var loader:Loader = new Loader();
loader.load(new URLRequest("AS2animation.swf "));
addChild(loader);
This doesn't work either. It gives error for addChild.

After searching the net and digging deeper, we found that the simple solution is to use "this.rawChildren.addChild(loader)" instead of addChild(loader). Apparently when you need to add something to a subclass of UIComponent which doesn't extend a flex display class you need to use rawChildren.addChild.

Finally we have beautiful charts being shown in Flex 3.0 UI.
...OFC and Flex rock!

Help me... Stuck with checkbox in Flex!

We recently switched from OpenLaszlo to Flex to implement the UI for Continuum. Let me just start by saying that Flex UI is very clean. It doesn't depend on browser and the script is much like Java. So far so good!

To play around with Flex, we started with creating a window in the browser. The aim was to get acquainted with Flex. Creating windows was easy. Now came the tough part, moving and resizing the window. Here comes the first hiccup! Everybody starts to type in keywords frantically on Google. The question was how to build resizable and draggable in Flex. Then suddenly I heard a excited voice "Got it". Somebody had found some help. Here is the URL from Flex team Creating Resizable and Draggable components in Flex

Now the next thing to set a checkbox as per the data in the dataset. We are still stuck at this.

The checkbox is not enabling or disabling as per the value set in the dataset.
Can somebody please tell me whats wrong...?

<mx:XMLList id="gridData" xmlns="">
<contents>
<content check="false" name="test1.txt" size="2100" dateOfModified="01/Apr/2008" modifiedBy="kirana"/>
<content check="false" name="test2.txt" size="2100" dateOfModified="01/Apr/2008" modifiedBy="kirana"/>
<content check="false" name="test4.txt" size="2100" dateOfModified="01/Apr/2008" modifiedBy="kirana"/>
</contents>
</mx:XMLList>

<mx:DataGrid dataProvider="gridData">
<mx:DataGridColumn headerText="Select?">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="{data.@check}" selectedField="@check"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:DataGrid>

Any help is appreciated!

Taking a step further.. moving on to Flex!

We started our UI development with the aim of keeping it simple, easy to use at the same time providing a rich experience to the user. So we moved away from standard HTML/DHTML and adopted Laszlo. Laszlo worked fine for us. But our core value "Achieve beyond Excellence" pushed us to improve the experience of the user even more.

Keeping this in mind, we are now considering adopting Flex. Laszlo is good for smaller, niche projects. We felt that Flex might be better for enterprise grade applications. It has better support from Adobe. It allows building highly interactive, expressive web applications. It has short development cycle and better performance. Flex also includes a rich component library with more than 100 proven, extensible UI components for creating rich Internet applications (RIAs), as well as an interactive Flex application debugger.

Taking a step further to provide a rich experience to the user, we are now porting Continuum to Flex.