Converging Textual and Graphical Editors

Converging Textual and Graphical Editors Moritz Eysholdt

Modeling?

Modeling? Should we model or code?

Modeling? Should we model or code? Real programmers write code!

Modeling? Should we model or code? Real programmers write code! Modeling is something the architect does.

Modeling? Should we model or code? Real programmers write code! Modeling is something the architect does. Models are graphical!

Modeling? Should we model or code? Real programmers write code! Modeling is something the architect does. Models are graphical! I model on my whiteboard.

Modeling? Should we model or code? Real programmers write code! Modeling is something the architect does. Models are graphical! I model on my whiteboard. This doesn’t lead us anywhere!

Let’s take a step back

Let’s take a step back It’s about having the right notation for the job.

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.

Let’s take a step back sounds like a language It’s about having the right notation for the job. It would be nice if we could just run it.

Let’s take a step back sounds like a sounds like it is speciﬁc to language the job’s domain It’s about having the right notation for the job. It would be nice if we could just run it.

Let’s take a step back sounds like a sounds like it is speciﬁc to language the job’s domain It’s about having the right notation for the job. It would be nice if we could just run it. 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 • Whether we call it a model or not doesn’t matter • However, tools from Eclipse Modeling help to build tooling for this notation

The Right Notation The Right Notation • Whether we call it a model or not doesn’t matter • However, tools from Eclipse Modeling help to build tooling for this notation • Instances of this notation are a primary artifact of your software

The Right Notation The Right Notation • Whether we call it a model or not doesn’t matter • However, tools from Eclipse Modeling help to build tooling for this notation • Instances of this notation are a primary artifact of your software • If it has syntax and semantics, it is a language

The Right Notation The Right Notation • Whether we call it a model or not doesn’t matter • However, tools from Eclipse Modeling help to build tooling for this notation • Instances of this notation are a primary artifact of your 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

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

Examples?

textual Examples?

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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views 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; } Information that is not in the text, protected boolean isSameClass(EClass left, exists. doesn’t 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { return errorMessage.toString(); • High-level views } 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; 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 return left.getName().equals(right.getName()) && left.getEPackage().getNsURI().equals(right.getEPackage().getNsURI()); at higher levels of abstractions. } 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • return errorMessage.toString(); } Very formal syntax 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; } Non-Formal Elements whitespace, line-breaks, comments 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • • return errorMessage.toString(); } Very formal syntax Suggests non-formalism 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; Non-Formal Elements } Non-Formal Elements Modify: position, size, shape, color, font, icon whitespace, line-breaks, comments protected boolean isSameClass(EClass left, EClass right) { return left.getName().equals(right.getName()) Add: note-box, custom shapes, comments && 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • • return errorMessage.toString(); } Very formal syntax Suggests non-formalism • Standard text editor 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; } The editor can be language-aware, but is protected boolean isSameClass(EClass required to. not 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • • return errorMessage.toString(); } Very formal syntax Suggests non-formalism • Standard text editor • Custom editor 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; } 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. 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • • return errorMessage.toString(); } Very formal syntax Suggests non-formalism • Standard text editor • Custom editor public boolean isSameStructure(EObject left, EObject right) { counter = 0; return internalIsSameStructure(left, right); } • Standard versioning / public boolean internalIsSameStructure(EObject left, EObject right) { multi-user support ++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; } SVN, CVS, GIT, GNU diff/patch, etc. 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • • return errorMessage.toString(); } Very formal syntax Suggests non-formalism • Standard text editor • Custom editor public boolean isSameStructure(EObject left, EObject right) { counter = 0; return internalIsSameStructure(left, right); } • Standard versioning / public boolean internalIsSameStructure(EObject left, EObject right) { • Custom versioning / multi-user support ++counter; if (!isSameClass(left.eClass(), right.eClass())) { multi-user support 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; } Model repositories, diff/merge needs to SVN, CVS, GIT, GNU diff/patch, etc. protected boolean isSameClass(EClass left, EClass right) { return left.getName().equals(right.getName()) be language-aware && 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • • return errorMessage.toString(); } Very formal syntax Suggests non-formalism • Standard text editor • Custom editor public boolean isSameStructure(EObject left, EObject right) { counter = 0; return internalIsSameStructure(left, right); } • Standard versioning / public boolean internalIsSameStructure(EObject left, EObject right) { • Custom versioning / multi-user support ++counter; if (!isSameClass(left.eClass(), right.eClass())) { multi-user support • errorMessage.append("Classes are not equal: " + left + " != " + right).append('n'); } Editing with keyboard 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • • return errorMessage.toString(); } Very formal syntax Suggests non-formalism • Standard text editor • Custom editor public boolean isSameStructure(EObject left, EObject right) { counter = 0; return internalIsSameStructure(left, right); } • Standard versioning / public boolean internalIsSameStructure(EObject left, EObject right) { • Custom versioning / multi-user support ++counter; if (!isSameClass(left.eClass(), right.eClass())) { multi-user support • • errorMessage.append("Classes are not equal: " + left + " != " + right).append('n'); } Editing with keyboard return false; Editing with mouse 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • • return errorMessage.toString(); } Very formal syntax Suggests non-formalism • Standard text editor • Custom editor public boolean isSameStructure(EObject left, EObject right) { counter = 0; return internalIsSameStructure(left, right); } • Standard versioning / public boolean internalIsSameStructure(EObject left, EObject right) { • Custom versioning / multi-user support ++counter; if (!isSameClass(left.eClass(), right.eClass())) { multi-user support • • errorMessage.append("Classes are not equal: " + left + " != " + right).append('n'); } Editing with keyboard return false; Editing with mouse • Expressions, Lists 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; Mathematical Expressions, } Imperative Command Lists, Hierarchical Data, protected boolean isSameClass(EClass left, EClass right) { return left.getName().equals(right.getName()) etc. && 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • • return errorMessage.toString(); } Very formal syntax Suggests non-formalism • Standard text editor • Custom editor public boolean isSameStructure(EObject left, EObject right) { counter = 0; return internalIsSameStructure(left, right); } • Standard versioning / public boolean internalIsSameStructure(EObject left, EObject right) { • Custom versioning / multi-user support ++counter; if (!isSameClass(left.eClass(), right.eClass())) { multi-user support • • errorMessage.append("Classes are not equal: " + left + " != " + right).append('n'); } Editing with keyboard return false; Editing with mouse • Expressions, Lists • Flow, Structure 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; } } Visual Pattern-Matching Mathematical Expressions, return true; Flow: Workﬂow, State-Machine, } Imperative Command Lists, Process Chain Hierarchical Data, protected boolean isSameClass(EClass left, EClass right) { return left.getName().equals(right.getName()) Structure: Class Diagram, Entity etc. && left.getEPackage().getNsURI().equals(right.getEPackage().getNsURI()); } Relationship Diagram 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();

