Archive for December, 2008

CheckBoxTree Component (Adobe Flex 3)

8 Comments »

Build­ing on already avail­able Check­Tree ren­der­ers, here is the first release (0.1)  of the Check­Box­Tree com­po­nent. Sup­ports three state items i.e. “checked”, “unchecked”, “schro­dinger” and it has a basic search func­tion implemented.

Sam­ple code:

<inputs:CheckBoxTree width="480" height="320" title="Indian Subcontinent">
<inputs:dataProvider>
<mx:XMLListCollection>
<mx:source>
<mx:XMLList xmlns="">
<node state='checked' label='All' value='1'/>
<node state='unchecked' label='Afghanistan' value='2'/>
<node state='unchecked' label='Bangladesh' value='3'/>
<node state='unchecked' label='Bhutan' value='4'/>
<node state='unchecked' label='India' value='91'>
<node state='unchecked' label='Jammu and Kashmir' value='10'/>
<node state='unchecked' label='Himachal Pradesh' value='11'/>
<node state='unchecked' label='Punjab' value='12'/>
<node state='unchecked' label='Haryana' value='13'/>
<node state='unchecked' label='Uttaranchal' value='14'/>
</node>
<node state='unchecked' label='Nepal' value='5'/>
<node state='unchecked' label='Pakistan' value='6'/>
<node state='unchecked' label='Sri Lanka' value='7'/>
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
</inputs:dataProvider>
</inputs:CheckBoxTree>

A quick screen shot..
CheckBoxTree component Again, all code self explana­tory. Proper doc­u­men­ta­tion will fol­low when advanced fea­tures will be intro­duced into the component.

 What’s next?
– Select all, Clear all fea­tures
– Sup­port for mul­ti­ple dat­aProviders
– getCheckedItems(), setCheckedItems() meth­ods etc.

 Demo | Source code (Zip 6kB)


MultiChart Component (Adobe Flex 3)

1 Comment »

Worked on a chart­ing com­po­nent for Adobe Flex 3. The idea behind the com­po­nent is to cre­ate one sin­gle object, spec­ify a sin­gle dat­aProvider and have 6 dif­fer­ent charts gen­er­ated. Sim­ple, rou­tine stuff.

<visualizations:MultiChart id="multiChart" width="640" height="480"
backgroundColor="#ffffff" title="Default chart title" legendHeight="40"/>

[Bindable]
public var dataArrayCollection:ArrayCollection = new ArrayCollection;
public function creationCompleteHandler():void {
dataArrayCollection.addItem(new ArrayCollection([{"x":115, "y":120, "z":125, label: "Series1.1"},{"x":215, "y":220, "z":225, label: "Series1.2"},{"x":215, "y":220, "z":225, label: "Series1.3"}]));
dataArrayCollection.addItem(new ArrayCollection([{"x":415, "y":420, "z":425, label: "Series2.1"},{"x":15, "y":520, "z":525, label: "Series2.2"},{"x":615, "y":620, "z":625, label: "Series2.3"}]));
dataArrayCollection.addItem(new ArrayCollection([{"x":75, "y":75, "z":75, label: "Series3.1"},{"x":45, "y":50, "z":235, label: "Series3.2"},{"x":324, "y":654, "z":345, label: "Series3.3"}]));
multiChart.dataProvider = dataArrayCollection;
multiChart.refresh();
}

A few screens..

This is the first release so there isn’t any real doc­u­men­ta­tion avail­able, but there is a demo, an exam­ple and the source code. It should really be self explana­tory at this stage. One thing, the object needs to be refreshed [refresh()] after chang­ing the dat­aProvider. It has been left like this on purpose.

What’s next?
– Smart leg­ends
– Timer based chart switcher
– Expos­ing more chart, axis, leg­end, panel styles to the user
– Themes.. etc.

Demo | Source Code (Zip 22kb)