| <?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> 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); |
| ?> |