1. Getting Started

In this tutorial we'll create a simple JavaFX application containing 2 graph nodes that can be dragged around and connected to each other.

1.1. Prerequisites

First ensure that

• Java 8 is installed.
• The graph editor jars and dependencies are on your classpath.

For more information on how to configure dependencies, see here.

1.2. Create a JavaFX application

To begin with, we need to create an empty JavaFX application.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import de.tesis.dynaware.grapheditor.GraphEditor;
import de.tesis.dynaware.grapheditor.core.DefaultGraphEditor;

public class GraphEditorTutorial extends Application {

    public static void main(final String[] args) {
        launch(args);
    }

    @Override
    public void start(final Stage primaryStage) throws Exception {

        GraphEditor graphEditor = new DefaultGraphEditor();

        Scene scene = new Scene(graphEditor.getView(), 800, 600);

        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

If you run this you should see an empty stage.

1.3. Set a graph model

The graph state is stored in an EMF model. Create a new model instance and set it in the graph editor.

GModel model = GraphFactory.eINSTANCE.createGModel();
graphEditor.setModel(model);

1.4. Add nodes and connectors

Now let's write a method that creates a node with one input and one output connector.

private GNode createNode() {
    
    GNode node = GraphFactory.eINSTANCE.createGNode();

    GConnector input = GraphFactory.eINSTANCE.createGConnector();
    GConnector output = GraphFactory.eINSTANCE.createGConnector();

    input.setType("left-input");
    output.setType("right-output");

    node.getConnectors().add(input);
    node.getConnectors().add(output);

    return node;
}

We'll then write another method to create two nodes and add them to the model.

private void addNodes(GModel model) {

    GNode firstNode = createNode();
    GNode secondNode = createNode();

    firstNode.setX(150);
    firstNode.setY(150);

    secondNode.setX(400);
    secondNode.setY(200);
    secondNode.setWidth(200);
    secondNode.setHeight(150);

    Commands.addNode(model, firstNode);
    Commands.addNode(model, secondNode);
}

Call this method after setting your model in the graph editor, i.e.

GModel model = GraphFactory.eINSTANCE.createGModel();
graphEditor.setModel(model);
addNodes(model);

Start the application and you should see the nodes. Try dragging, resizing, and connecting them together.