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.

Developing Rich Interactive Applications

We at Quadyne Technologies were comtemplating how to make our product UI elegant, simple to use and yet appealing to the user. The basic need of our product Continuum was to show different windows which contains different aspects of the product like document explorer, task management, notes, search window. But we wanted to keep ourselves away from the standard HTML/DHTML form of screens where there is a menu displayed on the left-hand-side and when the user clicks a menu, the right-hand-side changes. We wanted innovative menu. Something the user can use with ease at the same time giving him a rich experience. No more clicking on menus.. no more drilling down page navigation. Our motto was "Keep It Simple". This is were we found Laszlo useful. The whole UI is rendered in Flash. We now have an intuitive user interface. The user can have multiple windows open so navigation is simply a matter of looking at another window.

Using Laszlo, we now have a easy to use, flash-based interface. There are multiple windows like document explorer window where the user can navigate folders and see his document. There is a task management window where the user can see his pending tasks and create new tasks. There is a search window where the user can search for his documents. There is a notes window where he can scribble notes and these get saved in the system. All these windows are now wonderfully integrated with ease and minimal coding. Laszlo separates the data from the UI. This makes the development and testing quick and easy. The local dataset definition is useful in quickly developing the UI. Also it is very well documented.

Our overall experience with Laszlo has been very good. It has helped us develop our product for managing unstructured information very quickly and efficiently.