Home | AJAX Demos | Java Demos | Products

Java Diagram Editor Example

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

Description of Features and User Interaction

The Diagram Editor provides a sample implementation of the following features:

  • Object Palette
  • Node and Edge Objects
  • Modality
  • Connectivity Information
  • Object Selection and Editing
  • Selection Feedback
  • Prompt Area
  • Properties Editing and Attaching Custom Data
  • Cut and Paste
  • Zooming, Scrolling and ZoomTo Features
  • Automatic Tooltips on mouse over
  • Saving the Drawing and Traversing Object Data
  • PostScript Printing
    •

    Object Palette

    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.

    Modality

    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.

    Node and Edge Objects

    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.

    Connectivity Information

    The demo uses custom data to keep track of what nodes are connected. This may be used for traversing connected nodes, etc.

    Object Selection and Editing

    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.

    Selection Feedback

    The name (or other properties) of the selected objects are displayed in the selection display area at the bottom.

    Prompt Area

    Prompts and error messages are displayed in the message area at the bottom.

    Properties Editing and Attaching Custom Data

    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.

    Cut and Paste (Cut and Paste toolbar buttons)

    Zooming, Scrolling and ZoomTo Features

  • The ZoomIn/ZoomOut buttons and a zoom slider may be used for zooming.
  • The 100% button restores initial zooming.
  • To zoom to an area, press the ZoomTo button, then select a rectangle to zoom to (click, drag, then release the mouse).
  • Scrollbars on the side of the drawing may be used for scrolling.

    • Automatic Tooltips

    Position a mouse over any button to display a tooltip

    Saving the Drawing and Traversing Object Data (Save toolbar button)

    The demo source code shows two ways of saving the drawing:

  • Saving the drawing file
  • Traversing all objects and saving only the data associated with the objects (the default in the demo). In the demo, saved information is also printed on the Java Console.
    •

    Loading a Previously Saved Drawing (Insert toolbar button)

    PostScript Printing (Print toolbar button)

    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.