Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:

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

    The approach I have taken is as follows:

    1. 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.


    Code:
    <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’

    Code:
    <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:

    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:

    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:

    Code:
    <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

  • #2
    Senior Coder nikos101's Avatar
    Join Date
    Dec 2006
    Location
    London
    Posts
    1,008
    Thanks
    59
    Thanked 10 Times in 10 Posts
    Your link is broken



  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •