A fresh look at graphical editing

A FRESH LOOK AT

GRAPHICAL EDITING

Dr. Jan Köhnlein

Mittwoch, 28. März 12

一畫勝千言


A PICTURESAYS

MORE THANA THOUSAND

WORDS

一畫勝千言


A PICTURESAYS

MORE THANA THOUSAND

WORDS

一畫勝千言

Myth



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



DIAGRAMS ARE TALKING TO

YOU NOT TO YOUR COMPUTER


REQUIREMENTSModel(Computer)

Diagram(User)



Diagram(User)

Completeness

Conciseness

Consistency

Containment


Explain Model to Humans

Projection, arbitrary focus

Verbosity and sloppiness

Slick visual design

Usability of a drawing tool


Diagram(User)

Completeness

Conciseness

Consistency

Containment


Semantic model Diagram

1-to-1Mapping

MODEL EDITING SOLUTION



1-to-1Mapping

MODEL EDITING SOLUTION


MISMATCH IS THE RULE

TreeNode*

childrenDiagram

Node Edge

edgesnodes * *



TreeNode*

childrenDiagram

Node Edge

edgesnodes * *



TreeNode*

childrenDiagram

Node Edge

edgesnodes * *

TreeNode A > TreeNode B



TreeNode*

childrenDiagram

Node Edge

edgesnodes * *




TreeNode*

childrenDiagram

Node Edge

edgesnodes * *


Diagram > Node A> Node B> Edge (A,B)


DIAGRAM ASSIMILATION


USER SURPRISE


USER SURPRISE

Delete

Cut / Copy / Paste

Drag & Drop


GHOST ELEMENTS


GHOST ELEMENTS

Remnants of failed Cut/Copy/Paste/Deleteor Drag & Drop actions

Breaking model integrity

Not shown in any diagram


NON-GRAPHICAL EDITING






INSUFFICIENT DESIGN


INSUFFICIENT DESIGN


YOUR EDITOR DEGRADES

WHEN YOU FOCUS ON MODEL EDITING


Enforce 1-to-1-mapping

•Assimilate diagram

• Loss of expressiveness

• Loss of usability

•Add non-graphical tools

WHAT IS YOUR FOCUSModelEditing

Diagram Editing

Dynamic one-way mapping

Full graphical flexibility

Style for understandability

Choose projection easily

• Find another way to edit



One-wayMapping

MODEL VIEW SOLUTION



One-wayMapping

MODEL VIEW SOLUTION


MODELEDITING


DIAGRAMEDITING


• 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 {

MyClass

SuperClass

this


diagram EClassHierarchy type EClass { node EClassNode for this {

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

MyClass



MyClass

SuperClass this SuperClass

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




Technology

A fresh look at graphical editing