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

3. A PICTURE
SAYS
MORE THAN
A THOUSAND
WORDS

4. A PICTURE
SAYS
MORE THAN
A THOUSAND
WORDS w
ron
g

6. 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 {}

7. 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 {}
73 words
class EParameter extends ETypedElement {}
class EEnum extends EDataType {}
class EAttribute extends EStructuralFeature {}
class EReference extends EStructuralFeature {}

9. 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

10. 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

12. ENTIRE ECORE ~500 WORDS

13. A GOOD DIAGRAM
IS A PROJECTION

14. Mapping
Semantic model Diagram

15. Mapping
Semantic model Diagram

16. STRUCTURAL MISMATCH
bar
Foo Bar
Package Diagram
Class Node
Property
Class Node
Association Connection
Property Label

17. EDITING METAPHORS
bar
Foo Bar

18. EDITING METAPHORS
bar
Foo Bar
Delete from model

19. EDITING METAPHORS
bar
Foo Bar
Delete from model Delete from diagram

20. EDITING METAPHORS
bar
Foo Bar
Delete from model Delete from diagram
Drag & Drop

21. EDITING METAPHORS
bar
Foo Bar
Delete from model Delete from diagram
Drag & Drop
Copy & Paste

22. TECHNOLOGY MISMATCH
EMF EMF
EMFT Changes
EMFT
Xtext
CDO
Java ...
...

24. TODOs for a
Graphical Tool

25. TODOs for a
Diagram editor
Graphical Tool

26. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping

27. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter

28. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper

29. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design

30. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor

31. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor

32. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation

33. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation

34. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation

35. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
view
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation

36. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation

37. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter DSL
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation

38. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter DSL
Bidirectional expressions
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation

39. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
Diagram design
Model browser or full
model editor
Detail editor
Model navigation

40. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
stylesheet DSL
Diagram design
Model browser or full
model editor
Detail editor
Model navigation

41. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
liveDiagramstylesheet DSL
design
Model browser or full
model editor
Detail editor
Model navigation

42. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
live Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
liveDiagramstylesheet DSL
design
Model browser or full
model editor
Detail editor
Model navigation

43. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
live Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
liveDiagramstylesheet DSL
design
Model browser or full
model editor
Detail editor
Model navigation

44. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
live Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
liveDiagramstylesheet DSL
design
Model browser or full
text
model editor
Detail editor
Model navigation

45. base

46. base
Modern Expression Language

47. base
Modern Expression Language
Java-Integration

48. base
Modern Expression Language
Java-Integration
Statically Typed

49. base
Modern Expression Language
Java-Integration
Statically Typed
Highly Reusable

50. RUNTIME
• Reads mapping and stylesheet
• Capture snapshots of any live model
• Render GEF diagram with shape library
• Selection / navigation adapter for
• EMF, Xtext, JDT

51. MAPPING DSL
• Xtext-based with Xbase expressions
• Uni-directional transformation
• Interpreted

52. STYLING DSL
• Xtext-based with Xbase expressions
• Directly modifies Draw2d figures
• Interpreted

53. MyClass
SuperClass

54. MyClass this
SuperClass

55. diagram EClassHierarchy type EClass {
MyClass this
SuperClass

56. diagram EClassHierarchy type EClass {
MyClass this
SuperClass

57. diagram EClassHierarchy type EClass {
node EClassNode for this {
MyClass this
SuperClass

58. diagram EClassHierarchy type EClass {
node EClassNode for this {
MyClass this
SuperClass

59. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
MyClass this
SuperClass

60. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
MyClass this MyClass
SuperClass

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

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

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

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

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

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

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

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

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

70. stylesheet EClassHierarchy
for EClassHierarchy
refs to mappings
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)
}

71. stylesheet EClassHierarchy
for EClassHierarchy
style EClassNode.SuperType {
var arrow = new PolygonDecoration() Xbase body
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)
}

72. stylesheet EClassHierarchy
for EClassHierarchy
style EClassNode.SuperType {
var arrow = new PolygonDecoration()
arrow.setScale(10,10)
arrow.backgroundColor = color(#ffffff)
arrow.lineWidth = 2
this variable
this.targetDecoration = arrow
}
style EClassNode.Name {
font = font("Helvetica", 13,
if (element.abstract) 3 else 1)
}

73. 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
}
color literals
style EClassNode.Name {
font = font("Helvetica", 13,
if (element.abstract) 3 else 1)
}

74. 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 { extensions
font = font("Helvetica", 13,
if (element.abstract) 3 else 1)
}

75. 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) semantic styling
}

76. The code is at
https://github.com/JanKoehnlein/Generic-Graph-View
But remember:
IT‘S A PROTOTYPE