reference/digraph1.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 (Digraph1)";
$pageKeywords	= "Eclipse Graphical Editing Framework (GEF) Directed Graph Example (Digraph1)";
$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 (Digraph1)</h1>

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

<p><a href="digraph1.psf">
A team project set file for the digraph1 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 digraph1 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="Digraph1GraphicalEditor"></a>Basic Graphical Editor</h2>

<p>The main objective of the digraph1 example was to provide a simple graphical editor 
that demonstrates GEF's Model-View-Controller (MVC) architecture. This first directed graph 
example is as simple as it gets.</p>
<p><img src="images/digraph1_editor.png" alt="digraph1_editor"/></p>
<h3>Model</h3>
<p>The model is a simple graph (<tt>Digraph1Graph</tt>) with a number of nodes (<tt>Digraph1Node</tt>). 
In this simple example the graph has a fixed number of nodes and a fixed location for each 
node in the graph.</p>
<h3>Figure</h3>
<p>We define the view to display the graph using figures. The figure for the graph is 
simply a <tt>FreeformLayer</tt>. Each node figure is a <tt>Digraph1NodeFigure</tt>.</p>
<h3>EditPart</h3>
<p>We bridge the model and view with the controller, or EditPart. We have an EditPart for the graph 
and each node (<tt>Digraph1GraphEditPart</tt> and <tt>Digraph1NodeEditPart</tt>).</p> 
<h3>Factory</h3>
<p>The graphical viewer has an edit part factory (<tt>Digraph1EditPartFactory</tt>) to create new 
EditParts for the example.</p>
<h3>Policy</h3>
<p>We make use of a <tt>XYLayoutEditPolicy</tt> to place the nodes on the graph (<tt>Digraph1XYLayoutEditPolicy</tt>).</p> 
<h3>Editor</h3>
<p>Finally, we use an editor with no editing functionality to display the graphical viewer
(<tt>Digraph1GraphicalEditor</tt>).</p> 
<h3>Opening the Example Editor</h3>
<p>The graph example editor opens for any file with the <tt>digraph1</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.digraph1</tt> using
<tt> File > New > File</tt>. After creating the file, the Directed Graph Example Editor will open.</p>

<hr/>

<h2><a name="Digraph1View"></a>Graphical View</h2>
<p>Most frequently, GEF is used to graphically display your model in an Eclipse editor. 
However, GEF's viewers can also be used in views, dialogs, or just about anywhere you can place a control.</p>
<p>The digraph1 example hosts the same content from the editor in a view. The code in the 
<tt>Digraph1GraphicalView</tt> is exactly like the content in the GraphicalEditor.</p>
<p><img src="images/digraph1_view.png" alt="digraph1_view"/></p>
<p>To open the view, select <tt>Window > Show View > Other</tt> and select the Directed Graph Example 
View from the Other category.</p>

<hr/>

<h2><a name="Digraph1Application"></a>Graphical Editor in a RCP Application</h2>
<p>The <tt>org.eclipse.gef.examples.digraph1.rcp</tt> package provides the four classes required to put the 
graphical editor in a RCP application.</p>
<p>The RCP application can be directly started by running an Eclipse application from <tt>Run > 
Open Run Dialog..</tt>. A new configuration can be created as below:</p>
<p><img src="images/digraph1_run_rcp.png" alt="digraph1_run_rcp"/></p>
<p>Our WorkbenchWindowAdvisor works by creating a dummy file in a project. Since our example loads from 
a static model, the editor opens when the RCP application starts.</p>
<p><img src="images/digraph1_rcp.png" alt="digraph1_rcp"/></p>

<hr/>

<p><b>By Anthony Hunter, IBM Rational Software</b><br/>
<font size="-1">$Header: /cvsroot/org.eclipse/www/gef/reference/digraph1.php,v 1.10 2007/11/16 04:29:04 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);
?>