|By Jon Wojtowicz
| Download Source Code|
|While working on a project
tracking application the client wanted a graphical means of
creating task flows for projects. Originally this was to be
accomplished using Macromedia Flash. Not being a real fan of
Flash, I decided to see if I could create a designer using only
DHTML in Internet Explorer.
|I started out by deciding
what constitutes a task flow. Obviously it is a series of tasks
defined in sequence, it is also a connected graph of tasks. It
can even be thought of as a hierarchical set of tasks. With this
knowledge I decided to implement the data as XML. This would
allow me to persist the task graph and reconstitute in the
browser using a client side XmlDocument object.
|One of the major issues
would be creating connecting lines in the browser. I wanted to
avoid any third party plug-ins so SVG was out of the question. I
came across a little known feature in Internet Explorer, VML.
VML stands for Vector Markup Language and was Microsoft's
recommendation for enabling graphics in the browser. Microsoft
implemented it in Internet Explorer but it was not approved by
the W3C. This little gem solved my problem of drawing lines.
|The initial view of the
designer can be seen in Figure 1. The left side of the screen
holds the palette of available tasks. Each task can be selected
and dragged onto the mapping surface and released. This will
open a dialog where additional information can be added. See
Figure 2 for the dialog view. he dialog information can be saved
or cancelled if you do not want the information.
| After the dialog is
dismissed, you will see the task on the mapping surface. Drag a
second task onto the mapping surface and release. Dismiss the
dialog. to connect the two tasks, select the first task and it
will change. When you select a second task a line will be drawn
connecting the two tasks. Notice the second task is now
highlighted. If you click on another task in the mapping surface
it will be connected to this task. This features allow you to
drag your tasks onto the designer and connect them in sequence. See Figure 3 for a view of the designer with connected tasks.
|To delete a connecting
line, right click on the line and select Delete. You can also
remove tasks by right clicking on a task and selecting Delete.
|Hitting the Save button
will display the resultant XML describing the graph. By loading
the XML data island in the document with the XML, the graph will
reconstitute itself in the mapping area.
|This designer can be made
into a dynamic page to load the task from a data source and
persist the graph information. It is a great tool for creating
work flows in your project.
|Please note this designer only works with
Internet Explorer 5.5 and above.
|Last Update: 6/26/2005