blob: b5e13b97f08b07db17d6fd84d2e9d967586931ae [file] [log] [blame]
<?php require_once($_SERVER['DOCUMENT_ROOT'] . "/"); require_once($_SERVER['DOCUMENT_ROOT'] . "/"); require_once($_SERVER['DOCUMENT_ROOT'] . "/"); $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%; }
<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>
<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
<p>The example was created with <a href="" target="_top">Eclipse 3.3</a>
and <a href="" target="_top">GEF 3.3</a></p>
<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>
<p>We add edges (<tt>Digraph2Edge</tt>) to our domain model.</p>
<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
<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>
<p>We add <tt>Digraph2EdgeEditPart</tt> to <tt>Digraph2EditPartFactory</tt>.</p>
<p>We make use of a <tt>ConnectionEditPolicy</tt> to place the edges on the graph
<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>
<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://"></a> <em>newsgroup.</em></p>
# Generate the web page
$App->generatePage($theme, $Menu, $Nav, $pageAuthor, $pageKeywords, $pageTitle, $html);