| <!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="EMF.cloud is the umbrella project for components and technologies making the Eclipse Modeling Framework (EMF) and its benefits available in the web and cloud. This includes new web-specific frameworks, but also solutions, which allow you to reuse existing tool components based on EMF in the cloud."> |
| <meta property="og:title" content="Categories" /> |
| <meta property="og:description" content="EMF.cloud" /> |
| <meta property="og:type" content="website" /> |
| <meta property="og:url" content="https://www.eclipse.org/emfcloud/categories/" /> |
| |
| |
| <meta name="twitter:card" content="summary_large_image"> |
| <meta name="twitter:title" content="Categories &middot; EMF.cloud" /> |
| <meta name="twitter:description" content="EMF.cloud is the umbrella project for components and technologies making the Eclipse Modeling Framework (EMF) and its benefits available in the web and cloud. This includes new web-specific frameworks, but also solutions, which allow you to reuse existing tool components based on EMF in the cloud."> |
| <meta name="twitter:url" content="https://www.eclipse.org/emfcloud/categories/" /> |
| <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>Categories · EMF.cloud</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="/emfcloud/style.min.2d5765aa3e4fed70eaf0bd10253606fa6ef8db695ce655c98c920ffd0364fd7d.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="/emfcloud/favicon.ico"> |
| <link rel="icon" href="/emfcloud/favicon.png"> |
| <link rel="apple-touch-icon-precomposed" href="/emfcloud/favicon.png"> |
| |
| <script> |
| window.syna = { |
| |
| }; |
| </script> |
| <script src="/emfcloud/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="/emfcloud/#"> |
| <img src="/emfcloud/images/logo.png" height="35" class="d-inline-block align-top" alt="EMF.cloud"> |
| </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="/emfcloud/" |
| class="nav-link"> |
| Home |
| </a> |
| </li><li class="nav-item"> |
| <a href="/emfcloud/support" |
| class="nav-link"> |
| Support |
| </a> |
| </li><li class="nav-item"> |
| <a href="/emfcloud/documentation" |
| class="nav-link"> |
| Documentation |
| </a> |
| </li><li class="nav-item"> |
| <a href="/emfcloud/contact" |
| class="nav-link"> |
| Contact |
| </a> |
| </li><li class="nav-item"> |
| <a href="https://github.com/eclipse-emfcloud/emfcloud" |
| 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> |
| |
| <!-- Hero --> |
| <header id="hero" class="fragment hero"> |
| <div style=""class="jumbotron text-center mb-0 bg-dark"> |
| <div id="hero-particles-js" class="hero-particles particles-js"></div> |
| <div class="hero-image-container row justify-content-center align-items-start"> |
| <img |
| class="hero-image overlay img-fluid" |
| src="/emfcloud/images/diagramanimated.gif" |
| alt="EMF.cloud" |
| style="width: 600px !important;" |
| ></img> |
| </div> |
| <div class="hero-subtitle-container row justify-content-center align-items-start"> |
| <h1 class="hero-subtitle overlay jumbotron-heading my-4 text-white">EMF.cloud - evolve your modeling tools to the web!</h1> |
| </div><div class="hero-buttons"> |
| <a class="overlay btn btn-lg m-2 btn-primary " href="/emfcloud/#components"> |
| <div class="column justify-content-center align-content-center">Components</div> |
| </a> |
| <a class="overlay btn btn-lg m-2 btn-primary " href="/emfcloud/contact"> |
| <div class="column justify-content-center align-content-center">Contact</div> |
| </a> |
| <a class="overlay btn btn-lg m-2 btn-primary " href="/emfcloud/support"> |
| <div class="column justify-content-center align-content-center">Support</div> |
| </a> |
| </div> |
| </div> |
| </header><script> |
| var fragmentName = "hero";window.syna.api.register("hero", "hero-" + fragmentName, { |
| selector: "hero-particles-js", |
| config: null, |
| }); |
| </script> |
| |
| <!-- Content --> |
| <section id="overview" class="fragment content-fragment"> |
| <div class="container-fluid bg-white 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>The Eclipse Modeling Framework in the cloud!</h2> |
| </div> |
| </div> |
| <div class="content-body col-12 content px-0 text-body"><p style='text-align: center;'> |
| EMF.cloud is the umbrella project for components and technologies making the Eclipse Modeling Framework (EMF) and its benefits available in the web and cloud. This includes new web-specific frameworks, but also solutions, which allow you to reuse existing tool components based on EMF in the cloud.</p></div> |
| </article> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Items --> |
| <section id="components" 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>Components</h2> |
| </div> |
| </div> |
| |
| <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-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="Theia Ecore tools"> |
| <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">Theia Ecore tools</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Theia Ecore tools</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>The <a href="https://github.com/eclipse-emfcloud/ecore-glsp">GLSP-based Ecore editor</a> integrated in the Eclipse Theia IDE provides a web-based version of the popular Ecore tools. It allows you to graphically create and modify Ecore Models using a diagram editor integrated in the web-based IDE Eclipse Theia. We are currently working on a model project creation wizard as well as work on integrating the existing EMF code generator.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-emfcloud/emfcloud-modelserver" 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="The model 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">The model server</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">The model server</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>The existing EMF implementation already supports loading, model manipulation, and serialization out-of-the-box. The <a href="https://github.com/eclipse-emfcloud/emfcloud-modelserver">EMF.cloud model server</a> adds a facade on top of existing technologies to connect web-based clients. It manages the runtime state of loaded models (“shared editing domain”). It allows applying changes using a command pattern and and register for changes. Finally, it provides a Java and JavaScript REST API including multiple formats (JSON or XMI).</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="/emfcloud/#coffeeeditoroverview" 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="The '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">The 'coffee editor'</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">The ‘coffee editor’</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p><a href="#coffeeeditoroverview">The “coffee editor”</a> is a comprehensive example of a web-based modeling tool based on EMF.cloud, including a form-based editor based on JSON Forms, a diagram based on GLSP, a textual DSL, a code generator and a graphical visualization of an analysis result using D3. The coffee editor uses the model sever for synchronizing all editors and it is 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-emfcloud/emfjson-jackson" 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="EMF-JSON Jackson mapper"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-map-signs fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">EMF-JSON Jackson mapper</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">EMF-JSON Jackson mapper</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>JSON binding for EMF models, that allows serialization and deserialization of EMF Resources in JSON. You can either change the file format to store your model instances or use the JSON serialiation to transfer model data, e.g. to a web client. The EMF-JSON mapper is used by the EMF.cloud model server, but can be used independantly, too.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-emfcloud/theia-tree-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="Tree Editor for eclipse Theia"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fab fa-trello fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Tree Editor for eclipse Theia</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Tree Editor for eclipse Theia</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>The EMF.cloud tree editor framework allows to efficiently build data-centric editors in Eclipse Theia. The framework provides all the basic requirements out-of-the-box so you only need to implement the domain-specific part, e.g. what icons to use, how the hierarchy of the tree is derived from the data or how the detail form is layouted.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="/emfcloud/support" 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="Your component!?"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fa fa-plus fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Your component!?</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Your component!?</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>EMF.cloud is the place for new components supporting the implementation of web-based modeling tools in the cloud. If you have a solution, which would be useful for others, we are open to any contributions! If you are missing a technology for your cloud modeling use case, <a href="/emfcloud/support/">get our support</a> to create it.</p> |
| |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Items --> |
| <section id="projects" 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>Projects</h2> |
| </div> |
| </div> |
| |
| <div class="row justify-content-center align-items-stretch items"> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://www.eclipse.org/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="Graphical Language Server Platform (GLSP)"> |
| <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">Graphical Language Server Platform (GLSP)</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Graphical Language Server Platform (GLSP)</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>The <a href="https://www.eclipse.org/glsp/">Graphical Language Server Platform (GLSP)</a> supports the development of web-based diagram editors. It transfer the advantages of the language server protocol (LSP) to graphical modeling languages. GLSP is well integrated with other EMF.cloud components such as the model server and is used as a basis for the coffee editor and the Theia Ecore extension.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://jsonforms.io" 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="JSON Forms"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fa fa-bars fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">JSON Forms</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">JSON Forms</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p><a href="https://jsonforms.io">JSON Forms</a> is a framework for the efficient development of form-based UIs. These allow to display and modify model instances in data-centric UIs such as trees, tables and field editors. JSON Forms is the web-version of <a href="https://www.eclipse.org/ecp/emfforms/">EMF Forms</a>. It is the basis of the tree-master-detail model editor of the coffee editor.</p> |
| |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Content --> |
| <section id="coffeeeditoroverview" 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>Coffee Editor Overview</h2> |
| </div> |
| </div> |
| <div class="content-body col-12 content px-0 text-white"><p style='text-align: center;'> |
| An example web-based modeling tool using EMF.cloud technologies used for demonstration and documentation. |
| </p> |
| <img src="images/coffeeeditordemo.gif" alt="Coffee Editor Overview" style="display: block; margin: auto;"/></div> |
| </article> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Items --> |
| <section id="coffeeeditorlinks" 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://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 it now!"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-play fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Try it now!</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Try it now!</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>If you want to see the coffee editor in action, please click <a href="https://eclipsesource.com/coffee-editor">here to launch a demo instance</a>. This allows you to try any feature of the example. Please note that the demo will automatically shut down after 30 minutes and no data will be persisted.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipsesource/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="Browse the sources"> |
| <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">Browse the sources</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Browse the sources</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The coffee editor is an open source example modeling application. Have a look at <a href="https://github.com/eclipsesource/coffee-editor">the sources</a> to find out how the features are implemented. The link above also contains instructions how to run the coffee editor yourself.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://eclipsesource.com/blogs/2020/07/24/a-web-based-modeling-tool-based-on-eclipse-theia/" 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="Learn more!"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-blog fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Learn more!</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Learn more!</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>If you want to learn more about the coffee editor, please see <a href="https://eclipsesource.com/blogs/2020/07/24/a-web-based-modeling-tool-based-on-eclipse-theia/">this article, describing the details</a> or watch <a href="https://www.youtube.com/watch?v=2tRJpC8IIiI">this video</a>. Alternatively, you find an overview of the available features below.</p> |
| |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Items --> |
| <section id="coffeeeditorfeatures" class="fragment "> |
| <div class="container-fluid bg-dark "> |
| <div class="container py-5 "> |
| |
| <div class="title-container row mx-0"> |
| <div class="title col px-0 text-center text-white"> |
| <h2>Coffee Editor Features</h2> |
| </div> |
| </div> |
| |
| <div class="row justify-content-center align-items-stretch items"> |
| <div class="col-md-4 d-flex flex-column"> |
| <div 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="Custom Theia Application Frame"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-columns fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Custom Theia Application Frame</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Custom Theia Application Frame</h4></div> |
| </div> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The coffee editor is based on Eclipse Theia and adds a number of custom extensions to it. This includes client and server extensions. therefore, it is a good blueprint on <a href="https://eclipsesource.com/technology/eclipse-theia">how to create your own tool based on Eclipse Theia</a>.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <div 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="Tree/form-based property editor"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fab fa-wpforms fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Tree/form-based property editor</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Tree/form-based property editor</h4></div> |
| </div> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The coffee editor includes a form-based editor with a tree showing the hierarchy of the model instances. This allows to efficiently browse the model and enter data. The form editor is based on <a href="https://jsonforms.io">JSON Forms</a>. Double click the file “superbrewer3000.coffee” in the coffee editor to try out the editor!</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <div 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="Diagram 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">Diagram editor</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Diagram editor</h4></div> |
| </div> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The coffee editor provides a graphical diagram editor. The example editor allows specifying the behavior of a coffee maching using a flow chart like notation. The diagram editor is based on <a href="https://www.eclipse.org/glsp/">the graphical language server platform (Eclipse GLSP)</a>. Double click the file “superbrewer3000.coffeenotation” in the coffee editor to try out the diagram editor!</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <div 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="Textual DSL"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-indent fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Textual DSL</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Textual DSL</h4></div> |
| </div> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The coffee editor integrates a textual DSL. A corresponding code editor supports syntaxt highlighting and auto completion. The DSL editor is based on <a href="https://www.eclipse.org/Xtext/">Xtext</a>. Double click the file “superbrewer3000.wfconfig” in the coffee editor to try out the textual DSl!</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <div 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="Model Analysis and Chart Visualization"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-chart-pie fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Model Analysis and Chart Visualization</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Model Analysis and Chart Visualization</h4></div> |
| </div> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The coffee editor provides an example model analysis, the result is visualized as a “sun burst” chart. The analysis is an external component written in Kotlin, the chart is based on D3. Select the file “superbrewer3000.wfconfig” in the coffee editor, press F1, type “Analyze workflow model” and hit enter to see the model analysis in action!</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <div 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="Code Generator"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-cogs fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Code Generator</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-secondary">Code Generator</h4></div> |
| </div> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-secondary"> |
| <p>The coffee editor allows generating example code based on the current model. The code generator itself is written using Xtend. Right click the file “superbrewer3000.coffee” in the coffee editor and select “Generate Workflow code”. Browse the generated code in the “src” and “src-gen” folder, the coffee editor also provides extensive language support for Java!</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="/emfcloud/images/logo.png" class="img-fluid w-50" alt="EMF.cloud"> |
| </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/emfcloud" 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/eclipsesource/emfcloud" 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/emfcloud" 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://eclipse.org/glsp">Eclipse GLSP</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link p-0 display-5" href="https://jsonforms.io">JSON Forms</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="emfcloud">EMF.cloud</h4> |
| <p>EMF.cloud is a project hosted at the Eclipse Foundation, lead by <a href="https://projects.eclipse.org/projects/ecd.emfcloud/who">Eugen Neufeld</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.emfcloud" |
| >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="/emfcloud/scripts/syna-main.min.68ae1ae47948304c9c224cfc1a97ffe16c57514bc587dd6140dcb82389a8d299.js"></script> |
| <script async defer src="/emfcloud/scripts/syna-hero.min.97a3fff0c67d9da74ebdd6af2640d8a9cde6200539e8c3b2c091b7fc6644420e.js"></script> |
| <script async defer src="/emfcloud/scripts/syna-content.min.bf537eb5ace369e45e8b4ed41b8d235a65db92236a400ed5659f7a3c41d0f221.js"></script> |
| <script async defer src="/emfcloud/scripts/syna-content.min.bf537eb5ace369e45e8b4ed41b8d235a65db92236a400ed5659f7a3c41d0f221.js"></script> |
| </body> |
| </html> |
