Search Flex Components Free

Custom Search

December 27, 2007

Gantt Charts in Flex

Creat a New mxml file:
ganttChart.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”
http://www.adobe.com/2006/mxml ” layout=”absolute” creationComplete=”onCreationComplete()”>
<mx:Script>
<![CDATA[
import SimpleGanttUtil;
[Bindable]
private var ganttData : XML =
<GanttData>
<series duration=”20″>
<task duration=”2″ start=”0″ title=”Task 1″ />
<task duration=”2″ start=”1″ title=”Task 2″ />
<task duration=”7″ start=”3″ title=”Task 3″ />
<task duration=”5″ start=”8″ title=”Task 4″ />
<task duration=”6″ start=”8″ title=”Task 5″ />
<task duration=”4″ start=”14″ title=”Task 6″ />
<task duration=”3″ start=”17″ title=”Task 7″ />
</series>
</GanttData>;
public function onCreationComplete() : void
{
SimpleGanttUtil.duration =
ganttData.series.@duration ;
dg.dataProvider = ganttData.series.task;
}
]]>
</mx:Script>
<mx:DataGrid top=”0″ left=”0″ right=”0″ bottom=”0″ id=”dg” >
<mx:columns>
<mx:DataGridColumn headerText=”Title”
dataField=”@title” width=”80″/>
<mx:DataGridColumn headerText=”Duration”
dataField=”@start” itemRenderer=”SimpleGanttRenderer”/>
</mx:columns>
</mx:DataGrid>
</mx:Application>


SimpleGanttUtil.as


package
{
public class SimpleGanttUtil
{
public static var duration : Number = 0;
}
}


SimpleGanttRenderer.as


package
{
import mx.core.UIComponent;
import mx.core.IDataRenderer;
import flash.display.Graphics;
import mx.controls.listClasses.IListItemRenderer;
import mx.utils.GraphicsUtil;
import flash.geom.Rectangle;
import SimpleGanttUtil;
import flash.events.Event;
import mx.events.FlexEvent;
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
[Event(name=”dataChange”, type=”mx.events.FlexEvent”)]
public class SimpleGanttRenderer extends UIComponent implements IDataRenderer, IListItemRenderer
{
private var _data : Object = null;
[Bindable(”dataChange”)]
public function get data():Object
{
return _data;
}
public function set data(value:Object):void
{
this._data = value;
this.invalidateProperties();
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
var g:Graphics = graphics;
g.clear();
if ( _data != null)
{
g.lineStyle(1, 0×000000, 1);
g.beginFill(0×443356, .5);
var r:Rectangle = calculateRectangle(w,h);
GraphicsUtil.drawRoundRectComplex(g, r.x, r.y, r.width, r.height, 0, 0, 0, 0);
g.endFill();
}
}
private function calculateRectangle(w:Number, h:Number) : Rectangle
{
var xmlData : XML = XML(_data);
var rect_x : int = 1+ ((w-2) * (
xmlData.@start/SimpleGanttUtil.duration ));
var rect_y : int = 1;
var rect_width : int = (w-0.2) * (
xmlData.@duration/SimpleGanttUtil.duration );
var rect_height : int = h-2;
return new Rectangle( rect_x, rect_y, rect_width, rect_height );
}
}
}

Related Flex Tutorials