a fresh look at graphical editing

A FRESH LOOK AT

GRAPHICAL EDITING

Dr. Jan Köhnlein

Freitag, 4. November 11

一畫勝千言


A PICTURESAYS

MORE THANA THOUSAND

WORDS

一畫勝千言


A PICTURESAYS

MORE THANA THOUSAND

WORDS

一畫勝千言

wrong


package ecore

class EObject {}

abstract class EModelElement extends EObject {}

class EFactory extends EObject {}abstract class ENamedElement extends EModelElement{}class EAnnotation extends EObject {}

class EPackage extends ENamedElement {}abstract class EClassifier extends ENamedElement {}class EEnumLiteral extends ENamedElement {}abstract class ETypedElement extends ENamedElement {}

class EClass extends EClassifier {}class EDataType extends EClassifier {}

abstract class EStructuralFeature extends ETypedElement {}class EOperation extends ETypedElement {}class EParameter extends ETypedElement {}

class EEnum extends EDataType {}

class EAttribute extends EStructuralFeature {}class EReference extends EStructuralFeature {}


package ecore

class EObject {}

abstract class EModelElement extends EObject {}

class EFactory extends EObject {}abstract class ENamedElement extends EModelElement{}class EAnnotation extends EObject {}

class EPackage extends ENamedElement {}abstract class EClassifier extends ENamedElement {}class EEnumLiteral extends ENamedElement {}abstract class ETypedElement extends ENamedElement {}

class EClass extends EClassifier {}class EDataType extends EClassifier {}

abstract class EStructuralFeature extends ETypedElement {}class EOperation extends ETypedElement {}class EParameter extends ETypedElement {}

class EEnum extends EDataType {}

class EAttribute extends EStructuralFeature {}class EReference extends EStructuralFeature {}

73 words


package ecore

abstract class EModelElement extends EObject { op EAnnotation getEAnnotation(String source) contains EAnnotation[] eAnnotation opposite eModelElement }

class EAnnotation extends EObject { container EModelElement eModelElement opposite eAnnotation}

abstract class ENamedElement extends EModelElement{ String name}

class EFactory extends EObject { op EObject ^create(EClass eClass) op EJavaObject createFromString(EDataType eDataType, String literalValue) op String createFromString(EDataType eDataType, EJavaObject instanceValue) refers EPackage ePackage opposite eFactoryInstance}

abstract class ETypedElement extends ENamedElement { boolean ordered = "true" boolean ûnique = "true" int lowerBound int upperBound = "1" boolean many refers EClassifier eType}

abstract class EClassifier extends ENamedElement { String instanceClassName EJavaClass instanceClass EJavaObject defaultValue op boolean isInstance(EJavaObject object) op int getClassifierID() container EPackage ePackage opposite eClassifiers}

class EPackage extends ENamedElement { String nsURI String nsPrefix op EClassifier getEClassifier(String name) refers EFactory eFactoryInstance opposite ePackage contains EPackage[] eSubPackages opposite eSuperPackage container EPackage eSuperPackage opposite eSubPackages contains EClassifier[] eClassifiers opposite ePackage}

class EOperation extends ETypedElement { contains EParameter[] eParameters opposite eOperation container EClass eContainingClass opposite eOperations refers EClassifier[] eExceptions}

class EClass extends EClassifier { boolean âbstract boolean înterface op boolean isSuperTypeOf(EClass someClass) op EStructuralFeature getEStructuralFeature(int featureID) op EStructuralFeature getEStructuralFeature(String featureName) contains EOperation[] eOperations opposite eContainingClass refers EOperation[] eAllOperations contains EStructuralFeature[] eStructuralFeatures opposite eContainingClass refers EStructuralFeature[] eAllStructuralFeatures refers EReference[] eAllContainments refers EReference[] eAllReferences refers EReference[] eReferences refers EAttribute[] eAllAtrributes refers EAttribute[] eAtrributes refers EAttribute eIDAtrributes refers EClass[] eAllSuperTypes refers EClass[] eSuperTypes}

class EDataType extends EClassifier { boolean serializable = "true"}