public void assertSameStructure(EObject left, EObject right) { if(!isSameStructure(left, right)) { Text log.error(getErrorMessage()); Graphics Assert.fail(getErrorMessage()); } //logger.debug("" + counter + " elements compared"); } • Detailed views protected String getErrorMessage() { • High-level views • • return errorMessage.toString(); } Very formal syntax Suggests non-formalism • Standard text editor • Custom editor public boolean isSameStructure(EObject left, EObject right) { counter = 0; return internalIsSameStructure(left, right); } • Standard versioning / public boolean internalIsSameStructure(EObject left, EObject right) { • Custom versioning / multi-user support ++counter; if (!isSameClass(left.eClass(), right.eClass())) { multi-user support • • errorMessage.append("Classes are not equal: " + left + " != " + right).append('n'); } Editing with keyboard return false; Editing with mouse • Expressions, Lists • Flow, Structure 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; } } Why not have both? 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();

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

Xtext G ra m m ar

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

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 XtextResource DiagramResource

reparse() w/ errors ResourceSet XtextResource DiagramResource

ResourceSet XtextResource DiagramResource 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 ResourceSet ResourceSet XtextResource save() XtextResource DiagramResource

Fi e l od a M xtu le l Te ResourceSet ResourceSet XtextResource reload() XtextResource DiagramResource

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

Alignment

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];

grammar org.xtext.cg2009.Entities with org.eclipse.xtext.common.Terminals Avoid empty generate entities "http://www.xtext.org/cg2009/Entities" models 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];

grammar org.xtext.cg2009.Entities with org.eclipse.xtext.common.Terminals Avoid empty generate entities "http://www.xtext.org/cg2009/Entities" models Model : {Model} (entities += Entity)*; Entity returns Entity: 'entity' (name=ID)? ('extends' superType=[Entity])? '{' (properties+=Property)* '}'; Property: Cover mandatory SimpleProperty | ReferenceProperty; properties in SimpleProperty: validation 'property' (name=ID)? ':' type=('String'|'Number'|'Bool'); ReferenceProperty : (name=ID)? 'refs' ('one' | many?='many')? type=[Entity];

grammar org.xtext.cg2009.Entities with org.eclipse.xtext.common.Terminals Avoid empty generate entities "http://www.xtext.org/cg2009/Entities" Carefully select models Model : containment or cross {Model} (entities += Entity)*; references Entity returns Entity: 'entity' (name=ID)? ('extends' superType=[Entity])? '{' (properties+=Property)* '}'; Property: Cover mandatory SimpleProperty | ReferenceProperty; properties in SimpleProperty: validation 'property' (name=ID)? ':' type=('String'|'Number'|'Bool'); ReferenceProperty : (name=ID)? 'refs' ('one' | many?='many')? type=[Entity];

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

Integration Helpers • Prevent conﬂicting modiﬁcations

Integration Helpers • Prevent conﬂicting modiﬁcations • Navigate • Diagram ➜ Text

Integration Helpers • Prevent conﬂicting modiﬁcations • Navigate • Diagram ➜ Text • Text ➜ Diagram (needs Index)

Integration Helpers • Prevent conﬂicting modiﬁcations • Navigate • Diagram ➜ Text • Text ➜ Diagram (needs Index) • Parser wrapper

Integration Helpers • Prevent conﬂicting modiﬁcations • Navigate • Diagram ➜ Text • Text ➜ Diagram (needs Index) • Parser wrapper • Popup editor

Demo Time

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

by meysholdt

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 13

Statistics

Converging Textual and Graphical Editors Presentation Transcript