| <!DOCTYPE html> |
| <html lang="en-us"> |
| |
| |
| <head> |
| <meta name="theme" content="Syna"> |
| <meta name="theme-version" content="v0.17.2"> |
| <meta name="theme-url" content="https://syna.okkur.org"> |
| <meta name="theme-description" content="Highly customizable open source theme for Hugo based static websites"> |
| <meta name="theme-author" content="Okkur Labs"> |
| <meta name="theme-author-url" content="https://about.okkur.org"> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| <meta name="google" content="notranslate" /> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> |
| <meta name="description" content="We are continuously improving our documentation, in case you miss something, please contact us |
| Technical documentation can be found on the GLSP GitHub |
| See here for the available support options"> |
| <meta property="og:title" content="Documentation" /> |
| <meta property="og:description" content="" /> |
| <meta property="og:type" content="article" /> |
| <meta property="og:url" content="https://www.eclipse.org/glsp/documentation/" /> |
| |
| |
| <meta name="twitter:card" content="summary_large_image"> |
| <meta name="twitter:title" content="Documentation &middot; Eclipse Graphical Language Server Platform" /> |
| <meta name="twitter:description" content="We are continuously improving our documentation, in case you miss something, please contact us |
| Technical documentation can be found on the GLSP GitHub |
| See here for the available support options"> |
| <meta name="twitter:url" content="https://www.eclipse.org/glsp/documentation/" /> |
| <meta property="og:image" content=""> |
| <meta name="twitter:image" content=""> |
| <meta name="author" content="Eclipse Foundation"> |
| |
| <meta name="generator" content="Hugo 0.78.1" /> |
| |
| <title>Documentation · Eclipse Graphical Language Server Platform</title> |
| |
| <!-- Theme Styles --> |
| <style> |
| .mx-0 { |
| margin-left: 0 !important; |
| margin-right: 0 !important; } |
| |
| |
| @-ms-viewport { |
| width: device-width; } |
| |
| html { |
| box-sizing: border-box; |
| -ms-overflow-style: scrollbar; } |
| |
| *, |
| *::before, |
| *::after { |
| box-sizing: inherit; } |
| |
| .container { |
| width: 100%; |
| padding-right: 15px; |
| padding-left: 15px; |
| margin-right: auto; |
| margin-left: auto; |
| max-width: 540px; |
| max-width: 720px; |
| max-width: 960px; |
| max-width: 1140px; } |
| |
| .container-fluid { |
| width: 100%; |
| padding-right: 15px; |
| padding-left: 15px; |
| margin-right: auto; |
| margin-left: auto; } |
| |
| .row { |
| display: flex; |
| flex-wrap: wrap; |
| margin-right: -15px; |
| margin-left: -15px; } |
| |
| .no-gutters { |
| margin-right: 0; |
| margin-left: 0; } |
| .no-gutters > .col, |
| .no-gutters > [class*="col-"] { |
| padding-right: 0; |
| padding-left: 0; } |
| |
| .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, |
| .col-auto { |
| position: relative; |
| width: 100%; |
| min-height: 1px; |
| padding-right: 15px; |
| padding-left: 15px; } |
| |
| .col { |
| flex-basis: 0; |
| flex-grow: 1; |
| max-width: 100%; } |
| |
| .col-auto { |
| flex: 0 0 auto; |
| width: auto; |
| max-width: none; } |
| |
| .col-1 { |
| flex: 0 0 8.33333%; |
| max-width: 8.33333%; } |
| |
| .col-2 { |
| flex: 0 0 16.66667%; |
| max-width: 16.66667%; } |
| |
| .col-3 { |
| flex: 0 0 25%; |
| max-width: 25%; } |
| |
| .col-4 { |
| flex: 0 0 33.33333%; |
| max-width: 33.33333%; } |
| |
| .col-5 { |
| flex: 0 0 41.66667%; |
| max-width: 41.66667%; } |
| |
| .col-6 { |
| flex: 0 0 50%; |
| max-width: 50%; } |
| |
| .col-7 { |
| flex: 0 0 58.33333%; |
| max-width: 58.33333%; } |
| |
| .col-8 { |
| flex: 0 0 66.66667%; |
| max-width: 66.66667%; } |
| |
| .col-9 { |
| flex: 0 0 75%; |
| max-width: 75%; } |
| |
| .col-10 { |
| flex: 0 0 83.33333%; |
| max-width: 83.33333%; } |
| |
| .col-11 { |
| flex: 0 0 91.66667%; |
| max-width: 91.66667%; } |
| |
| .col-12 { |
| flex: 0 0 100%; |
| max-width: 100%; } |
| |
| .order-first { |
| order: -1; } |
| |
| .order-last { |
| order: 13; } |
| |
| .order-0 { |
| order: 0; } |
| |
| .order-1 { |
| order: 1; } |
| |
| .order-2 { |
| order: 2; } |
| |
| .order-3 { |
| order: 3; } |
| |
| .order-4 { |
| order: 4; } |
| |
| .order-5 { |
| order: 5; } |
| |
| .order-6 { |
| order: 6; } |
| |
| .order-7 { |
| order: 7; } |
| |
| .order-8 { |
| order: 8; } |
| |
| .order-9 { |
| order: 9; } |
| |
| .order-10 { |
| order: 10; } |
| |
| .order-11 { |
| order: 11; } |
| |
| .order-12 { |
| order: 12; } |
| |
| .offset-1 { |
| margin-left: 8.33333%; } |
| |
| .offset-2 { |
| margin-left: 16.66667%; } |
| |
| .offset-3 { |
| margin-left: 25%; } |
| |
| .offset-4 { |
| margin-left: 33.33333%; } |
| |
| .offset-5 { |
| margin-left: 41.66667%; } |
| |
| .offset-6 { |
| margin-left: 50%; } |
| |
| .offset-7 { |
| margin-left: 58.33333%; } |
| |
| .offset-8 { |
| margin-left: 66.66667%; } |
| |
| .offset-9 { |
| margin-left: 75%; } |
| |
| .offset-10 { |
| margin-left: 83.33333%; } |
| |
| .offset-11 { |
| margin-left: 91.66667%; } |
| |
| .d-none { |
| display: none !important; } |
| |
| .d-inline { |
| display: inline !important; } |
| |
| .d-inline-block { |
| display: inline-block !important; } |
| |
| .d-block { |
| display: block !important; } |
| |
| .d-table { |
| display: table !important; } |
| |
| .d-table-row { |
| display: table-row !important; } |
| |
| .d-table-cell { |
| display: table-cell !important; } |
| |
| .d-flex { |
| display: flex !important; } |
| |
| .d-inline-flex { |
| display: inline-flex !important; } |
| |
| @media print { |
| .d-print-none { |
| display: none !important; } |
| .d-print-inline { |
| display: inline !important; } |
| .d-print-inline-block { |
| display: inline-block !important; } |
| .d-print-block { |
| display: block !important; } |
| .d-print-table { |
| display: table !important; } |
| .d-print-table-row { |
| display: table-row !important; } |
| .d-print-table-cell { |
| display: table-cell !important; } |
| .d-print-flex { |
| display: flex !important; } |
| .d-print-inline-flex { |
| display: inline-flex !important; } } |
| |
| .flex-row { |
| flex-direction: row !important; } |
| |
| .flex-column { |
| flex-direction: column !important; } |
| |
| .flex-row-reverse { |
| flex-direction: row-reverse !important; } |
| |
| .flex-column-reverse { |
| flex-direction: column-reverse !important; } |
| |
| .flex-wrap { |
| flex-wrap: wrap !important; } |
| |
| .flex-nowrap { |
| flex-wrap: nowrap !important; } |
| |
| .flex-wrap-reverse { |
| flex-wrap: wrap-reverse !important; } |
| |
| .flex-fill { |
| flex: 1 1 auto !important; } |
| |
| .flex-grow-0 { |
| flex-grow: 0 !important; } |
| |
| .flex-grow-1 { |
| flex-grow: 1 !important; } |
| |
| .flex-shrink-0 { |
| flex-shrink: 0 !important; } |
| |
| .flex-shrink-1 { |
| flex-shrink: 1 !important; } |
| |
| .justify-content-start { |
| justify-content: flex-start !important; } |
| |
| .justify-content-end { |
| justify-content: flex-end !important; } |
| |
| .justify-content-center { |
| justify-content: center !important; } |
| |
| .justify-content-between { |
| justify-content: space-between !important; } |
| |
| .justify-content-around { |
| justify-content: space-around !important; } |
| |
| .align-items-start { |
| align-items: flex-start !important; } |
| |
| .align-items-end { |
| align-items: flex-end !important; } |
| |
| .align-items-center { |
| align-items: center !important; } |
| |
| .align-items-baseline { |
| align-items: baseline !important; } |
| |
| .align-items-stretch { |
| align-items: stretch !important; } |
| |
| .align-content-start { |
| align-content: flex-start !important; } |
| |
| .align-content-end { |
| align-content: flex-end !important; } |
| |
| .align-content-center { |
| align-content: center !important; } |
| |
| .align-content-between { |
| align-content: space-between !important; } |
| |
| .align-content-around { |
| align-content: space-around !important; } |
| |
| .align-content-stretch { |
| align-content: stretch !important; } |
| |
| .align-self-auto { |
| align-self: auto !important; } |
| |
| .align-self-start { |
| align-self: flex-start !important; } |
| |
| .align-self-end { |
| align-self: flex-end !important; } |
| |
| .align-self-center { |
| align-self: center !important; } |
| |
| .align-self-baseline { |
| align-self: baseline !important; } |
| |
| .align-self-stretch { |
| align-self: stretch !important; } |
| </style> |
| |
| <link href="/glsp/style.min.78f4fc84313e06df604c59876a8cbdf46ea090960dd0e4a50185b0c4beb6e708.css" rel="stylesheet"> |
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> |
| <link rel="icon" sizes="16x16 32x32" type="image/x-icon" href="/glsp/favicon.ico"> |
| <link rel="icon" href="/glsp/favicon.png"> |
| <link rel="apple-touch-icon-precomposed" href="/glsp/favicon.png"> |
| |
| <script> |
| window.syna = { |
| |
| }; |
| </script> |
| <script src="/glsp/scripts/syna-head.min.0757f18970a0a32d5acac5a2accc5fe82f787821866c545d9ed17ca765f291a3.js"></script></head> |
| <body class="bg-secondary"> |
| <!-- Navigation --><nav class="overlay fragment navbar navbar-expand-lg py-2 scroll-spy bg-light navbar-light" id="nav" role="navigation"> |
| <div class="container"> |
| <a class="navbar-brand py-0" href="/glsp/#"> |
| <img src="/glsp/images/logo.png" height="35" class="d-inline-block align-top" alt="GLSP"> |
| </a> |
| <button class="navbar-toggler" 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> |
| <div class="navbar-collapse justify-content-end collapse show" id="navbarCollapse"> |
| <ul class="navbar-nav"><li class="nav-item"> |
| <a href="/glsp/" |
| class="nav-link"> |
| Home |
| </a> |
| </li><li class="nav-item"> |
| <a href="/glsp/support" |
| class="nav-link"> |
| Support |
| </a> |
| </li><li class="nav-item"> |
| <a href="/glsp/documentation" |
| class="nav-link"> |
| Documentation |
| </a> |
| </li><li class="nav-item"> |
| <a href="/glsp/contact" |
| class="nav-link"> |
| Contact |
| </a> |
| </li><li class="nav-item"> |
| <a href="https://github.com/eclipse-glsp/glsp" |
| class="nav-link"> |
| GitHub |
| </a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </nav> |
| |
| <div class="scroll-to-top bg-primary has-font-icon" |
| title="Back to top" |
| ><i class="fas fa-angle-up"></i><span class="sr-only">Back to top</span> |
| </div> |
| <!-- Content --> |
| <section id="content" class="fragment content-fragment"> |
| <div class="container-fluid bg-light overlay"> |
| <div class="container py-5 overlay"> |
| <div class="row"> |
| <article class="col-md-12"> |
| <div class="title-container row mx-0"> |
| <div class="title col px-0 text-center text-body"> |
| <h2>Documentation</h2> |
| </div> |
| </div> |
| <div class="content-body col-12 content px-0 text-body"><span style='display:block; text-align: center;'> |
| <p>We are continuously improving our documentation, in case you miss something, please <a href="/glsp/contact/">contact us</a></p> |
| </span> |
| <span style='display:block; text-align: center;'> |
| <p>Technical documentation can be found on the <a href="https://github.com/eclipse-glsp/glsp">GLSP GitHub</a></p> |
| </span> |
| <span style='display:block; text-align: center;'> |
| <p>See <a href="/glsp/support/">here for the available support options</a></p> |
| </span></div> |
| </article> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Items --> |
| <section id="examples" class="fragment "> |
| <div class="container-fluid bg-white "> |
| <div class="container py-5 "> |
| |
| <div class="title-container row mx-0"> |
| <div class="title col px-0 text-center text-body"> |
| <h2>Examples</h2> |
| </div> |
| </div> |
| |
| <div class="row justify-content-center align-items-stretch items"> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="/glsp/documentation/#workflowoverview" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Workflow Diagram Example"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-arrow-circle-right fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Workflow Diagram Example</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Workflow Diagram Example</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p><a href="#workflowoverview">The “workflow diagram example”</a> is a comprehensive example of a GLSP-based diagram editor. It demonstrates the feature set of GLSP as well as the integration capabilities, e.g. in Eclipse Theia, VS Code, Eclipse and a stand-alone application.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-examples" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Minimal Diagram Example"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-compress-arrows-alt fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Minimal Diagram Example</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Minimal Diagram Example</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>The purpose of <a href="https://github.com/eclipse-glsp/glsp-examples">the GLSP minimal diagram example</a>, as the name implies, is to provide a minimal feature set and therefore is very easy to understand. Thus, it is a perfect starting point for your GLSP-based project. The example supports exactly one node type, which is rendered as a rectangle. Nevertheless, it still demonstrates a lot of powerful generic GLSP features such as add, delete, undo/redo, resizing, zooming, etc. The minimal example is embedded into <a href="https://eclipsesource.com/technology/eclipse-theia/">Eclipse Theia</a> too.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://eclipsesource.com/coffee-editor" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Online Demo"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-user-check fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Online Demo</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Online Demo</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>The simplest way to try a GLSP-based diagram editor is to start our online demonstrator. It demonstrates GLSP embedded into an example tool based on <a href="https://eclipsesource.com/technology/eclipse-theia">Eclipse Theia</a>. <a href="https://eclipsesource.com/coffee-editor">Start the demo</a> and click on “Diagram Editor” to the right. See also the next example for details about the tool (coffee editor).</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-emfcloud/ecore-glsp" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Ecore Editor"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-project-diagram fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Ecore Editor</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Ecore Editor</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p><a href="https://github.com/eclipse-emfcloud/ecore-glsp">The GLSP-based Ecore editor</a> provides a web-based version of the famous Ecore tools.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-emfcloud/coffee-editor" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Coffee Editor"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fa fa-coffee fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Coffee Editor</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Coffee Editor</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p><a href="https://github.com/eclipse-emfcloud/coffee-editor">The “coffee editor”</a> is a comprehensive example of a web-based modeling tools including a diagram based on GLSP and embedded into <a href="https://eclipsesource.com/technology/eclipse-theia">the Eclipse Theia IDE</a></p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-examples" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="More GLSP Examples"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-ellipsis-h fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">More GLSP Examples</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">More GLSP Examples</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p><a href="https://github.com/eclipse-glsp/glsp-examples">The GLSP example repository</a> provides a collection of useful code snippets</p> |
| |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Content --> |
| <section id="video" class="fragment content-fragment"> |
| <div class="container-fluid bg-light overlay"> |
| <div class="container py-5 overlay"> |
| <div class="row"> |
| <article class="col-md-12"> |
| <div class="title-container row mx-0"> |
| <div class="title col px-0 text-center text-body"> |
| <h2>Videos</h2> |
| </div> |
| </div> |
| <div class="content-body col-12 content px-0 text-body"><span style='display:block; text-align: center;'> |
| EclipseCon 2020: <a target="_blank" href="https://youtu.be/tqcCUxtyslE">Diagram editors in the web with Eclipse GLSP</a></br></br> |
| EclipseCon 2020: <a target="_blank" href="https://youtu.be/YQyaCR_V5zc">Ecore tools in the cloud - behind the scenes</a></br></br> |
| EclipseCon 2020: <a target="_blank" href="https://youtu.be/yxS-Xsx-4Tw">Web-based modeling tools with EMF.cloud and GLSP</a></br></br> |
| Eclipse Virtual Meet Up 2019: <a target="_blank" href="https://youtu.be/YxaVXQyYlu4">Diagrams in web and space with GLSP</a></br></br> |
| EclipseCon 2019: <a target="_blank" href="https://youtu.be/uzOHsN8PrYc">Diagrams in web and space with GLSP</a></br></br> |
| EclipseCon Europe 2018: <a target="_blank" href="https://www.youtube.com/watch?v=snb1UTSH3Zw">Towards a Graphical Language Server Protocol for Diagrams?</a> |
| </span> |
| </div> |
| </article> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Content --> |
| <section id="workflowoverview" class="fragment content-fragment"> |
| <div class="container-fluid bg-dark overlay"> |
| <div class="container py-5 overlay"> |
| <div class="row"> |
| <article class="col-md-12"> |
| <div class="title-container row mx-0"> |
| <div class="title col px-0 text-center text-white"> |
| <h2>Workflow Example Overview</h2> |
| </div> |
| </div> |
| <div class="content-body col-12 content px-0 text-white"><p style='text-align: center;'> |
| An example GLSP diagram including one GLSP server and several diagram client integrations (VS Code, Eclipse Theia, plain HTML and Eclipse desktop IDE). The example can be used to try out the GLSP features in a running version. |
| Most components of GLSP, such as the GLSP server framework or the Theia integration implement the workflow diagram as a consistent example. |
| As the example is fully open source, you can use the example as a blueprint for a custom implementation of a GLSP diagram. The example diagram is a simplified flow chart with different |
| types of nodes and edges (see screen shot below)</br></br> |
| </p> |
| <img src="../images/diagramanimated.gif" alt="Workflow Diagram Overview" style="display: block; margin: auto;"/> |
| <p style='text-align: center;'> |
| </br> |
| To launch/browse the example, please use the links below leading to the components of the workflow diagram example. You will need the workflow GLSP server (there is only one) and at least one client integration (select the one you are interested in). |
| Launch the server first and then the client of your choice to try the example. Alternativly, you can try the workflow example online embedded into an example tool (see last option below) |
| </p></div> |
| </article> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Items --> |
| <section id="workflowintegrations" class="fragment "> |
| <div class="container-fluid bg-dark "> |
| <div class="container py-5 "> |
| |
| |
| <div class="row justify-content-center align-items-stretch items"> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-server#workflow-diagram-example" class="col justify-content-between d-flex flex-column header "> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Workflow Example GLSP Server"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-database fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Workflow Example GLSP Server</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Workflow Example GLSP Server</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The workflow diagram GLSP server is an example implementation of a GLSP server. It implements the business logic of a simplified workflow diagram with several node and edge types. You can use and GLSP-based client to connect to it. |
| The example GLSP server is hosted in the <a href="https://github.com/eclipse-glsp/glsp-server">GLSP server repository</a>. You will find <a href="https://github.com/eclipse-glsp/glsp-server#workflow-diagram-example">detailed information on how to launch it and how to get the sources in the wiki</a>.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-theia-integration#workflow-diagram-example" class="col justify-content-between d-flex flex-column header "> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Workflow Example Theia Client"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-meteor fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Workflow Example Theia Client</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Workflow Example Theia Client</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The GLSP Theia integration allows to use GLSP-based diagrams within the <a href="https://eclipsesource.com/technology/eclipse-theia/">Eclipse Theia IDE</a>. The example integrates the diagrams with IDE features such as opening files, the problems view and the main menues. It can be deployed/used online in a browser or as a desktop application (via electron). |
| The example GLSP Theia client is hosted in the <a href="https://github.com/eclipse-glsp/glsp-theia-integration">GLSP Theia integration repository</a>. You will find <a href="https://github.com/eclipse-glsp/glsp-theia-integration#workflow-diagram-example">detailed information on how to launch it and how to get the sources in the wiki</a>.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipsesource/glsp-vscode-integration#workflow-diagram-example" class="col justify-content-between d-flex flex-column header "> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Workflow Example VSCode Client"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-code fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Workflow Example VSCode Client</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Workflow Example VSCode Client</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The GLSP VS Code integration allows to use GLSP-based diagrams within VS Code. See the GLSP wiki for a feature comparison of the different integrations (e.g. Theia compared to VS Code). |
| The example GLSP VS Code client is hosted in the <a href="https://github.com/eclipsesource/glsp-vscode-integration">GLSP VSCode integration repository</a>. You will find <a href="https://github.com/eclipsesource/glsp-vscode-integration#workflow-diagram-example">detailed information on how to launch it and how to get the sources in the wiki</a>.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-eclipse-integration#workflow-diagram-example" class="col justify-content-between d-flex flex-column header "> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Workflow Example Eclipse IDE Client"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-desktop fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Workflow Example Eclipse IDE Client</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Workflow Example Eclipse IDE Client</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The GLSP Eclipse IDE allows to use GLSP-based diagrams within the Eclipse Desktop IDE. This is accomplished by integrating a Chrome-based browser seamlessly as a regular Eclipse editor part. |
| The example GLSP Eclipse IDE client is hosted in the <a href="https://github.com/eclipse-glsp/glsp-eclipse-integration">GLSP Eclipse integration repository</a>. You will find <a href="https://github.com/eclipse-glsp/glsp-eclipse-integration#workflow-diagram-example">detailed information on how to launch it and how to get the sources in the wiki</a>.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-theia-integration#workflow-diagram-example" class="col justify-content-between d-flex flex-column header "> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Workflow Example Standalone Client"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fab fa-html5 fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Workflow Example Standalone Client</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Workflow Example Standalone Client</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>GLSP does not require the usage of any IDE. GLSP diagrams can be embedded into any existing web application or even be deployed standalone. The workflow example also provides a standalone client, which shows the diagram as a plain web application. |
| The example GLSP standalone client is hosted in the <a href="https://github.com/eclipse-glsp/glsp-client">GLSP client repository</a>. You will find <a href="https://github.com/eclipse-glsp/glsp-client#workflow-diagram-example">detailed information on how to launch it and how to get the sources in the wiki</a>.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://eclipsesource.com/coffee-editor" class="col justify-content-between d-flex flex-column header "> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Try the Workflow Example online!"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-user-check fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Try the Workflow Example online!</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Try the Workflow Example online!</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The simplest way to try the workflow example is to start our online demonstrator. It demonstrates the worflow diagram embedded into an example tool based on <a href="https://eclipsesource.com/technology/eclipse-theia">Eclipse Theia</a>. <a href="https://eclipsesource.com/coffee-editor">Start the demo</a> and click on “Diagram Editor” to the right. See also the next example for details about the tool (coffee editor).</p> |
| |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Footer --> |
| <section id="footer" class="fragment "> |
| <div class="container-fluid bg-light "> |
| <div class="container py-5 "> |
| |
| <div class="row"> |
| <div class="col-md m-2 text-body"> |
| <h4></h4> |
| <a href="#"> |
| <img src="/glsp/images/logo.png" class="img-fluid w-50" alt="GLSP"> |
| </a> |
| <div class="row justify-content-left ml-0"> |
| <span class="fa-stack fa-2x mt-3 mr-1" title="twitter"> |
| <a href="https://twitter.com/eclipseglsp" class="ignore-color-change"> |
| <i class="fas fa-circle fa-stack-2x"></i> |
| <i class="fab fa-twitter fa-stack-1x fa-fw text-light"></i> |
| <span class="sr-only">twitter</span> |
| </a> |
| </span> |
| <span class="fa-stack fa-2x mt-3 mr-1" title="github"> |
| <a href="https://github.com/eclipse-glsp/glsp" class="ignore-color-change"> |
| <i class="fas fa-circle fa-stack-2x"></i> |
| <i class="fab fa-github fa-stack-1x fa-fw text-light"></i> |
| <span class="sr-only">github</span> |
| </a> |
| </span> |
| <span class="fa-stack fa-2x mt-3 mr-1" title="spectrum"> |
| <a href="https://spectrum.chat/glsp/" class="ignore-color-change"> |
| <i class="fas fa-circle fa-stack-2x"></i> |
| <i class="far fa-comments fa-stack-1x fa-fw text-light"></i> |
| <span class="sr-only">spectrum</span> |
| </a> |
| </span> |
| </div> |
| </div> |
| <div class="col-md m-2 text-body"> |
| <h4>Related Projects</h4> |
| <ul class="nav flex-column"> |
| <li class="nav-item"> |
| <a class="nav-link p-0 display-5" href="https://projects.eclipse.org/projects/ecd.sprotty">Eclipse Sprotty</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link p-0 display-5" href="https://projects.eclipse.org/projects/ecd.emfcloud">Eclipse EMF.cloud</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link p-0 display-5" href="https://eclipsesource.com/technology/eclipse-theia">Eclipse Theia IDE</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link p-0 display-5" href="https://eclipse.org/che">Eclipse Che</a> |
| </li> |
| </ul> |
| </div> |
| <div class="col-md m-2 text-body"> |
| <div><h4 id="graphical-language-server-platform">Graphical Language Server Platform</h4> |
| <p>GLSP is a project hosted at the Eclipse Foundation, led by <a href="https://projects.eclipse.org/projects/ecd.glsp/who">Philip Langer</a>, organized within the <a href="https://projects.eclipse.org/projects/ecd">Eclipse Cloud Development</a> project.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <!-- Copyright --> |
| <footer class="overlay fragment container-fluid bg-secondary" id="copyright"> |
| <div class="container"> |
| <div class="row py-3"> |
| <div class="col-md"> |
| <div class="row mx-0 my-2 justify-content-center text-center text-lg-none text-black-50"> |
| <div class="row mx-0 mr-lg-auto justify-content-center"> |
| <div class="col-auto px-1 copyright-legal">© Copyright 2021</div> |
| <div class="col-auto px-0 copyright-by"> by Eclipse Foundation</div> |
| </div> |
| </div> |
| </div> |
| <div class="col-md"> |
| <div class="row mx-0 my-2 justify-content-center"> |
| <ul class="nav ml-lg-auto"> |
| <li class="nav-item"> |
| <a class="nav-link py-0" href="https://projects.eclipse.org/projects/ecd.glsp" |
| >About</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link py-0" href="https://www.eclipse.org/legal/privacy.php" |
| >Privacy Policy</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link py-0" href="https://www.eclipse.org/legal/termsofuse.php" |
| >Terms of Use</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link py-0" href="https://www.eclipse.org/legal/copyright.php" |
| >Copyright</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link py-0" href="https://www.eclipse.org/legal/" |
| >Legal</a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
| <div id="react"></div> |
| |
| <!-- Theme Code --> |
| <script async defer src="/glsp/scripts/syna-main.min.68ae1ae47948304c9c224cfc1a97ffe16c57514bc587dd6140dcb82389a8d299.js"></script> |
| <script async defer src="/glsp/scripts/syna-content.min.bf537eb5ace369e45e8b4ed41b8d235a65db92236a400ed5659f7a3c41d0f221.js"></script> |
| <script async defer src="/glsp/scripts/syna-content.min.bf537eb5ace369e45e8b4ed41b8d235a65db92236a400ed5659f7a3c41d0f221.js"></script> |
| <script async defer src="/glsp/scripts/syna-content.min.bf537eb5ace369e45e8b4ed41b8d235a65db92236a400ed5659f7a3c41d0f221.js"></script> |
| </body> |
| </html> |
