Converging Textual and Graphical Editors

Converging Textual
and
Graphical Editors

Moritz Eysholdt

Modeling?
Should we model or code?

Modeling?
Real programmers write code!

Modeling?
Modeling is something the architect does.

Modeling?

Models are graphical!

Modeling?

I model on my whiteboard.

Modeling?

I model on my whiteboard.

This doesn’t lead us anywhere!

Let’s take a step back

It’s about having the right notation for the job.



It would be nice if we could just run it.

sounds like a
language



sounds like a sounds like it is speciﬁc to
language the job’s domain



sounds like a sounds like it is speciﬁc to
language the job’s domain



it needs to be
formal!

The Right Notation
The Right Notation

The Right Notation
The Right Notation

• Whether we call it a model or not doesn’t matter

The Right Notation
The Right Notation


• However, tools from Eclipse Modeling help to build
tooling for this notation

The Right Notation
The Right Notation



• Instances of this notation are a primary artifact of your
software

The Right Notation
The Right Notation



software

• If it has syntax and semantics, it is a language

The Right Notation
The Right Notation



software

• If it has syntax and semantics, it is a language

• The focus on a certain kind of tasks makes it domain
speciﬁc. It becomes a DSL or DSML

Qualities for an effective development process
and a high-quality product

Language Tooling

• Support for a few, • Content Assist
Writable
orthogonal concepts • Quickﬁxes
• Appropriate, concise
syntax • Navigation
Readable • Hide technical details • Syntax highlighting
• Outline
• Reuse established
Communicable
syntax/semantics

• Instant feedback
Error-preventing • Statically typed
• Short roundtrips

Qualities for an effective development process
and a high-quality product Where?

Language Tooling

• Support for a few, • Content Assist
Writable
orthogonal concepts • Quickﬁxes
• Appropriate, concise
syntax • Navigation
Readable • Hide technical details • Syntax highlighting
• Outline
• Reuse established
Communicable
syntax/semantics

• Instant feedback
Error-preventing • Statically typed
• Short roundtrips

textual Examples?
graphical

textual Examples?
graphical

forms/tables

textual Examples?
graphical

forms/tables

mathematical

textual Examples?
graphical

forms/tables

You name it! mathematical
The limit to design
notations is available
tooling and creativity.

textual Examples?
graphical

forms/tables

You name it! mathematical
The limit to design
notations is available
tooling and creativity.
Multiple notations can be combined.

public void assertSameStructure(EObject left, EObject right) {
if(!isSameStructure(left, right)) {

Text
log.error(getErrorMessage());

Graphics
Assert.fail(getErrorMessage());
}
//logger.debug("" + counter + " elements compared");
}

protected String getErrorMessage() {
return errorMessage.toString();
}

public boolean isSameStructure(EObject left, EObject right) {
counter = 0;
return internalIsSameStructure(left, right);
}

public boolean internalIsSameStructure(EObject left, EObject right) {
++counter;
if (!isSameClass(left.eClass(), right.eClass())) {
errorMessage.append("Classes are not equal: " + left + " != " + right).append('n');
return false;
}
List<EObject> leftChildren = getRelevantChildren(left);
List<EObject> rightChildren = getRelevantChildren(right);
if(leftChildren.size() != rightChildren.size()) {
errorMessage.append("Number of children differs " + left + " " + right + " " + leftChildren.size() + " <> " + rightChildren.size()).append('n')
return false;
}
for (int i = 0; i < leftChildren.size(); ++i) {
if(!internalIsSameStructure(leftChildren.get(i), rightChildren.get(i))) {
errorMessage.append("Children differ " + left + " " + right + " with children " + leftChildren.get(i) + " " + rightChildren.get(i)).append
return false;
}
}

return true;
}

protected boolean isSameClass(EClass left, EClass right) {
return left.getName().equals(right.getName())
&& left.getEPackage().getNsURI().equals(right.getEPackage().getNsURI());
}

protected List<EObject> getRelevantChildren(EObject _this) {
List<EObject> relevantChildren = new ArrayList<EObject>(_this.eContents());
for (Iterator<EObject> i = relevantChildren.iterator(); i.hasNext();) {
EObject next = i.next();
if (!isRelevantChild(_this, next)) {
i.remove();


Text

Graphics
}
}

• Detailed views
}

counter = 0;
}

++counter;
return false;
}
return false;
}
return false;
}
}

return true;
}
Information that is not in the text,
protected boolean isSameClass(EClass left, exists.
doesn’t EClass right) {
}

i.remove();


Text

Graphics
}
}

• Detailed views
• High-level views
}

counter = 0;
}

++counter;
return false;
}
return false;
}
return false;
}
}

