1. A FRESH LOOK
AT
GRAPHICAL EDITING
Dr. Jan Köhnlein
Freitag, 4. November 11

2. 一
畫
勝
千
言
Freitag, 4. November 11

3. 一
畫 A PICTURE
SAYS
勝 MORE THAN
A THOUSAND
千 WORDS
言
Freitag, 4. November 11

4. 一
畫 A PICTURE
SAYS
勝 MORE THAN
A THOUSAND
千 WORDS w
ron
言
g
Freitag, 4. November 11

5. Freitag, 4. November 11

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 {}
Freitag, 4. November 11

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 {}
Freitag, 4. November 11

8. Freitag, 4. November 11

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
Freitag, 4. November 11

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
Freitag, 4. November 11

11. Freitag, 4. November 11

12. ENTIRE ECORE ~500 WORDS
Freitag, 4. November 11

13. A GOOD DIAGRAM
IS A PROJECTION
Freitag, 4. November 11

14. Mapping
Semantic model Diagram
Freitag, 4. November 11

15. Mapping
Semantic model Diagram
Freitag, 4. November 11

16. STRUCTURAL MISMATCH
bar
Foo Bar
Package Diagram
Class Node
Property
Class Node
Association Connection
Property Label
Freitag, 4. November 11

17. EDITING METAPHORS
bar
Foo Bar
Freitag, 4. November 11

18. EDITING METAPHORS
bar
Foo Bar
Delete from model
Freitag, 4. November 11

19. EDITING METAPHORS
bar
Foo Bar
Delete from model Delete from diagram
Freitag, 4. November 11

20. EDITING METAPHORS
bar
Foo Bar
Delete from model Delete from diagram
Drag & Drop
Freitag, 4. November 11

21. EDITING METAPHORS
bar
Foo Bar
Delete from model Delete from diagram
Drag & Drop
Copy & Paste
Freitag, 4. November 11

22. TECHNOLOGY MISMATCH
EMF EMF
EMFT Changes
EMFT
Xtext
CDO
Java ...
...
Freitag, 4. November 11

23. Freitag, 4. November 11

24. TODOsforaGraphicalTool
Freitag, 4. November 11

25. TODOsforaGraphicalTool
Diagrameditor
Freitag, 4. November 11

26. TODOsforaGraphicalTool
Diagrameditor
Hard-wiredbidirectionalmapping
Freitag, 4. November 11

27. TODOsforaGraphicalTool
Diagrameditor
Hard-wiredbidirectionalmapping
Elementpicker/filter
Freitag, 4. November 11

28. TODOsforaGraphicalTool
Diagrameditor
Hard-wiredbidirectionalmapping
Elementpicker/filter
Bidirectionaltransactionmapper
Freitag, 4. November 11

29. TODOsforaGraphicalTool
Diagrameditor
Hard-wiredbidirectionalmapping
Elementpicker/filter
Bidirectionaltransactionmapper
Diagramdesign
Freitag, 4. November 11

30. TODOsforaGraphicalTool
Diagrameditor
Hard-wiredbidirectionalmapping
Elementpicker/filter
Bidirectionaltransactionmapper
Diagramdesign
Modelbrowserorfullmodeleditor
Freitag, 4. November 11

31. TODOsforaGraphicalTool
Diagrameditor
Hard-wiredbidirectionalmapping
Elementpicker/filter
Bidirectionaltransactionmapper
Diagramdesign
Modelbrowserorfullmodeleditor
Detaileditor
Freitag, 4. November 11

32. TODOsforaGraphicalTool
Diagrameditor
Hard-wiredbidirectionalmapping
Elementpicker/filter
Bidirectionaltransactionmapper
Diagramdesign
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Freitag, 4. November 11

33. TODOsforaGraphicalTool
Diagrameditor
Hard-wiredbidirectionalmapping
Elementpicker/filter
Bidirectionaltransactionmapper
Diagramdesign
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

34. TODOsforaGraphicalTool
Diagrameditor
Hard-wiredbidirectionalmapping
Elementpicker/filter
Bidirectionaltransactionmapper
Diagramdesign
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

35. TODOsforaGraphicalTool
Diagrameditor view
Hard-wiredbidirectionalmapping
Elementpicker/filter
Bidirectionaltransactionmapper
Diagramdesign
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

