Home | AJAX Demos | Java Demos | Products
This is an example of a diagraming editor written entirely in Java using the GlgBean and GLG Extended API. It may be run inside a browser or as a stand-alone Java application.
The user interface of the editor was built using the GLG Graphics Builder. For more complex application, this may be changed to use any standard Java GUI builders and IDEs, with the GlgBean used to handle just the graphics in the drawing area.
Click here 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 Diagram Editor Demo.
Applet Source Code
The 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.
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.