return true;
The diagram is the big picture, details are
}
Information that is not in the text, in property dialogs.
protected boolean isSameClass(EClass left, exists.
doesn’t EClass right) { Graphical notations are commonly used
&& left.getEPackage().getNsURI().equals(right.getEPackage().getNsURI()); at higher levels of abstractions.
}

i.remove();


Text

Graphics
}
}

• Detailed views
protected String getErrorMessage() { • High-level views
•
}
Very formal syntax
counter = 0;
}

++counter;
return false;
}
return false;
}
return false;
}
}

return true;
} Non-Formal Elements
whitespace, line-breaks, comments
}

i.remove();


Text

Graphics
}
}

• Detailed views
• •
}
Very formal syntax Suggests non-formalism
counter = 0;
}

++counter;
return false;
}
return false;
}
return false;
}
}

return true;
Non-Formal Elements
} Non-Formal Elements
Modify: position, size, shape, color, font, icon
whitespace, line-breaks, comments
return left.getName().equals(right.getName()) Add: note-box, custom shapes, comments
}

i.remove();


Text

Graphics
}
}

• Detailed views
• •
}
• Standard text editor
counter = 0;
}

++counter;
return false;
}
return false;
}
return false;
}
}

return true;
}
The editor can be language-aware, but is
protected boolean isSameClass(EClass required to.
not left, EClass right) {
}

i.remove();


Text

Graphics
}
}

• Detailed views
• •
}
• Standard text editor • Custom editor
counter = 0;
}

++counter;
return false;
}
return false;
}
return false;
}
}

return true;
}
The editor can be language-aware, but is Each language requires a special
protected boolean isSameClass(EClass required to.
not left, EClass right) { (or generic) editor.
}

i.remove();


Text

Graphics
}
}

• Detailed views
• •
}
counter = 0;
}
• Standard versioning /

multi-user support
++counter;
return false;
}
return false;
}
return false;
}
}

return true;
}
SVN, CVS, GIT, GNU diff/patch, etc.
}

i.remove();


Text

Graphics
}
}

• Detailed views
• •
}
counter = 0;
}
• Custom versioning /

multi-user support
++counter;

multi-user support
return false;
}
return false;
}
return false;
}
}

return true;
}
Model repositories, diff/merge needs to
SVN, CVS, GIT, GNU diff/patch, etc.
be language-aware
}

i.remove();


Text

Graphics
}
}

• Detailed views
• •
}
counter = 0;
}

multi-user support
++counter;
if (!isSameClass(left.eClass(), right.eClass())) { multi-user support
•

} Editing with keyboard
return false;

return false;
}
return false;
}
}

return true;
}

}

i.remove();


Text

Graphics
}
}

• Detailed views
• •
}
counter = 0;
}

multi-user support
++counter;
• •

return false;
Editing with mouse
return false;
}
return false;
}
}

return true;
}

}

i.remove();


Text

Graphics
}
}

• Detailed views
• •
}
counter = 0;
}

multi-user support
++counter;
• •

return false;
Editing with mouse
• Expressions, Lists
return false;
}
return false;
}
}

return true;
Mathematical Expressions,
}
Imperative Command Lists,

Hierarchical Data,
etc.
}

i.remove();


Text

Graphics
}
}

• Detailed views
• •
}
counter = 0;
}

multi-user support
++counter;
• •

return false;
Editing with mouse
• Expressions, Lists • Flow, Structure
return false;
}
return false;
}
}
Visual Pattern-Matching
Mathematical Expressions,
return true;
Flow: Workﬂow, State-Machine,
}
Imperative Command Lists,
Process Chain
Hierarchical Data,
return left.getName().equals(right.getName()) Structure: Class Diagram, Entity
etc.
} Relationship Diagram
i.remove();


Text

Graphics
}
}

• Detailed views
• •
}
counter = 0;
}

multi-user support
++counter;
• •

return false;
Editing with mouse
• Expressions, Lists • Flow, Structure
return false;
}
return false;
}
}

Why not have both?
return true;
}

}

i.remove();

Xtext vs GMF

A textual concrete syntax and a graphical concrete syntax
on top of the same abstract syntax.

Xtext

ar
m
m
ra
G
Runtime
Superclass

Subclass Class

Ecore model LL(*) Parser Text editor

Xtext

ar
m
m
ra
G
Semantic
Metamodel Runtime
Superclass

Subclass Class

Ecore model LL(*) Parser Text editor

Superclass

GMF Subclass

Ecore model
Class

Superclass

GMF Subclass

Ecore model
Class

Graph
Model

Superclass

GMF Subclass

Ecore model
Class

Graph Tool
Model Model

Superclass

GMF Subclass

Ecore model
Class

Graph Map Tool
Model Model Model

Superclass

GMF Subclass

Ecore model
Class

Graph Map Tool
Model Model Model

