| <!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>Getting Started (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 active"> |
| <a class="nav-link" href="./gettingstarted.html">Getting Started <span class="sr-only">(current)</span></a> |
| </li> |
| |
| |
| <li class="nav-item"> |
| <a class="nav-link" href="./documentation.html">Documentation</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>Getting Started</h1> |
| |
| <p>Automatic layout can be a complex thing, but starting to use the <em>Eclipse Layout Kernel</em> can be as easy as installing a few features from our update site.</p> |
| <div class="alert alert-danger"> |
| <h5>A Quick Warning</h5> |
| <p>This guide refers to the pre-0.1.0 version of the Eclipse Layout Kernel. Since then, much has changed. We will try to get this guide updated as soon as possible. In the meantime, you may want to check out the rest of the documentation.</p> |
| </div> |
| <h2 id="installing-necessary-things">Installing Necessary Things</h2> |
| <p>First off, you will have to actually install ELK. Head over to our downloads section and paste the URL of our update site into your Eclipse installation. You will discover four features:</p> |
| <ul> |
| <li>The core feature contains the basic layout kernel infrastructure. This one you definitely need to install.</li> |
| <li>Depending on what technology your editor is based on, you may be lucky enough to find that we have already done much of the work necessary to make your editor work with ELK. We provide out-of-the-box interfaces for GMF-based editors, which work well without customization for many editors. Note that prior to release 0.7.0 there has been support for Graphiti editors as well. If you are interested, feel free to check out the old code.</li> |
| <li>While ELK comes with a number of layout algorithms, you may also want to use the <a href="http://www.graphviz.org/">Graphviz</a> library. Installing the corresponding feature allows ELK to use Graphviz if it is installed on your computer.</li> |
| </ul> |
| <h2 id="connecting-your-editor-to-elk">Connecting Your Editor to ELK</h2> |
| <p>Congratulations, you have just installed ELK! (wasn’t that hard, I know) Now it’s time to actually enable automatic layout for your editor. How this is done exactly differs depending on the technology your editor is based on.</p> |
| <p>ELK works with a graph data structure called the ElkGraph. To enable layout, it needs to know how to extract the ElkGraph corresponding to the diagram the current editor shows. This is done by looking for an <code>IDiagramLayoutManager</code> registered for the current editor and asking it to provide the ElkGraph.</p> |
| <p>What exactly you need to do to connect ELK to your editor depends on the technology your editor is based on.</p> |
| <h3 id="gmf-based-editors">GMF-Based Editors</h3> |
| <p>If your editor is GMF-based, you probably won’t be having a hard time: ELK already supports GMF-based editors out of the box. In fact, there will be a new layout button on the tool bar. Click it (or press Ctrl+R, L) to check if everything works.</p> |
| <p> |
| <img |
| class="img-fluid" |
| |
| src="./img/getting_started_layout_button.png" |
| |
| alt="The layout button triggers layout on your diagram." |
| style = "max-height: 500px; display: block; |
| margin-left: auto; |
| margin-right: auto;" |
| /> |
| </p> |
| |
| <h3 id="graphiti-based-editors">Graphiti-Based Editors</h3> |
| <p>If your editor is based on Graphiti, you’re in a similar situation as the GMF people: it may just work out of the box. However, the GraphitiDiagramLayoutManager that comes with ELK may not always make the right choices. In fact, you will most likely need to subclass it to customize how exactly the ElkGraph is built, and then register it with ELK so your custom manager is used for your editor. See the next section for how that is done.</p> |
| <h3 id="custom-editors">Custom Editors</h3> |
| <p>If your editor is based on some other technology, ELK doesn’t have a pre-built layout connection for you; you will have to build it yourself. To do so, create a class <a href="./documentation/tooldevelopers/usingeclipselayout/connectingtoelk.html">that implements the <code>IDiagramLayoutManager</code> interface</a>. Your class needs to be registered with ELK:</p> |
| <pre><code><extension |
| point="org.eclipse.elk.core.service.layoutManagers"> |
| |
| <manager |
| class="your.layout.manager.implementation"> |
| </manager> |
| </extension> |
| </code></pre><h2 id="customizing-automatic-layout">Customizing Automatic Layout</h2> |
| <p>Chances are that the layouts you’re getting at this point are not perfect for your type of diagram. That is to be expected. Luckily, most algorithms can be configured through the use of <em>layout options</em>.</p> |
| <p>The first thing you will want to do is to experiment with the available options. To do so, open your editor as well as the <em>Layout View</em> provided by ELK. The view will show you the options available for the selected diagram elements and allow you to play around with them.</p> |
| <p> |
| <img |
| class="img-fluid" |
| |
| src="./img/getting_started_layout_view.png" |
| |
| alt="The layout view allows you to play around with many of the available layout options." |
| style = "max-height: 500px; display: block; |
| margin-left: auto; |
| margin-right: auto;" |
| /> |
| </p> |
| |
| <p>Once you have found settings you like, it’s time to configure layout such that these settings are always applied. (You don’t want your users having to use the layout view, now, do you?) There are different ways to do so, and we have <a href="./documentation/tooldevelopers/graphdatastructure/layoutoptions.html">more in-depth information on them</a>.</p> |
| <p>The easiest way is to simply register static configurations with ELK. Static configurations are registered with the org.eclipse.elk.core.layoutConfigs extension point. Each static config consists of three parts:</p> |
| <ol> |
| <li>A class name. If ELK encounters an instance of this type, it will apply the static configuration to it. The class name can be the name of a domain model class, or the name of a class of your editor’s view model.</li> |
| <li>An option ID. This is the identifier of the layout option you actually want ELK to set on the element.</li> |
| <li>An option value. This is the value you want ELK to set on the element for the layout option.</li> |
| </ol> |
| <p>Now, you may think that you don’t have all of these information at hand, but you’re actually wrong. You can find all of these information by selecting your diagram element, selecting the layout option in the layout view, and pressing the layout view’s info button. The dialog that pops up will give you all the information you need.</p> |
| <p> |
| <img |
| class="img-fluid" |
| |
| src="./img/getting_started_layout_view_info.png" |
| |
| alt="Finding out more about selected elements and layout options through the layout view." |
| style = "max-height: 500px; display: block; |
| margin-left: auto; |
| margin-right: auto;" |
| /> |
| </p> |
| |
| |
| </div> |
| |
| <div class="secnav col-sm-3"> |
| <ul> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </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 © 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> |