36. TODOsforaGraphicalTool
Diagrameditor view
uni
Hard-wiredbidirectionalmapping
Elementpicker/filter
Bidirectionaltransactionmapper
Diagramdesign
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

37. TODOsforaGraphicalTool
Diagrameditor view
uni
Hard-wiredbidirectionalmapping DSL
Elementpicker/filter
Bidirectionaltransactionmapper
Diagramdesign
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

38. TODOsforaGraphicalTool
Diagrameditor view
uni
Hard-wiredbidirectionalmapping DSL
Elementpicker/filter expressions
Bidirectionaltransactionmapper
Diagramdesign
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

39. TODOsforaGraphicalTool
Diagrameditor view
uni
Hard-wiredbidirectionalmapping DSL
Elementpicker/filter expressions
Bidirectionaltransactionmapper snapshot
Diagramdesign
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

40. TODOsforaGraphicalTool
Diagrameditor view
uni
Hard-wiredbidirectionalmapping DSL
Elementpicker/filter expressions
Bidirectionaltransactionmapper snapshot
Diagramdesign stylesheetDSL
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

41. TODOsforaGraphicalTool
Diagrameditor view
uni
Hard-wiredbidirectionalmapping DSL
Elementpicker/filter expressions
Bidirectionaltransactionmapper snapshot
live Diagramdesign stylesheetDSL
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

42. TODOsforaGraphicalTool
Diagrameditor view
uni
live Hard-wiredbidirectionalmapping DSL
Elementpicker/filter expressions
Bidirectionaltransactionmapper snapshot
live Diagramdesign stylesheetDSL
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

43. TODOsforaGraphicalTool
Diagrameditor view
uni
live Hard-wiredbidirectionalmapping DSL
Elementpicker/filter expressions
Bidirectionaltransactionmapper snapshot
live Diagramdesign stylesheetDSL
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
Freitag, 4. November 11

44. TODOsforaGraphicalTool
Diagrameditor view
uni
live Hard-wiredbidirectionalmapping DSL
Elementpicker/filter expressions
Bidirectionaltransactionmapper snapshot
live Diagramdesign stylesheetDSL
Modelbrowserorfullmodeleditor
Detaileditor
Modelnavigation
Editorsynchro
text
Freitag, 4. November 11

45. base
Freitag, 4. November 11

46. base
Modern Expression Language
Freitag, 4. November 11

47. base
Modern Expression Language
Java-Integration
Freitag, 4. November 11

48. base
Modern Expression Language
Java-Integration
Statically Typed
Freitag, 4. November 11

49. base
Modern Expression Language
Java-Integration
Statically Typed
Highly Reusable
Freitag, 4. November 11

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
Freitag, 4. November 11

51. MAPPING DSL
• Xtext-based with Xbase expressions
• Uni-directional transformation
• Interpreted
Freitag, 4. November 11

52. STYLING DSL
• Xtext-based with Xbase expressions
• Directly modifies Draw2d figures
• Interpreted
Freitag, 4. November 11

53. MyClass
SuperClass
Freitag, 4. November 11

54. MyClass this
SuperClass
Freitag, 4. November 11

55. diagram EClassHierarchy type EClass {
MyClass this
SuperClass
Freitag, 4. November 11

56. diagram EClassHierarchy type EClass {
MyClass this
SuperClass
Freitag, 4. November 11

57. diagram EClassHierarchy type EClass {
node EClassNode for this {
MyClass this
SuperClass
Freitag, 4. November 11

58. diagram EClassHierarchy type EClass {
node EClassNode for this {
MyClass this
SuperClass
Freitag, 4. November 11

59. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
MyClass this
SuperClass
Freitag, 4. November 11

60. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
MyClass this MyClass
SuperClass
Freitag, 4. November 11

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

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

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
Freitag, 4. November 11

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
Freitag, 4. November 11

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
Freitag, 4. November 11

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
Freitag, 4. November 11

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
Freitag, 4. November 11

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
Freitag, 4. November 11

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)
}
Freitag, 4. November 11

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)
}
Freitag, 4. November 11

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)
}
Freitag, 4. November 11

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)
}
Freitag, 4. November 11

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)
}
Freitag, 4. November 11

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)
}
Freitag, 4. November 11

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
}
Freitag, 4. November 11

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