Draw2D Application

2.3. Draw2D Application

Since the full Eclipse RCP framework is not needed to use the Draw2D framework, we create a simple Java class containing a main(...) method.

package com.qualityeclipse.genealogy.view;

import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

public class GenealogyView
{
   public static void main(String[] args) {
      new GenealogyView().run();
   }
}

Tip

All of this source can be downloaded from www.qualityeclipse.com.

The main(...) method calls a run() method to initialize the shell, create the diagram, and show the shell. The run() method is not interesting with respect to Draw2D and is included here only for completeness. For more information on SWT and shells, please see the Eclipse Plug-ins book.

private void run() {
   Shell shell = new Shell(new Display());
   shell.setSize(365, 280);
   shell.setText("Genealogy");
   shell.setLayout(new GridLayout());

   Canvas canvas = createDiagram(shell);
   canvas.setLayoutData(new GridData(GridData.FILL_BOTH));

   Display display = shell.getDisplay();
   shell.open();
   while (!shell.isDisposed()) {
      while (!display.readAndDispatch()) {
         display.sleep();
      }
   }
}

The run() method calls the createDiagram(...) method to create and populate the diagram. This method creates a root figure to contain all of the other figures in the diagram (see Chapter 4 on page 27 for more about figures). A simple layout manager (see Chapter 5 on page 55 for more about lay out managers) is used to statically lay out the figures that are added later in this section. Finally, the last bit of code creates a Canvas on which the diagram is displayed and a LightweightSystem used to display the diagram (see Section 3.1 on page 21 for more about LightweightSystem).

private Canvas createDiagram(Composite parent) {

   // Create a root figure and simple layout to contain
   // all other figures
   Figure root = new Figure();
   root.setFont(parent.getFont());
   XYLayout layout = new XYLayout();
   root.setLayoutManager(layout);

   // Create a canvas to display the root figure
   Canvas canvas = new Canvas(parent, SWT.DOUBLE_BUFFERED);
   canvas.setBackground(ColorConstants.white);
   LightweightSystem lws = new LightweightSystem(canvas);
   lws.setContents(root);
   return canvas;
}

Tip

Always set the font for the root figure

root.setFont(parent.getFont());

so that each Label’s preferred size will be correctly calculated.

If you run the main(...) method, an empty window will appear (see Figure 2–2).

Figure 2–2. Empty Genealogy window.

Next, we want to add figures to the diagram representing a man, a woman, and their one child. Add the following to the createDiagram(...) method so that these figures are created and displayed.

private Canvas createDiagram(Composite parent) {
   ... existing code here ...

   // Add the father "Andy"
   IFigure andy = createPersonFigure("Andy");
   root.add(andy);
   layout.setConstraint(andy,
      new Rectangle(new Point(10, 10), andy.getPreferredSize()));

   // Add the mother "Betty"
   IFigure betty = createPersonFigure("Betty");
   root.add(betty);
   layout.setConstraint(betty,
      new Rectangle(new Point(230, 10), betty.getPreferredSize()));

   // Add the son "Carl"
   IFigure carl = createPersonFigure("Carl");
   root.add(carl);
   layout.setConstraint(carl,
      new Rectangle(new Point(120, 120), carl.getPreferredSize()));

   ... existing code here ...
}

Tip

Rather than adding the figure and then separately setting the layout constraint:

root.add(andy);
layout.setConstraint(andy,
   new Rectangle(new Point(10, 10),
   andy.getPreferredSize()));

combine this into a single statement using the IFigure.add(child, constraint) method:

root.add(andy,
   new Rectangle(new Point(10, 10),
   andy.getPreferredSize()));

Refactor the createDiagram(...) method above to use this more compact form, and inline the layout as we do not need to refer to it.

root.setLayoutManager(new XYLayout());

The createDiagram(...) method now calls a new createPersonFigure(...) method to do the work of instantiating and initializing the figure representing a person. This person figure contains a nested Label figure to display the person’s name (see Section 4.3.2 on page 35 for more on nested figures).

private IFigure createPersonFigure(String name) {
   RectangleFigure rectangleFigure = new RectangleFigure();
   rectangleFigure.setBackgroundColor(ColorConstants.lightGray);
   rectangleFigure.setLayoutManager(new ToolbarLayout());
   rectangleFigure.setPreferredSize(100, 100);
   rectangleFigure.add(new Label(name));
   return rectangleFigure;
}

Now, when the main(...) method is run, the following window appears (see Figure 2–3).

Figure 2–3. Genealogy window with three people.

Next, add more code to the createDiagram(...) method to create a “marriage” figure representing the relationship among the three people. This additional code calls a new createMarriageFigure(...) method to instantiate and initialize the marriage figure. This marriage figure is displayed using a PolygonShape (see Section 4.2 on page 29 for more about shapes) in the form of a diamond.

Code View: Scroll / Show All

private Canvas createDiagram(Composite parent) {

   ... existing figure creation for people here ...

   IFigure marriage = createMarriageFigure();
   root.add(marriage,
      new Rectangle(new Point(145, 35),
      marriage.getPreferredSize()));

   ... prior code here ...
}
private IFigure createMarriageFigure() {
   Rectangle r = new Rectangle(0, 0, 50, 50);
   PolygonShape polygonShape = new PolygonShape();
   polygonShape.setStart(r.getTop());
   polygonShape.addPoint(r.getTop());
   polygonShape.addPoint(r.getLeft());
   polygonShape.addPoint(r.getBottom());
   polygonShape.addPoint(r.getRight());
   polygonShape.addPoint(r.getTop());
   polygonShape.setEnd(r.getTop());
   polygonShape.setFill(true);
   polygonShape.setBackgroundColor(ColorConstants.lightGray);
   polygonShape.setPreferredSize(r.getSize());
   return polygonShape;
}

					  

Now the marriage figure is displayed when the main(...) method is run (see Figure 2–4).

Figure 2–4. Genealogy window showing marriage figure.

Finally, connect each of the people to the marriage (see Figure 2–5), showing their relationship to one another by modifying the createDiagram(...) method again. This is accomplished by calling a connect(...) method to create the line connecting the center of one figure to the center of another (see Chapter 6 on page 69 for more about connections).

private Canvas createDiagram(Composite parent) {

   ... existing figure creation for marriage here ...

   root.add(connect(andy, marriage));
   root.add(connect(betty, marriage));
   root.add(connect(carl, marriage));

   ... prior code here ...

}

private Connection connect(IFigure figure1, IFigure figure2) {
   PolylineConnection connection = new PolylineConnection();
   connection.setSourceAnchor(new ChopboxAnchor(figure1));
   connection.setTargetAnchor(new ChopboxAnchor(figure2));
   return connection;
}

Figure 2–5. Genealogy window showing connections.