Directory

← Back

NodeGraphWidget

Node Graph Widget for Vaadin Framework 6.6+

Author

Rating

Popularity

<100

NodeGraph is a component that help you to render easily a graph of connected nodes. It provides an easy way to extends the model to represent customized nodes, an It's connections, drag'n drop nodes and it comes with a predefined set of Nodes.

At this moment it lacks of some features like decorators for connection, automatic layouts to place the nodes automatically on the screen and fully bidirectional synchronization between the client and the server.

All these features will be implemented in a short term.

Dependencies: The NodeGraph Widget has the following dependencies:

Vectomatic Lib 0.5.2 - http://www.vectomatic.org/lib-gwt-svg GWT Drag & Drop 2.6.5 - http://code.google.com/p/gwt-dnd/ FlexJson 2.1 - http://flexjson.sourceforge.net/ GWT Json Wrapper 0.2 - http://code.google.com/p/gwt-jsonwrapper/

Sample code

// = Create the model.
final GraphModel graphModel = GraphModelFactory.getGraphModelInstance();

// = Support for single click to select nodes.
graphModel.setSingleSelectionSupport(Boolean.TRUE);

// = Create some nodes.
Node begin = new BeginNode();

Node splitNode = new SplitNode();

Node nodeA = new DefaultNode();
nodeA.setLabel("NodeA");

Node nodeB = new DefaultNode();
nodeB.setLabel("NodeB");

Node processCreation = new ProcessCreationNode();
processCreation.setLabel("Process");

Node end = new EndNode();

// = Nodes meet nodes!.
final RelationStyle dashedBlue = new DefaultRelationStyle(GraphConstants.DOM.CSS_BLUE_VALUE, 2);
dashedBlue.setDashedStroke(5, 5);

final RelationStyle straightRed = new DefaultRelationStyle();
straightRed.strokeColor(GraphConstants.DOM.CSS_RED_VALUE).strokeWidth(3);

final RelationStyle defaultNormalBlack = new DefaultRelationStyle();

// = Tie all the stuff.
graphModel.connect(begin, splitNode, straightRed);
graphModel.connect(splitNode, nodeA, dashedBlue);
graphModel.connect(splitNode, nodeB, defaultNormalBlack);
graphModel.connect(nodeA, end, RelationTypeEnum.BEZIER);
graphModel.connect(nodeB, processCreation, RelationTypeEnum.BEZIER, new DefaultRelationStyle().strokeColor(GraphConstants.DOM.CSS_GREEN_VALUE));
graphModel.connect(processCreation, end, RelationTypeEnum.LINE);

// = Retrive the model from somewhere...
final GraphModel graphModel = getGraphModel ... ;

// = Create the component and pass the model on its constructor.
final GraphComponent component = new GraphComponent(graphModel);
component.setSizeFull();

// = Add the component to a container...
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
layout.setSpacing(true);
layout.addComponent(component);
public class BeginNode extends CustomNode {

        /**
         * 
         */
        private static final String BEGIN_NODE = "begin";

        /**
         * 
         */
        public BeginNode() {
                super();
                this.setTypeName(BeginNode.BEGIN_NODE);
        }
        
        /**
         * @param pId
         */
        public BeginNode(String pId) {
                super(pId);
        }
        
        /**
         * @param pId
         * @param pTypeName
         */
        public BeginNode(String pId, String pTypeName) {
                super(pId, pTypeName);
        }
}


/**
 * Then in the CSS file.
 */
.custom-node.begin { width: 36px; height: 36px; background: url("images/begin.png"); }
.custom-node.begin.selected { width: 36px; height: 36px; background: url("images/begin-selected.png"); }
.custom-node.begin.enabled { width: 36px; height: 36px; background: url("images/begin-enabled.png"); }

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Some packages refactor and first release.

Released
2011-07-29
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.6+
Browser
Firefox
Google Chrome

NodeGraphWidget - Vaadin Add-on Directory

Node Graph Widget for Vaadin Framework 6.6+ NodeGraphWidget - Vaadin Add-on Directory
NodeGraph is a component that help you to render easily a graph of connected nodes. It provides an easy way to extends the model to represent customized nodes, an It's connections, drag'n drop nodes and it comes with a predefined set of Nodes. At this moment it lacks of some features like decorators for connection, automatic layouts to place the nodes automatically on the screen and fully bidirectional synchronization between the client and the server. All these features will be implemented in a short term. Dependencies: The NodeGraph Widget has the following dependencies: Vectomatic Lib 0.5.2 - http://www.vectomatic.org/lib-gwt-svg GWT Drag & Drop 2.6.5 - http://code.google.com/p/gwt-dnd/ FlexJson 2.1 - http://flexjson.sourceforge.net/ GWT Json Wrapper 0.2 - http://code.google.com/p/gwt-jsonwrapper/
Online