Google Git Google Git
Sign in
eclipse/gerrit/www.eclipse.org/elk/refs/heads/master/./documentation/algorithmdevelopers/creatinganewproject.html
blob: 3f110402b997c1887b1b571780f9c5e1d3dafb86 [file]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/svg+xml" href="img/elk_fav.svg">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://www.eclipse.org/elk/css/elk.css">
<link rel="stylesheet" href="https://www.eclipse.org/elk/css/prism.css">
<title>Creating a New Project (ELK)</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="https://www.eclipse.org/elk/">
<img src="img/elk_small_light.svg" height="30" class="d-inline-block align-top mr-1" alt="">
Eclipse Layout Kernel
</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="../../downloads.html">Downloads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../gettingstarted.html">Getting Started</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../../documentation.html">Documentation <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../reference.html">Reference</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../support.html">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/eclipse/elk">GitHub</a>
</li>
</ul>
</div>
</nav>
<div class="container px-3 py-5">
<div class="row">
<div class="col-sm-9">
<h1>Creating a New Project</h1>
<p>Layout algorithms are developed as <em>Eclipse Plug-in Projects</em>. Let&rsquo;s work through creating a new project using our wizard and what that project consists of.</p>
<h2 id="creating-a-new-project">Creating a New Project</h2>
<p>Follow these steps to create a new plug-in:</p>
<ol>
<li>
<p>From the <em>File</em> menu, select <em>New - Project&hellip;</em>.</p>
</li>
<li>
<p>From the <em>Plug-in Development</em> category, select <em>Plug-in Project</em> and click <em>Next</em>.</p>
</li>
<li>
<p>Configure your project&rsquo;s basic settings, in particular its name, and click <em>Next</em>.</p>
<p>
<img
class="img-fluid"
src="../../img/algdev_creatinganewproject_step1.png"
alt="Step 1 of the New Plug-In Project Wizard."
style = "max-height: 500px; display: block;
margin-left: auto;
margin-right: auto;"
/>
</p>
</li>
<li>
<p>Configure the project&rsquo;s properties as you see fit and click <em>Next</em>.</p>
<p>
<img
class="img-fluid"
src="../../img/algdev_creatinganewproject_step2.png"
alt="Step 2 of the New Plug-In Project Wizard."
style = "max-height: 500px; display: block;
margin-left: auto;
margin-right: auto;"
/>
</p>
</li>
<li>
<p>Select the <em>Layout Algorithm</em> project template. This will cause your project to be initialized with all the necessary files for a simple layout algorithm.</p>
<p>
<img
class="img-fluid"
src="../../img/algdev_creatinganewproject_step3.png"
alt="Step 3 of the New Plug-In Project Wizard."
style = "max-height: 500px; display: block;
margin-left: auto;
margin-right: auto;"
/>
</p>
</li>
<li>
<p>The template requires a name for your layout algorithm. This will usually derive from your project&rsquo;s name. Click <em>Finish</em> once you have settled on a name.</p>
<p>
<img
class="img-fluid"
src="../../img/algdev_creatinganewproject_step4.png"
alt="Step 4 of the New Plug-In Project Wizard."
style = "max-height: 500px; display: block;
margin-left: auto;
margin-right: auto;"
/>
</p>
</li>
</ol>
<p>The <em>Package Explorer</em> now shows a new project for your plug-in.</p>
<p>
<img
class="img-fluid"
src="../../img/algdev_creatinganewproject_project.png"
alt="The new project in all its glory."
style = "max-height: 500px; display: block;
margin-left: auto;
margin-right: auto;"
/>
</p>
<h2 id="the-components-of-your-new-project">The Components of Your New Project</h2>
<p>The wizard creates the following things for your:</p>
<ul>
<li>
<p>A <code>MANIFEST.MF</code> file with the necessary dependencies to the Eclipse Layout Kernel so you can use our data structures.</p>
</li>
<li>
<p>A file called <code>ILayoutMetaDataProvider</code> which registeres your new layout algorithm with ELK so it can be used.</p>
</li>
<li>
<p>A <code>.melk</code> file which describes your layout algorithm and the options it supports (see <a href="../../documentation/algorithmdevelopers/metadatalanguage.html">this page</a> for more information).</p>
</li>
<li>
<p>A sample implementation with a simple basic layout provider. Studying this implementation will teach you a lot about how to develop layout algorithms with ELK (see <a href="../../documentation/algorithmdevelopers/algorithmimplementation.html">this page</a> for more information).</p>
</li>
</ul>
<p>Somewhat strangely, perhaps, the <code>ILayoutMetaDataProvider</code> file is located in <code>/src/META-INF/services</code> instead of <code>/META-INF/services</code>. There is a reason for that. When we start a project in Eclipse, the non-Java content of its source folders is copied into a <code>bin</code> folder, which is then put on the class path. Since <code>/META-INF</code> is not part of a source folder, putting the service file there would mean that the service is not available when started from Eclipse. If you happen to despise this solution, simply define a separate top-level folder, configure it as a source folder, and move <code>/src/META-INF</code> there. Whatever you do, however, you will always end up with two <code>META-INF</code> folders in your project.</p>
</div>
<div class="secnav col-sm-3">
<ul>
<a href="../../documentation/tooldevelopers.html">
<li class="navlevel-1">
Tool Developers
</li>
</a>
<a href="../../documentation/tooldevelopers/graphdatastructure.html">
<li class="navlevel-2">
Graph Data Structure
</li>
</a>
<a href="../../documentation/tooldevelopers/graphdatastructure/coordinatesystem.html">
<li class="navlevel-3">
Coordinate System
</li>
</a>
<a href="../../documentation/tooldevelopers/graphdatastructure/layoutoptions.html">
<li class="navlevel-3">
Layout Options
</li>
</a>
<a href="../../documentation/tooldevelopers/graphdatastructure/jsonformat.html">
<li class="navlevel-3">
JSON Format
</li>
</a>
<a href="../../documentation/tooldevelopers/graphdatastructure/elktextformat.html">
<li class="navlevel-3">
ELK Text Format
</li>
</a>
<a href="../../documentation/tooldevelopers/usingalgorithmsdirectly.html">
<li class="navlevel-2">
Using Algorithms Directly
</li>
</a>
<a href="../../documentation/tooldevelopers/usingplainjavalayout.html">
<li class="navlevel-2">
Using Plain Java Layout
</li>
</a>
<a href="../../documentation/tooldevelopers/usingeclipselayout.html">
<li class="navlevel-2">
Using Eclipse Layout
</li>
</a>
<a href="../../documentation/tooldevelopers/usingeclipselayout/connectingtoelk.html">
<li class="navlevel-3">
Connecting to ELK
</li>
</a>
<a href="../../documentation/tooldevelopers/usingeclipselayout/advancedconfiguration.html">
<li class="navlevel-3">
Advanced Configuration
</li>
</a>
<a href="../../documentation/tooldevelopers/usingeclipselayout/layoutviewsupport.html">
<li class="navlevel-3">
Layout View Support
</li>
</a>
<a href="../../documentation/tooldevelopers/usingeclipselayout/dependencyinjection.html">
<li class="navlevel-3">
Dependency Injection
</li>
</a>
<a href="../../documentation/algorithmdevelopers.html">
<li class="navlevel-1">
Algorithm Developers
</li>
</a>
<a href="../../documentation/algorithmdevelopers/gettingeclipseready.html">
<li class="navlevel-2">
Getting Eclipse Ready
</li>
</a>
<a href="../../documentation/algorithmdevelopers/creatinganewproject.html">
<li class="navlevel-2 active">
Creating a New Project
</li>
</a>
<a href="../../documentation/algorithmdevelopers/metadatalanguage.html">
<li class="navlevel-2">
ELK Metadata Language
</li>
</a>
<a href="../../documentation/algorithmdevelopers/metadatalanguage/automaticbuilds.html">
<li class="navlevel-3">
Automatic Builds
</li>
</a>
<a href="../../documentation/algorithmdevelopers/algorithmimplementation.html">
<li class="navlevel-2">
Algorithm Implementation
</li>
</a>
<a href="../../documentation/algorithmdevelopers/algorithmimplementation/algorithmstructure.html">
<li class="navlevel-3">
Structuring Algorithms
</li>
</a>
<a href="../../documentation/algorithmdevelopers/algorithmdebugging.html">
<li class="navlevel-2">
Algorithm Debugging
</li>
</a>
<a href="../../documentation/algorithmdevelopers/randomgraphs.html">
<li class="navlevel-2">
Random Graph Generation
</li>
</a>
<a href="../../documentation/algorithmdevelopers/unittesting.html">
<li class="navlevel-2">
Unit Tests
</li>
</a>
<a href="../../documentation/contributors.html">
<li class="navlevel-1">
ELK Contributors
</li>
</a>
<a href="../../documentation/contributors/developmentsetup.html">
<li class="navlevel-2">
Development Setup
</li>
</a>
<a href="../../documentation/contributors/developmentworkflow.html">
<li class="navlevel-2">
Development Workflow
</li>
</a>
<a href="../../documentation/contributors/developmentworkflow/installingwithoomph.html">
<li class="navlevel-3">
Installing With Oomph
</li>
</a>
<a href="../../documentation/contributors/buildingelk.html">
<li class="navlevel-2">
Building ELK
</li>
</a>
</ul>
<div class="incubation-egg">
<a href="https://www.eclipse.org/projects/what-is-incubation.php">
<img src="https://www.eclipse.org/images/egg-incubation.png" alt="Incubation" />
</a>
</div>
</div>
</div>
</div>
<footer role="contentinfo" class="footer">
<div class="container">
<div class="row">
<div class="col">
<span class="hidden-print">
<a href="https://www.eclipse.org"><img class="logo-eclipse-white img-responsive" alt="logo" src="../../img/eclipse_foundation_logo.svg"/></a>
</span>
</div>
<div class="col">
</div>
</div>
<div class="row">
<div class="col hidden-print">
<a href="http://www.eclipse.org/">Eclipse Foundation</a><br/>
<a href="http://www.eclipse.org/legal/privacy.php">Privacy Policy</a><br/>
<a href="http://www.eclipse.org/legal/termsofuse.php">Website Terms of Use</a><br/>
<a href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a><br/>
<a href="http://www.eclipse.org/legal">Legal</a>
</div>
<div class="col">
<p class="copyright-text">Copyright &copy; Eclipse Foundation, Inc. All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://www.eclipse.org/elk/js/prism.js"></script>
<script>$(function() { $('table').addClass('table'); })</script>
</body>
</html>