abstract class EStructuralFeature extends ETypedElement { boolean changeable = "true" boolean ^volatile boolean ^transient String defaultValueLiteral EJavaObject defaultValue boolean ûnsettable boolean ^derived op int getFeatureID() op EJavaClass getContainerClass() container EClass eContainingClass opposite eStructuralFeatures}

class EReference extends EStructuralFeature { boolean containment boolean ^container boolean resolveProxies = "true" refers EReference eOpposite opposite eOpposite}

class EParameter extends ETypedElement { container EOperation eOperation opposite eParameters }

class EAttribute extends EStructuralFeature { boolean iD refers EDataType eAttributeType}

class EEnumLiteral extends ENamedElement { int value EEnumerator instance container EEnum eEnum opposite eLiterals}

class EEnum extends EDataType { op EEnumLiteral getEEnumLiteral(String name) op EEnumLiteral getEEnumLiteral(int value) contains EEnumLiteral[] eLiterals opposite eEnum}

class EObject {}type EJavaClass wraps Classtype EJavaObject wraps Objecttype EEnumerator wraps java.util.Enumeration


package ecore

abstract class EModelElement extends EObject { op EAnnotation getEAnnotation(String source) contains EAnnotation[] eAnnotation opposite eModelElement }

class EAnnotation extends EObject { container EModelElement eModelElement opposite eAnnotation}

abstract class ENamedElement extends EModelElement{ String name}

class EFactory extends EObject { op EObject ^create(EClass eClass) op EJavaObject createFromString(EDataType eDataType, String literalValue) op String createFromString(EDataType eDataType, EJavaObject instanceValue) refers EPackage ePackage opposite eFactoryInstance}

abstract class ETypedElement extends ENamedElement { boolean ordered = "true" boolean ûnique = "true" int lowerBound int upperBound = "1" boolean many refers EClassifier eType}

abstract class EClassifier extends ENamedElement { String instanceClassName EJavaClass instanceClass EJavaObject defaultValue op boolean isInstance(EJavaObject object) op int getClassifierID() container EPackage ePackage opposite eClassifiers}

class EPackage extends ENamedElement { String nsURI String nsPrefix op EClassifier getEClassifier(String name) refers EFactory eFactoryInstance opposite ePackage contains EPackage[] eSubPackages opposite eSuperPackage container EPackage eSuperPackage opposite eSubPackages contains EClassifier[] eClassifiers opposite ePackage}

class EOperation extends ETypedElement { contains EParameter[] eParameters opposite eOperation container EClass eContainingClass opposite eOperations refers EClassifier[] eExceptions}

class EClass extends EClassifier { boolean âbstract boolean înterface op boolean isSuperTypeOf(EClass someClass) op EStructuralFeature getEStructuralFeature(int featureID) op EStructuralFeature getEStructuralFeature(String featureName) contains EOperation[] eOperations opposite eContainingClass refers EOperation[] eAllOperations contains EStructuralFeature[] eStructuralFeatures opposite eContainingClass refers EStructuralFeature[] eAllStructuralFeatures refers EReference[] eAllContainments refers EReference[] eAllReferences refers EReference[] eReferences refers EAttribute[] eAllAtrributes refers EAttribute[] eAtrributes refers EAttribute eIDAtrributes refers EClass[] eAllSuperTypes refers EClass[] eSuperTypes}

class EDataType extends EClassifier { boolean serializable = "true"}

abstract class EStructuralFeature extends ETypedElement { boolean changeable = "true" boolean ^volatile boolean ^transient String defaultValueLiteral EJavaObject defaultValue boolean ûnsettable boolean ^derived op int getFeatureID() op EJavaClass getContainerClass() container EClass eContainingClass opposite eStructuralFeatures}

class EReference extends EStructuralFeature { boolean containment boolean ^container boolean resolveProxies = "true" refers EReference eOpposite opposite eOpposite}

class EParameter extends ETypedElement { container EOperation eOperation opposite eParameters }

class EAttribute extends EStructuralFeature { boolean iD refers EDataType eAttributeType}

