Library providing dynamic connector capabilities to Google Web Toolkit (GWT) applications.

Click to see demo.

Click to see presentation.

Questions?

If you have any questions, please post them on http://groups.google.com/group/gwt-connectors and I will try to answer them.

Using the library you will be able to:

• Draw connections between shapes.
• Change shape of the connection by dragging its sections.
• Keep shapes connected (glued) while you move them around.
• Add text to connections.
• Add decorations to the connections (such as arrows).

"Hello World" example:

package pl.tecna.gwt.connectors.example.client;

import pl.tecna.gwt.connectors.client.Connector;
import pl.tecna.gwt.connectors.client.Diagram;
import pl.tecna.gwt.connectors.client.Shape;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

public class ConnectorsExample implements EntryPoint {

	public void onModuleLoad() {
		
		// Create boundary panel
		AbsolutePanel boundaryPanel = new AbsolutePanel();
		boundaryPanel.setSize("600px", "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 image = new Image("http://code.google.com/images/code_sm.png");
		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];

    	    	Connector image2label = new Connector
    					(imageConnectionPoint.getAbsoluteLeft(),
    	    	    	    	    	 imageConnectionPoint.getAbsoluteTop(),
    	    	    	    	    	 labelConnectionPoint.getAbsoluteLeft(),
    	    	    	    	    	 labelConnectionPoint.getAbsoluteTop());

    	    	image2label.startEndPoint.glueToConnectionPoint(imageConnectionPoint);
    	    	image2label.endEndPoint.glueToConnectionPoint(labelConnectionPoint);

    	    	image2label.showOnDiagram(diagram);

	}
}