Tutorial 4: Custom Nodes Integration

This tutorial builds upon the OrgChartNode type from Tutorial 3. It shows how to fully integrate the custom type with other JDiagram features, such as serialization, undo support, creating nodes by drag-and-drop or drawing with the mouse on the canvas.

1. Add a NodeListView to the frame and add a few OrgChartNode objects as its children:

Java

// create a NodeListView
NodeListView nodeList = new NodeListView();
nodeList.setSize(110, 800);
nodeList.setDefaultNodeSize(new Dimension(80,40));
nodeList.setIconSize(new Dimension(60, 30));
nodeList.setIconMargin(new Dimension(5, 5));
getContentPane().add(nodeList, BorderLayout.WEST);

// add nodes to list view
OrgChartNode orgNode = new OrgChartNode(diagram);
orgNode.setTitle("CEO");
orgNode.setFullName("Type here");
orgNode.setText("Chief executive officer");
orgNode.setImage(loadImage("image1.png"));
nodeList.addNode(orgNode);

orgNode = new OrgChartNode(diagram);
orgNode.setTitle("CIO");
orgNode.setFullName("Type here");
orgNode.setText("Chief information officer");
orgNode.setImage(loadImage("image2.png"));
nodeList.addNode(orgNode);

2. Add a copy constructor to the OrgChartNode class. The control throws an exception if you try to create via drag-and-drop an instance of a class without copy constructor:

Java

public OrgChartNode(OrgChartNode prototype)
{
    super(prototype);
    findComponents();
}

void findComponents()
{
    // find components by name
    shape = (ShapeComponent) findComponent("Shape");
    image = (ImageComponent) findComponent("Image");
    title = (TextComponent) findComponent("Title");
    fullName = (TextComponent) findComponent("FullName");
    text = (TextComponent) findComponent("Text");
}

3. In order to enable drawing OrgChartNodes with the mouse, inherit the LinkNodesBehavior and override its createNode method. You could also inherit BehaviorBase or any of its derived classes, and override either createNode or startDraw:

Java

public class OrgChartBehavior
    extends LinkNodesBehavior
{
    protected OrgChartBehavior(DiagramView diagramView)
    {
        super(diagramView);
    }

    @Override
    protected DiagramNode createNode()
    {
        return new OrgChartNode(getDiagram());
    }
}

4. Assign an instance of the behavior class to the CustomBehavior property of the DiagramView class:

Java

// enable drawing OrgChartNodes with the mouse
view.setCustomBehavior(new OrgChartBehavior(view));

5. To implement serialization support, add an empty constructor to the node class. Since all custom properties simply delegate to the components hosted in base CompositeNode class, you don't have to override serialization methods such as saveToXml and loadFromXml methods in this instance. However you will have to recreate the references to components loaded by the base class by overriding onLoad:

Java

// empty constructor required for deserialization
public OrgChartNode()
{
}

@Override
protected void onLoad(Diagram diagram)
{
    super.onLoad(diagram);
    findComponents();
}

6. Call the static registerItemClass method to assign an XML element name to the custom item type:

Java

Diagram.registerClass(OrgChartNode.class, "my:OrgChartNode", 1);

7. In order to enable undo / redo of changes done on OrgChartNode, create a DiagramItemProperties -derived class that contains member corresponding to the additional properties defined by OrgChartNode:

Java

public class OrgChartNodeProperties
    extends DiagramNodeProperties
{
    String Title;
    String FullName;
    String Text;
    Pen Stroke;
    Brush Fill;
    Image Image;
}

8. Override the createProperties, saveProperties and restoreProperties methods:

Java

@Override
protected DiagramItemProperties createProperties()
{
    return new OrgChartNodeProperties();
}

@Override
protected void saveProperties(DiagramItemProperties props)
{
    super.saveProperties(props);

    OrgChartNodeProperties state = (OrgChartNodeProperties)props;
    state.Title = getTitle();
    state.FullName = getFullName();
    state.Text = getText();
    state.Stroke = getStroke();
    state.Fill = getFill();
    state.Image = getImage();
}

@Override
protected void restoreProperties(DiagramItemProperties props)
{
    super.restoreProperties(props);

    OrgChartNodeProperties state = (OrgChartNodeProperties)props;
    setTitle(state.Title);
    setFullName(state.FullName);
    setText(state.Text);
    setStroke(state.Stroke);
    setFill(state.Fill);
    setImage(state.Image);
}

9. The full source code for this tutorial is available in the Samples/Tutorial4 subfolder under the JDiagram installation folder.