GMF
Generator
Model

Runtime Models
and
Synchronization

Converging Textual and Graphical Editors

Xtext
EObject element

eAdapters
NodeAdapter

node
children AbstractNode
offset: int
length: int

CompositeNode LeafNode
text: String
parent

Xtext GMF
EObject element EObject

element
eAdapters
NodeAdapter View

node
children AbstractNode Node Edge
offset: int
length: int

layoutConstraints bendpoints
CompositeNode LeafNode Bounds Bendpoints
text: String x: int
parent y: int
width: int
height: int

GMF
ResourceSet

XMIResource DiagramResource

Canonical
EditPolicy

GMF
ResourceSet

XMIResource DiagramResource

Canonical
Canonical
EditPolicy
EditPolicy

Xtext

Textual Model

Serializer
Parser
Node Model

Ecore Model
Instance

Xtext
XtextResource

Textual Model

Serializer
Parser
Node Model

Ecore Model
Instance

Xtext
XtextResource

Textual Model

Serializer
Parser
Node Model

Ecore Model
Instance

getContents()

Xtext load(), save()

XtextResource

Textual Model

Serializer
Parser
Node Model

Ecore Model
Instance

getContents()

Xtext load(), save()

XtextResource

Textual Model

Serializer
Parser
Node Model

Ecore Model
Instance FragmentProvider

getContents() getURIFragment()
getEObject()

ResourceSet

XtextResource DiagramResource

diagram
change

ResourceSet


reparse()
w/ errors

ResourceSet


ResourceSet


Canonical
EditPolicy

Fi e l
od a
M xtu
le l
Te
ResourceSet ResourceSet

XtextResource XtextResource DiagramResource

Fi e l
od a
M xtu
le l
Te

XtextResource save() XtextResource DiagramResource

Fi e l
od a
M xtu
le l
Te

XtextResource reload() XtextResource DiagramResource

grammar org.xtext.cg2009.Entities
with org.eclipse.xtext.common.Terminals

generate entities "http://www.xtext.org/cg2009/Entities"

Model :
{Model} (entities += Entity)*;

Entity returns Entity:
'entity' (name=ID)? ('extends' superType=[Entity])? '{'
(properties+=Property)*
'}';

Property:
SimpleProperty | ReferenceProperty;

SimpleProperty:
'property' (name=ID)? ':' type=('String'|'Number'|'Bool');

ReferenceProperty :
(name=ID)? 'refs' ('one' | many?='many')? type=[Entity];


Avoid empty
models
Model :

'}';

Property:

SimpleProperty:

ReferenceProperty :


Avoid empty
models
Model :

'}';

Property:
Cover mandatory
properties in
SimpleProperty:
validation

ReferenceProperty :


Avoid empty
Carefully select
models
Model : containment or cross
{Model} (entities += Entity)*; references

'}';

Property:
Cover mandatory
properties in
SimpleProperty:
validation

ReferenceProperty :

Xtext
Implement a
Formatter

Xtext
Implement a
Formatter

Implement a
FragmentProvider

Xtext
Implement a
Formatter

Implement a
FragmentProvider

Implement a
JavaValidator

GMF

Initialize
mandatory
properties

GMF

Initialize
mandatory
properties

No Phantom
Nodes without
container

Add a
transaction on
GMF
load

Initialize
mandatory
properties

No Phantom
Nodes without
container

Representing (Non)-Containment References in
Xtext and GMF

Representing (Non)-Containment References in
Xtext and GMF

EMF containment non-containment

Rule-Call to a Parser Rule Cross-Reference
Xtext
Rule: value=MyRule Rule: value=[MyRule|ID]

Diagram’ Root-Object:
• Node
Node’s Object:
GMF Node’s Object: • Edge (an edge can have
• Compartment an object)
• Side-Afﬁxed nodes
• Edges (Phantom Nodes)

Integration Helpers
• Prevent conﬂicting modiﬁcations

Integration Helpers
• Navigate
• Diagram ➜ Text

Integration Helpers
• Navigate
• Text ➜ Diagram
(needs Index)

Integration Helpers
• Navigate
(needs Index)
• Parser wrapper

Integration Helpers
• Navigate
(needs Index)
• Parser wrapper
• Popup editor

Summary
• Think about the notation, the language, that
would be ideal to get your work done.
• Textual and graphical syntax can be combined.
• To integrate Xtext into GMF, exchange the
XMIResource with an XtextResource -> GMF
operates on a model persisted in textual syntax.
• Some integration code is helpful, too.
• itemis provides professional assistance.

Moritz Eysholdt

Converging Textual and Graphical Editors

More Related Content

Similar to Converging Textual and Graphical Editors (20)

More from meysholdt (8)

Recently uploaded (20)

Converging Textual and Graphical Editors