blob: 47cd043721782781e0de6e5310f02f760f36135a [file] [log] [blame]
<!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
Getting started with EMF Forms Introduction and Background First steps and Set-up Embedding EMF Forms into an Application Using the SWT Renderer Using the RAP Renderer Using the JavaFX Renderer More Renderer Available View Model Elements View Control Vertical and Horizontal Layout Group Table Control Control Grid Tree Master Detail View Proxies Additional Elements How to customize EMF Forms Customize and Replace Renderers Implement a Reference Service EMF Forms Services Localization View Template Models Data Templates EMF Forms Editors The Generic Editor The Ecore Editor The Genmodel Editor Customize the look of elements in trees Rendering with EMF Forms EMF Forms Migration Guide EMF Forms Frequently Asked Questions Custom Model Preparation Guideline Debugging The EMF Change Broker Forms in the web (Integration with JSON Forms) Define Model Validation Constraints Forms in the web (Integration with JSON Forms) 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/ecp/emfforms/documentation/" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Documentation &amp;middot; EMF Forms" />
<meta name="twitter:description" content="We are continuously improving our documentation, in case you miss something, please contact us
Getting started with EMF Forms Introduction and Background First steps and Set-up Embedding EMF Forms into an Application Using the SWT Renderer Using the RAP Renderer Using the JavaFX Renderer More Renderer Available View Model Elements View Control Vertical and Horizontal Layout Group Table Control Control Grid Tree Master Detail View Proxies Additional Elements How to customize EMF Forms Customize and Replace Renderers Implement a Reference Service EMF Forms Services Localization View Template Models Data Templates EMF Forms Editors The Generic Editor The Ecore Editor The Genmodel Editor Customize the look of elements in trees Rendering with EMF Forms EMF Forms Migration Guide EMF Forms Frequently Asked Questions Custom Model Preparation Guideline Debugging The EMF Change Broker Forms in the web (Integration with JSON Forms) Define Model Validation Constraints Forms in the web (Integration with JSON Forms) See here for the available support options">
<meta name="twitter:url" content="https://www.eclipse.org/ecp/emfforms/documentation/" />
<meta property="og:image" content="">
<meta name="twitter:image" content="">
<meta name="author" content="Eclipse Foundation">
<meta name="generator" content="Hugo 0.59.0" />
<title>Documentation &middot; EMF Forms</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="/ecp/emfforms/style.min.e26fe04bbfbc846c254951d08e31682cb314634373202789c0176cbbe0df0065.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="/ecp/emfforms/favicon.ico">
<link rel="icon" href="/ecp/emfforms/favicon.png">
<link rel="apple-touch-icon-precomposed" href="/ecp/emfforms/favicon.png">
<script>
window.syna = {
};
</script>
<script src="/ecp/emfforms/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="/ecp/emfforms/#">
<img src="/ecp/emfforms/images/logo.png" height="35" class="d-inline-block align-top" alt="EMF Forms">
</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="/ecp/emfforms"
class="nav-link">
Home
</a>
</li><li class="nav-item">
<a href="/ecp/emfforms/gettingstarted"
class="nav-link">
Getting started
</a>
</li><li class="nav-item">
<a href="/ecp/emfforms/support"
class="nav-link">
Support
</a>
</li><li class="nav-item">
<a href="/ecp/emfforms/documentation"
class="nav-link">
Documentation
</a>
</li><li class="nav-item">
<a href="/ecp/emfforms/downloads"
class="nav-link">
Downloads
</a>
</li><li class="nav-item">
<a href="/ecp/emfforms/gettinginvolved"
class="nav-link">
Getting Involved
</a>
</li><li class="nav-item">
<a href="/ecp/emfforms/contact"
class="nav-link">
Contact
</a>
</li><li class="nav-item">
<a href="https://git.eclipse.org/r/plugins/gitiles/emfclient/org.eclipse.emf.ecp.core"
class="nav-link">
Git
</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"><p>We are continuously improving our documentation, in case you miss something, please <a href="/ecp/emfforms/contact/">contact us</a></p>
<ul class="no-bullets">
<li><a
href="http://eclipsesource.com/blogs/tutorials/getting-started-with-EMF-Forms/"
target="_blank">Getting started with EMF Forms</a>
<ul class="no-bullets">
<li><a
href="http://eclipsesource.com/blogs/tutorials/getting-started-with-EMF-Forms/"
target="_blank">Introduction and Background</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/getting-started-with-EMF-Forms/#tutorial"
target="_blank">First steps and Set-up</a></li>
</ul>
<li><a
href="http://eclipsesource.com/blogs/tutorials/getting-started-with-EMF-Forms/#embbededitor"
target="_blank">Embedding EMF Forms into an Application</a>
<ul class="no-bullets">
<li><a
href="http://eclipsesource.com/blogs/tutorials/getting-started-with-EMF-Forms/#swt"
target="_blank">Using the SWT Renderer</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-renderer/#rap"
target="_blank">Using the RAP Renderer</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-renderer/#javafx"
target="_blank">Using the JavaFX Renderer</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-renderer/#morerenderer"
target="_blank">More Renderer</a></li>
</ul>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/"
target="_blank">Available View Model Elements</a>
<ul class="no-bullets">
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/#view"
target="_blank">View</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/#control"
target="_blank">Control</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/#verticalhorizontal"
target="_blank">Vertical and Horizontal Layout</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/#group"
target="_blank">Group</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/#tablecontrol"
target="_blank">Table Control</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/#controlgrid"
target="_blank">Control Grid</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/#treemasterdetail"
target="_blank">Tree Master Detail</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/#viewproxies"
target="_blank">View Proxies</a></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/#moreelements"
target="_blank">Additional Elements</a></li>
</ul></li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/how-to-customize-emf-forms/"
target="_blank">How to customize EMF Forms</a>
<ul class="no-bullets">
<li>
<a
href="http://eclipsesource.com/blogs/tutorials/how-to-customize-emf-forms/#customizecontrols"
target="_blank">Customize and Replace Renderers
</a>
</li>
<li>
<a
href="http://eclipsesource.com/blogs/tutorials/how-to-customize-emf-forms/#reference-service"
target="_blank">Implement a Reference Service
</a>
</li>
<li>
<a
href="http://eclipsesource.com/blogs/tutorials/how-to-customize-emf-forms/#services"
target="_blank">EMF Forms Services
</a>
</li>
<li>
<a
href="http://eclipsesource.com/blogs/tutorials/how-to-customize-emf-forms/#localization"
target="_blank">Localization
</a>
</li>
<li>
<a
href="http://eclipsesource.com/blogs/tutorials/how-to-customize-emf-forms/#templatemodel"
target="_blank">View Template Models
</a>
</li>
<li>
<a
href="https://eclipsesource.com/blogs/tutorials/emf-forms-data-templates/"
target="_blank">Data Templates
</a>
</li>
</ul>
</li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-editors/"
target="_blank">EMF Forms Editors</a>
<ul class="no-bullets">
<li>
<a
href="https://eclipsesource.com/blogs/tutorials/emf-forms-editors/#genericeditor"
target="_blank">The Generic Editor
</a>
</li>
<li>
<a
href="https://eclipsesource.com/blogs/tutorials/emf-forms-editors/#ecoreeditor"
target="_blank">The Ecore Editor
</a>
</li>
<li>
<a
href="https://eclipsesource.com/blogs/tutorials/emf-forms-editors/#ecoreeditor"
target="_blank">The Genmodel Editor
</a>
</li>
<li>
<a
href="https://eclipsesource.com/blogs/tutorials/tutorialshow-to-customize-the-emf-client-platform/"
target="_blank">Customize the look of elements in trees
</a>
</li>
</ul>
</li>
<li><a
href="https://eclipsesource.com/blogs/tutorials/emf-forms-rendering/"
target="_blank">Rendering with EMF Forms</a>
</li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-migration-guide/"
target="_blank">EMF Forms Migration Guide</a>
</li>
<li><a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-frequently-asked-questions/"
target="_blank">EMF Forms Frequently Asked Questions</a>
<ul class="no-bullets">
<li>
<a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-frequently-asked-questions/#custommodelpreparationguideline"
target="_blank">Custom Model Preparation Guideline
</a>
</li>
<li>
<a
href="http://eclipsesource.com/blogs/tutorials/emf-forms-frequently-asked-questions/#debugging"
target="_blank">Debugging
</a>
</li>
</ul>
</li>
<li>
<a href="https://eclipsesource.com/blogs/tutorials/emf-change-broker/ ">
The EMF Change Broker
</a>
</li>
<li>
<a href="https://eclipsesource.com/blogs/tutorials/emf-forms-and-json-forms-integration-guide/">
Forms in the web (Integration with JSON Forms)
</a>
</li>
<li>
<a href="http://eclipsesource.com/blogs/tutorials/tutorialshow-to-customize-the-emf-client-platform/#validation">
Define Model Validation Constraints
</a>
</li>
<li>
<a href="https://eclipsesource.com/blogs/tutorials/emf-forms-and-json-forms-integration-guide/">
Forms in the web (Integration with JSON Forms)
</a>
</li>
</ul>
</ul>
<p>See <a href="/ecp/emfforms/support/">here for the available support options</a></p>
</div>
</article>
</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="/ecp/emfforms/images/logo.png" class="img-fluid w-50" alt="EMF Forms">
</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/emfforms" 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="forum">
<a href="http://www.eclipse.org/forums/index.php/f/19/" 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">forum</span>
</a>
</span>
<span class="fa-stack fa-2x mt-3 mr-1" title="Git">
<a href="https://git.eclipse.org/r/plugins/gitiles/emfclient/org.eclipse.emf.ecp.core" 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">Git</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://emf.cloud">EMF Cloud</a>
</li>
<li class="nav-item">
<a class="nav-link p-0 display-5" href="https://eclipse.org/ecp">EMF Forms</a>
</li>
<li class="nav-item">
<a class="nav-link p-0 display-5" href="https://jsonforms.io">JSON Forms</a>
</li>
</ul>
</div>
<div class="col-md m-2 text-body">
<div>
<h4 id="emf-forms-emf-client-platform">EMF Forms / EMF Client Platform</h4>
<p>EMF Forms / EMF Client Platform is a project hosted at the Eclipse Foundation, lead by <a href="https://projects.eclipse.org/projects/modeling.emft.emf-client/who">Eugen Neufeld</a>, <a href="https://projects.eclipse.org/projects/modeling.emft.emf-client/who">Johannes Faltermeier</a>, <a href="https://projects.eclipse.org/projects/modeling.emft.emf-client/who">Jonas Helming</a> and <a href="https://projects.eclipse.org/projects/modeling.emft.emf-client/who">Maximilian Koegel</a>.</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&nbsp;2020</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/modeling.emft.emf-client"
>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="/ecp/emfforms/scripts/syna-main.min.68ae1ae47948304c9c224cfc1a97ffe16c57514bc587dd6140dcb82389a8d299.js"></script>
<script async defer src="/ecp/emfforms/scripts/syna-content.min.bf537eb5ace369e45e8b4ed41b8d235a65db92236a400ed5659f7a3c41d0f221.js"></script>
</body>
</html>