// Create boundary panel
AbsolutePanel boundaryPanel = new AbsolutePanel();
boundaryPanel.setSize("800px", "400px");
RootPanel.get().add(boundaryPanel, 10, 10);
Diagram diagram = new Diagram(boundaryPanel);
boundaryPanel.add(new Label("Connectors example"), 10, 2);
// Add connectors
Connector connector1 = new Connector(50, 80, 100, 100);
connector1.showOnDiagram(diagram);
Connector connector2 = new Connector(350, 200, 270, 80);
connector2.showOnDiagram(diagram);
Connector connector3 = new Connector(450, 120, 500, 80);
connector3.showOnDiagram(diagram);
// Add some elements that can be connected
Label label = new Label("LABEL");
image.setSize("100px", "100px");
HTML html = new HTML("<b>HTML<br>ELEMENT</b>");
boundaryPanel.add(label, 50, 270);
boundaryPanel.add(image, 180, 250);
boundaryPanel.add(html, 450, 250);
Shape shapeForLabel = new Shape(label);
shapeForLabel.showOnDiagram(diagram);
Shape shapeForImage = new Shape(image);
shapeForImage.showOnDiagram(diagram);
Shape shapeForHtml = new Shape(html);
shapeForHtml.showOnDiagram(diagram);
// If you want to have some elements already connected
//ConnectionPoint imageConnectionPoint = shapeForLabel.connectionPoints[Shape.E];
//ConnectionPoint labelConnectionPoint = shapeForImage.connectionPoints[Shape.W];
ConnectionPoint imageConnectionPoint = shapeForLabel.connectionPoints.get(1);
ConnectionPoint labelConnectionPoint = shapeForImage.connectionPoints.get(1);
Connector image2label = new Connector(imageConnectionPoint.getAbsoluteLeft(),
imageConnectionPoint.getAbsoluteTop(),
labelConnectionPoint.getAbsoluteLeft(),
labelConnectionPoint.getAbsoluteTop());
image2label.startEndPoint.glueToConnectionPoint(imageConnectionPoint);
image2label.endEndPoint.glueToConnectionPoint(labelConnectionPoint);
image2label.showOnDiagram(diagram);