JViews Demo: Ajax Diagram Editing

The following is an interactive, web based Ajax Diagram Editing demo built with JViews Enterprise. 

How to Use This Demo

This sample allows you to select, move, add, remove, and edit the properties of one or several nodes of a diagram. As the model is stored in the session, these changes will be valid throughout the user session.

How to Use the Sample

Select and Move a Node

To select a node, choose the select interactor ( in the toolbar) and click the desired node.

To select several nodes, press the Ctrl key while clicking a node to add it to the current selection.

To move nodes, select them, then drag the selection to the desired location.

Edit Properties

If only one node is selected, its properties are displayed.

• To edit a property, click the value field of the desired property. A text box will appear to edit the value.
• To add a property, click the of the property sheet. Enter the name. A new row is added and can be edited.
• To remove a property, select it and click the of the property sheet.
• When done, the changes can be sent to the sent server through the button or cancelled through the button. Any uncommitted change will be lost.

Create a Node or a Link

To create a new node, select the desired type of node in the toolbar and click the desired position on the view.

To create a new link, select the link in the toolbar and click the desired node on the view. Without releasing the mouse button, drag the pointer to the second node to be linked, then release the mouse button.

Other actions

To layout the diagram, click the or button in the toolbar to, respectively, layout all the nodes or only the selected ones.

To delete one or several nodes or links, select them, then click the button in the toolbar.

To move a selection link from one node to another node, select one link, then move the mouse over start handle or end handle of the selection link, then drag the handle to another node.

To reshape the selection link, select one link, then move the mouse over one middle handle, drag the handle can reshape the link.

To add or remove a handle for the selection link, press alt key while move the mouse over one handle or over the selection link, then drag the mouse, then it can remove or add one handle for the link.