Need help in creating a scheduling application

Hi guys, I am developing a prototype of a scheduling application with the following features:

1. Gantt chart for displaying tasks
a. Tasks ‘width’ denotes the duration, and is resizable.
b. Draggable horizontally –to change start date etc.

2. Dependency Lines between different tasks.

Screenshot:http://learn.thapliyal.net/flex/screenshot.jpg

The sample and code (view source enabled) available at: http://learn.thapliyal.net/flex/taskChartsMin.html

The approach I have taken is as follows:


Grouped AdvancedDataGrid with all the tasks entries. User can update task data and also collapse / expand the task nodes. The Gantt chart also gets updated on any change in the ADG. The data is populated from an XML file.


<mx:AdvancedDataGrid id="SchTable" editable="true" width="100%" height="100%" groupRowHeight="25" >
<mx:dataProvider>
<mx:GroupingCollection id="TaskGroup" source="{SchdDataArray}">
<mx:grouping >
<mx:Grouping >
<mx:GroupingField name="scheduleid"/>
</mx:Grouping>
</mx:grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:groupedColumns >
<mx:AdvancedDataGridColumn dataField="taskname" headerText="Task Name" />
<mx:AdvancedDataGridColumn dataField="taskid" headerText="taskid" />
<mx:AdvancedDataGridColumn dataField="duration" headerText="Duration" />
<mx:AdvancedDataGridColumn dataField="schedstart" headerText="schedstart" />
</mx:groupedColumns>
</mx:AdvancedDataGrid>



2. For the Gantt chart (task bars) I have the following code in a ‘Tilelist’

<mx:TileList id="taskTileList" dataProvider="{ SchTable.dataProvider }" itemRenderer="ItemRenderers.ganttMin" x="0" y="58" height="800" width="100%" rowHeight="25" columnWidth="1500" borderStyle="none" selectable="false" useRollOver="false" />

Here ganttMin is a component with the following code:

<objecthandles:ObjectHandles updateComplete="updateValues(event)" id="taskGraphic" allowRotate="false" allowVMove="false" allowHMove="true" allowVResize="false" allowHResize="true" width="{taskDuration}" height="12" x="{startDate}" >
<mx:Box toolTip="" width="{taskGraphic.width}" styleName="Task" height="{12}" x="0" y="0" />
</objecthandles:ObjectHandles>


I have used Mark’s ‘flex-object-handles’ here for resizing/dragging the task bar.

3. For drawing ‘dependency lines’ I have a repeater with the following code:

<mx:Repeater id="dependencyRep" x="0" y="0" dataProvider="{ constraintsDataArray }" >
<ns2:depLinesCompMin id="depLineComp" borderColor="red" borderStyle="solid" borderThickness="1" data="{dependencyRep.currentItem}">
</ns2:depLinesCompMin>
</mx:Repeater>


And the dependency line component (depLinesCompMin) code is:

<Surface click="connectorStroke.color='red';" remove="Alert.show('Text Copied!', 'Alert Box', Alert.OK);" >
<GeometryGroup>
<filters><mx:DropShadowFilter alpha=".5" distance="2" /></filters>
<strokes><SolidStroke id="connectorStroke" color="#000000" weight="1" alpha="1" /></strokes>
<fills>
<SolidFill color="red" id="redFill" />
<SolidFill color="black" id="blackFill" />
</fills>
<Circle radius="2" fill="{redFill}" stroke="{connectorStroke}" id="startPointDot" centerX="{data.fromO.endX}" centerY="{data.fromO.startY + 8}" />
<Polygon id="endPointDot" stroke="{connectorStroke}" fill="{blackFill}" x="{data.toO.startX}" y="{data.toO.startY -6}" >
<points>
<GraphicPoint x="0" y="0" />
<GraphicPoint x="8" y="0" />
<GraphicPoint x="4" y="4" />
</points>
<filters><mx:DropShadowFilter alpha=".5" distance="2" /></filters>
</Polygon>
<Line x="{data.toO.startX+3}" x1="{data.toO.startX+3}" y="{data.toO.startY-3}" y1="{data.toO.startY -8}" stroke="{connectorStroke}"/>
<Line x="{startPointDot.centerX}" x1="{startPointDot.centerX + 15}" y="{startPointDot.centerY}" y1="{startPointDot.centerY}" stroke="{connectorStroke}"/>
<Line x="{startPointDot.centerX + 15}" x1="{startPointDot.centerX + 15}" y="{startPointDot.centerY}" y1="{endPointDot.y-2}" stroke="{connectorStroke}"/>
<Line x="{startPointDot.centerX + 15}" x1="{endPointDot.x+3}" y="{endPointDot.y-2}" y1="{endPointDot.y-2}" stroke="{connectorStroke}"/>
</GeometryGroup>

</Surface>



Since I am new to flex programming I am struck with lots of issues in the dependency lines:

1. Is this the right way to create the dependency lines, or do you suggest something else?

2. On collapse of items the dependency lines do not hide.

3. On sorting of table columns the dependency lines do not get properly drawn.

I would highly appreciate if you could suggest me the workaround.

Thanks a lot

Your link is broken