class EEnumLiteral extends ENamedElement { int value EEnumerator instance container EEnum eEnum opposite eLiterals}

class EEnum extends EDataType { op EEnumLiteral getEEnumLiteral(String name) op EEnumLiteral getEEnumLiteral(int value) contains EEnumLiteral[] eLiterals opposite eEnum}

class EObject {}type EJavaClass wraps Classtype EJavaObject wraps Objecttype EEnumerator wraps java.util.Enumeration

368 Words


ENTIRE ECORE ~500 WORDS


A GOOD DIAGRAM

IS A PROJECTION


Semantic model Diagram

Mapping


PackageClass

PropertyClassAssociation

Property

Foo Barbar

DiagramNode

NodeConnection

Label

STRUCTURAL MISMATCH


Foo Barbar

EDITING METAPHORS


Foo Barbar

EDITING METAPHORS

Delete from model


Foo Barbar

EDITING METAPHORS

Delete from model Delete from diagram


Foo Barbar

EDITING METAPHORS

Drag & Drop



Foo Barbar

EDITING METAPHORS

Drag & Drop

Copy & Paste



ChangesEMFT

TECHNOLOGY MISMATCH

EMF

CDOXtext

EMF

Java...

...

EMFT


TODOs�� for�� a�� Graphical�� Tool


TODOs�� for�� a�� Graphical�� ToolDiagram�� editor��


TODOs�� for�� a�� Graphical�� ToolDiagram�� editor�� Hard-wired�� bidirectional�� mapping



Element�� picker�� /�� filter



Element�� picker�� /�� filterBidirectional�� transaction�� mapper




Diagram�� design




Diagram�� designModel�� browser�� or�� full�� model�� editor





Detail�� editor





Detail�� editorModel�� navigation






Editor�� synchro







view







viewuni







viewDSLuni







viewDSL

expressions

uni







view

snapshot

DSLexpressions

uni







view

snapshotstylesheet�� DSL

DSLexpressions

uni







view


DSLexpressions

live

uni







view


live DSLexpressions

live

uni







view

text


live DSLexpressions

live

uni


base


baseModern Expression Language


baseModern Expression LanguageJava-Integration


baseModern Expression LanguageJava-IntegrationStatically Typed


baseModern Expression LanguageJava-IntegrationStatically TypedHighly Reusable


• Reads mapping and stylesheet

• Capture snapshots of any live model

• Render GEF diagram with shape library

• Selection / navigation adapter for

• EMF, Xtext, JDT

RUNTIME


• Xtext-based with Xbase expressions

• Uni-directional transformation

• Interpreted

MAPPING DSL


• Xtext-based with Xbase expressions

• Directly modifies Draw2d figures

• Interpreted

STYLING DSL


MyClass

SuperClass


MyClass

SuperClass

this


diagram EClassHierarchy type EClass {

MyClass

SuperClass

this


diagram EClassHierarchy type EClass { node EClassNode for this {

MyClass

SuperClass

this


diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this

MyClass

SuperClass

this


diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this

MyClass

SuperClass

this MyClass


diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() {

MyClass

SuperClass

this MyClass


diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() {

MyClass

SuperClass this

MyClass


diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this

MyClass

SuperClass this

MyClass



MyClass

SuperClass this SuperClass

MyClass



MyClass

SuperClass

this

SuperClass

MyClass


diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this } }}

MyClass

SuperClass

this

SuperClass

MyClass


stylesheet EClassHierarchy for EClassHierarchy

style EClassNode.SuperType { var arrow = new PolygonDecoration() arrow.setScale(10,10) arrow.backgroundColor = color(#ffffff) arrow.lineWidth = 2 this.targetDecoration = arrow }

style EClassNode.Name { font = font("Helvetica", 13,

if (element.abstract) 3 else 1)}


refs to mappings






Xbase body






this variable






color literals






extensions






semantic styling






https://github.com/JanKoehnlein/Generic-Graph-View

The code is at

But remember:

IT‘S A PROTOTYPE




a fresh look at graphical editing

Technology

class eenumliteral

class edatatype

class ereference

class eoperation

class eattribute

class eannotation

class epackage

class efactory