Home | AJAX Demos | Java Demos | Products
This is an example of a Process Flow Diagram (PFD) editor written entirely in Java that may be run inside a browser or as a stand-alone Java application.
The PFD editor allows the user to
create a process flow diagram by placing and connecting process
and attaching data sources for real-time updates. The flow diagram
updated with data while it is being edited.
The saved diagram may be loaded into a simple viewer which displays the diagram and updates it with live data. The viewer may be either a Java applet, or a server-side AJAX component that uses the GLG Graphics Server.
The flow diagram can be extended by adding custom connectivity rules
and other application-specific features. Click
here for more information.
for the description
of the demo features and details of the User Interaction.
Click here to view the source code.
The GLG Demo Download contains the C/C++ version of the Process Flow Diagram Editor.
Applet Source Code
The Process Flow Diagram Editor provides a sample implementation of the following features:
Allows creating objects by selecting them from a palette. To create objects, click on the icons in the palette, then click in the drawing to position an object.
There are two modes for creating nodes and links. In the default creation mode, the edition mode is restored to the Selection mode after creating each node or link. To create several nodes, the user has to click on a node icon each time before clicking in the drawing to position the node.
The Creation Mode toolbar button toggles between the default creation mode and the "sticky" creation mode.
In the "sticky" mode, the creation mode stays active to allow the user to create several nodes or links in a row by repeatedly clicking in the drawing area, without a need to click on the node or link icon each time. To finish creating objects, click on the "Select" icon or disable the "sticky" mode using the Creation Mode toolbar button.
Two kinds of objects are provided: node objects and edge (connector) objects. To connect two nodes, select the edge type from the palette, then select two nodes in the drawing. Keep selecting nodes to create more then one connector object.
The demo uses custom data to keep track of what nodes are connected. This may be used for traversing connected nodes, etc.
Press the Select button in the Object palette to activate editing mode. In editing mode, you can move the object with the mouse, edit its properties and perform other editing operations using the toolbar buttons. Both nodes and edges can be edited.
The name (or other properties) of the selected objects are displayed in the selection display area at the bottom.
Prompts and error messages are displayed in the message area at the bottom.
The Properties toolbar button may be used to popup the Properties Dialog for the selected object. In this demo custom data properties associated with the objects are edited, but the graphical properties (colors, etc.) may be edited in the same way using color palettes, etc. The custom data are attached to the object and are automatically saved with the drawing.
The Data Source field of the Properties dialog may be used to define the data source of live data to update the graphical icon in the drawing. For example, a data source providing a tank level may be associated with a tank object to display changing data from a live data source. The objects in the diagram may be updated as they are edited.
The Select button next to the Data Source field of the Properties dialog brings the list of available data sources to choose from. In an application, the list of the data sources may be queried from a process database or a PLC.
Position a mouse over any button to display a tooltip
The demo source code shows two ways of saving the drawing:
Generates a PostScript file for the stand-alone version of the demo. Java printing may also be used. For an applet, the browser's print button may be used for printing.