Tutorial 3: Create a Custom Node Type

This tutorial shows how to define a custom node class that inherits CompositeNode and adds several new properties. Its appearance is defined using an XML template.

1. Right-click the project in Package Explorer and choose New -> Other from the context menu. Create a new XML file called OrgChartNode.xml and add the following template code to it.

Xml

<SimplePanel>    <Shape Name="Shape" Shape="Rectangle" />    <Border Padding="2">
        <GridPanel>
            <GridPanel.Columns>
                <GridColumn Width="30" />
                <GridColumn />
            </GridPanel.Columns>
            <GridPanel.Rows>
                <GridRow />
            </GridPanel.Rows>            <Image Name="Image" />            <StackPanel Orientation="Vertical" GridColumn="1">
                <Text Name="Title" Font="Arial-6" TextAlignment="Near" />
                <Text Name="FullName" Font="Arial-4" TextColor="Blue" TextAlignment="Near" />
                <Text Name="Text" Font="Arial-4" TextAlignment="Near" />
            </StackPanel>
        </GridPanel>
    </Border></SimplePanel>

2. Add to the project a new class called OrgChartNode. Make it derive from CompositeNode.

Java

import java.awt.*;
import java.io.*;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.Document;
import com.mindfusion.diagramming.*;
import com.mindfusion.diagramming.components.*;
import com.mindfusion.diagramming.components.TextComponent;

public class OrgChartNode extends CompositeNode
{
    static Document xmlTemplate = loadXmlFile("OrgChartNode.xml");

    public OrgChartNode(Diagram diagram)
    {
        super(diagram);
    }

    private ShapeComponent shape;
    private ImageComponent image;
    private TextComponent title;
    private TextComponent fullName;
    private TextComponent text;
}

3. In the constructor, load from the XML template using XmlLoader, and assign references to individual components using findComponent:

Java

// create components from XML template
getComponents().add(XmlLoader.load(xmlTemplate, null, null));// find components by name
shape = (ShapeComponent) findComponent("Shape");
image = (ImageComponent) findComponent("Image");
title = (TextComponent) findComponent("Title");
fullName = (TextComponent) findComponent("FullName");
text = (TextComponent) findComponent("Text");

// customize appearance
title.getTextFormat().setHorizontalAlign(Align.Near);
fullName.getTextFormat().setHorizontalAlign(Align.Near);
text.getTextFormat().setHorizontalAlign(Align.Near);
shape.setIsOutline(true);
setFill(new SolidBrush(Color.WHITE));
setStroke(new Pen(0.5f, Color.BLACK));

4. Define custom properties that delegate their implementation to the components loaded from the template.

Java

public Pen getStroke()
{
    return shape.getPen();
}public void setStroke(Pen value)
{
    shape.setPen(value);
    this.repaint();
}public Brush getFill()
{
    return shape.getBrush();
}public void setFill(Brush value)
{
    shape.setBrush(value);
}public Image getImage()
{
    return image.getImage();   
}public void setImage(Image value)
{
    image.setImage(value);
}public String getTitle()
{
    return title.getText();
}public void setTitle(String value)
{
    title.setText(value);
}public String getFullName()
{
    return fullName.getName();
}public void setFullName(String value)
{
    fullName.setText(value);
}public String getText()
{
    return text.getText();
}public void setText(String value)
{
    text.setText(value);
}

5. Add a Diagram and DiagramView to the JFrame cosntructor.

Java

Diagram diag = new Diagram();
DiagramView view = new DiagramView();
view.setDiagram(diag);
JScrollPane scrollPane = new JScrollPane(view);
scrollPane.setVisible(true);
getContentPane().add(scrollPane);

6. Add a few instances of the OrgChartNode class.

Java

// create first OrgChartNode
OrgChartNode node1 = new OrgChartNode(diag);
node1.setStroke(new Pen(0.5f, Color.RED));
node1.setBounds(20, 10, 80, 40);
node1.setTitle("CEO");
node1.setFullName("John Smith");
node1.setText("Our beloved leader.\n" +
    "The CEO of this great corporation.");
node1.setImage(loadImage("image1.png"));
diag.add(node1);// create second OrgChartNode
OrgChartNode node2 = new OrgChartNode(diag);
node2.setBounds(60, 60, 80, 40);
node2.setTitle("CIO");
node2.setFullName("Bob Smith");
node2.setText("The CIO of this great corporation.");
node2.setImage(loadImage("image2.png"));
diag.add(node2);// create connector
diag.getFactory().createDiagramLink(node1, node2);

7. Build and run the project. You should see the custom nodes rendered like this: