Gentleman aims to to close the gap between models and domain experts.
| Concept defintion | Projection definition |
|---|---|
 |
 |
Projectional-editing
- No parser needed: the user manipulates the AST directly (through projections)
- Support of various notations: tables, math formulas, graphics...
- Composition of any language without introducing syntactic ambiguities
-
Language enginneer
- Define a model for your DSL concepts or import and Ecore model
- Create projections to interact with your DSL concepts
-
Domain expert
- Use the generated editor to create the model instances
- Personnalize freely the presentation of your instance
- Platform agnostic: Gentleman target the web (no installation required)
- Support textual and tabular notations and multimedia content
- Offer specialized UI units for projection layout and fields
- Integration with Ecore: Define an Ecore model and use it with Gentleman projections
Take a look at the demonstration (MODELS 2020) and see the tool in action.
⭐⭐⭐ Play with it ⭐⭐⭐
<html>
<body>
...
<div data-gentleman></div>
...
<script src="gentleman.js"></script>
</body>
</html>const MODEL = {JSON};
const PROJECTION = {JSON}
var editor = Gentleman.createEdiotr();
editor.init(MODEL, PROJETION)To build the code, follow these steps.
- Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
- From the project folder, execute the following command:
$ npm install
The editor configuration is done through a JSON file.
{
"name": EDITOR_NAME,
"header": {
"css": [HEADER_CSS_CLASS]
},
"body": {
"css": [BODY_CSS_CLASS]
},
"menu": {
"actions": [
MENU_ACTION
- name
- handler?
- content=name
- visible=true
],
"css": [BODY_CSS_CLASS]
}
}A projection is a representation of a concept that can be visualized and interacted with in the graphical user interface (GUI). Multiple projections may be defined for a single concept so as to allow different representation and level of granularity.
Example
Consider the conceptPersonwith attributes such asname,age,height,shape, andtype.
To manipulate a collection ofPerson, a Table is a highly efficient notation to make changes, but does not offer enough flexibility for viewing purposes. However, a List which is less rigid in both structure and presentation fit perfectly with this scenario.
Therefore, a good strategy would be to define a projection per use cases:
(1) Edit a Person and view all their attributes->Table projection
(2) Enumerate all the defined Person showing only their name->List projection
Every projection is a composition of layout, field and static elements; all rendered as HTML elements. They can be customized, individually or globally, directly with style rules or though external CSS.
A layout element is used to organize elements presented in the GUI. Predefined layouts:
- Wrap
- Stack
- Cell
A field element is used to receive and process input and output
- Text
- Binary
- Choice
- List
- Table
A static element is used to add element that do not accept any input and may only react to changes in the environment.
- Text
- Image
- Link
- HTML
[1] L-E Lafontant, E. Syriani. Gentleman: a light-weight web-based projectional editor generator PDF
This distribution contains the following files and folders:
- src: the source code
- demo: contains some metamodels
- doc: the source code documentation
- assets: contains static files
The source code is licensed under a GNU GENERAL PUBLIC LICENSE 3
