reference/digraph2.php

<?php  																														require_once($_SERVER['DOCUMENT_ROOT'] . "/eclipse.org-common/system/app.class.php");	require_once($_SERVER['DOCUMENT_ROOT'] . "/eclipse.org-common/system/nav.class.php"); 	require_once($_SERVER['DOCUMENT_ROOT'] . "/eclipse.org-common/system/menu.class.php"); 	$App 	= new App();	$Nav	= new Nav();	$Menu 	= new Menu();		include($App->getProjectCommon());    # All on the same line to unclutter the user's desktop'

$pageTitle 		= "Eclipse Graphical Editing Framework (GEF) Directed Graph Example (Digraph2)";
$pageKeywords	= "Eclipse Graphical Editing Framework (GEF) Directed Graph Example (Digraph2)";
$pageAuthor		= "Anthony Hunter, IBM Rational Software";
	
# Paste your HTML content between the EOHTML markers!	
$html = <<<EOHTML

<div id="midcolumn">

<STYLE type="text/css">
   TT  { font-size : 100%; }
</STYLE>

<h1>Graphical Editing Framework (GEF) Directed Graph Example (Digraph2)</h1>

<h2>Getting the source for the example</h2>

<p><a href="digraph2.psf">
A team project set file for the digraph2 example is here</a>. 
Download the team project set file and do the following to import the plug-in project into your workspace.</p>
<ul>
<li>From the File menu, choose Import. This will open the Import dialog. 
<li>In the Import dialog, choose Team > Team Project Set and click Next. 
<li>Browse for or type in the name of the project set file and click Finish. 
<li>The digraph2 project contained in the project set will be fetched from the CVS repository on Eclipse.org. 
</ul>
<p>The example was created with <a href="http://download.eclipse.org/downloads" target="_top">Eclipse 3.3</a> 
and <a href="http://download.eclipse.org/tools/gef/downloads" target="_top">GEF 3.3</a></p>
<hr/>

<h2><a name="Digraph2GraphicalEditor"></a>Basic Graphical Editor with Connections</h2>

<p>The objective of the digraph2 example is to add connections to the 
<a href="digraph1.php">digraph1 example</a>.</p>
<p><img src="images/digraph2_editor.png" alt="digraph2_editor"/></p>
<h3>Model</h3>
<p>We add edges (<tt>Digraph2Edge</tt>) to our domain model.</p>
<h3>Figure</h3>
<p>Each edge figure is a <tt>PolylineConnection</tt>. We also add <tt>Digraph2ConnectionAnchor</tt>
to anchor the edges to the nodes. The edges are anchored to the bottom center and top center of the 
nodes.</p>
<h3>EditPart</h3>
<p>We add an EditPart for edges (<tt>Digraph2EdgeEditPart</tt>). We also need to make 
<tt>Digraph2NodeEditPart</tt> implement <tt>NodeEditPart</tt> to add source and target connections
to the nodes in our directed graph. We finally added a <tt>ManhattanConnectionRouter</tt> to the 
<tt>ConnectionLayer</tt> in the <tt>refreshVisuals()</tt> method in our <tt>Digraph2GraphEditPart</tt>.</p> 
<h3>Factory</h3>
<p>We add <tt>Digraph2EdgeEditPart</tt> to <tt>Digraph2EditPartFactory</tt>.</p>
<h3>Policy</h3>
<p>We make use of a <tt>ConnectionEditPolicy</tt> to place the edges on the graph 
(<tt>Digraph2ConnectionEditPolicy</tt>).</p> 
<h3>Editor</h3>
<p>We did not need to make any additional changes to our <tt>Digraph2GraphicalEditor</tt>.</p> 
<h3>Opening the Example Editor</h3>
<p>The graph example editor opens for any file with the <tt>digraph2</tt> file extension. 
So we need a project and file in the workspace to open the editor. First, create a new project resource 
<tt> File > New > Project</tt>. Then a new file resource, such as <tt>file.digraph2</tt> using
<tt> File > New > File</tt>. After creating the file, the Directed Graph Example Editor will open.</p>

<hr/>

<p><b>By Anthony Hunter, IBM Rational Software</b><br/>
<font size="-1">$Header: /cvsroot/org.eclipse/www/gef/reference/digraph2.php,v 1.3 2007/11/16 04:37:12 ahunter Exp $</font></p>
<p><em>&nbsp;&nbsp;&nbsp; Please send comments about this example document to
the</em> <a href="news://news.eclipse.org/eclipse.tools.gef">eclipse.tools.gef</a> <em>newsgroup.</em></p>
<br/><br/>
</div>

EOHTML;


	# Generate the web page
	$App->generatePage($theme, $Menu, $Nav, $pageAuthor, $pageKeywords, $pageTitle, $html);
?>