A fresh look at graphical editing

A FRESH LOOK
AT
GRAPHICAL EDITING
Dr. Jan Köhnlein

Mittwoch, 28. März 12

一
畫
勝
千
言

一
畫 A PICTURE
SAYS
勝 MORE THAN
A THOUSAND
千 WORDS

言

一
畫 A PICTURE
SAYS
勝 MORE THAN
A THOUSAND
千 WORDS
My
th

言

abstract class EStructuralFeature extends ETypedElement {
boolean changeable = "true"
boolean ^volatile
boolean ^transient
String defaultValueLiteral
EJavaObject defaultValue
boolean ^unsettable
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 Class
type EJavaObject wraps Object
type EEnumerator wraps java.util.Enumeration


abstract class EStructuralFeature extends ETypedElement {
boolean changeable = "true"
boolean ^volatile
boolean ^transient
String defaultValueLiteral
EJavaObject defaultValue
boolean ^unsettable
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 {

368 Words
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 Class
type EJavaObject wraps Object
type EEnumerator wraps java.util.Enumeration


ENTIRE ECORE ~500 WORDS


DIAGRAMS
ARE TALKING TO
YOU
NOT TO YOUR
COMPUTER


REQUIREMENTS
Model Diagram
(Computer) (User)


REQUIREMENTS
Model Diagram
(Computer) (User)

Completeness
Conciseness
Consistency
Containment


REQUIREMENTS
Model Diagram
(Computer) (User)

Completeness Explain Model to Humans
Conciseness Projection, arbitrary focus
Consistency Verbosity and sloppiness
Containment Slick visual design
Usability of a drawing tool


MODEL EDITING SOLUTION

1-to-1
Mapping

Semantic model Diagram


MISMATCH IS THE RULE
Diagram
children
TreeNode
*
nodes * * edges

Node Edge


Diagram
children
TreeNode
*
nodes * * edges

Node Edge

TreeNode A
> TreeNode B


Diagram
children
TreeNode
*
nodes * * edges

Node Edge

Diagram
TreeNode A
> Node A
> TreeNode B
> 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/Delete
or Drag & Drop actions

Breaking model integrity

Not shown in any diagram


NON-GRAPHICAL EDITING


INSUFFICIENT DESIGN


YOUR EDITOR
DEGRADES
WHEN YOU FOCUS ON
MODEL EDITING


WHAT IS YOUR FOCUS
Model Diagram
Editing Editing

Enforce 1-to-1-mapping Dynamic one-way mapping
• Assimilate diagram Full graphical ﬂexibility
• Loss of expressiveness Style for understandability
• Loss of usability Choose projection easily
• Add non-graphical tools • Find another way to edit


MODEL VIEW SOLUTION

One-way
Mapping

Semantic model Diagram


MODEL
EDITING


DIAGRAM
EDITING


RUNTIME
• Reads mapping and stylesheet

• Capture snapshots of any live model

• Render GEF diagram with shape library

• Selection / navigation adapter for

• EMF, Xtext, JDT


MAPPING DSL
• Xtext-based with Xbase expressions

• Uni-directional transformation

• Interpreted


STYLING DSL
• Xtext-based with Xbase expressions

• Directly modiﬁes Draw2d ﬁgures

• Interpreted


MyClass

SuperClass


MyClass this

SuperClass


diagram EClassHierarchy type EClass {

MyClass this

SuperClass


node EClassNode for this {

MyClass this

SuperClass


label Name for this

MyClass this

SuperClass


label Name for this

MyClass this MyClass

SuperClass


label Name for this
edge SuperType for each this.getESuperTypes() {


SuperClass


label Name for this

MyClass MyClass

SuperClass this


label Name for this
=> call EClassNode for this

MyClass MyClass

SuperClass this


label Name for this

MyClass MyClass

SuperClass this SuperClass


label Name for this


SuperClass SuperClass


label Name for this
}
}
}


SuperClass SuperClass


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)
}


for EClassHierarchy
refs to mappings
arrow.lineWidth = 2
}

}


for EClassHierarchy

var arrow = new PolygonDecoration() Xbase body
arrow.lineWidth = 2
}

}


for EClassHierarchy

arrow.lineWidth = 2
this variable
}

}


for EClassHierarchy

arrow.lineWidth = 2
}
color literals
}


for EClassHierarchy

arrow.lineWidth = 2
}

style EClassNode.Name { extensions
}


for EClassHierarchy

arrow.lineWidth = 2
}

if (element.abstract) 3 else 1) semantic styling
}


The code is at

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

But remember:

IT‘S A PROTOTYPE


A fresh look at graphical editing

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Dr. Jan Köhnlein

Mehr von Dr. Jan Köhnlein (20)

A fresh look at graphical editing