A fresh look at graphical editing

  • 1,035 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,035
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
28
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. A FRESH LOOK AT GRAPHICAL EDITING Dr. Jan KöhnleinFreitag, 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 言 gFreitag, 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.EnumerationFreitag, 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.EnumerationFreitag, 4. November 11
  • 11. Freitag, 4. November 11
  • 12. ENTIRE ECORE ~500 WORDSFreitag, 4. November 11
  • 13. A GOOD DIAGRAM IS A PROJECTIONFreitag, 4. November 11
  • 14. Mapping Semantic model DiagramFreitag, 4. November 11
  • 15. Mapping Semantic model DiagramFreitag, 4. November 11
  • 16. STRUCTURAL MISMATCH bar Foo Bar Package Diagram Class Node Property Class Node Association Connection Property LabelFreitag, 4. November 11
  • 17. EDITING METAPHORS bar Foo BarFreitag, 4. November 11
  • 18. EDITING METAPHORS bar Foo Bar Delete from modelFreitag, 4. November 11
  • 19. EDITING METAPHORS bar Foo Bar Delete from model Delete from diagramFreitag, 4. November 11
  • 20. EDITING METAPHORS bar Foo Bar Delete from model Delete from diagram Drag & DropFreitag, 4. November 11
  • 21. EDITING METAPHORS bar Foo Bar Delete from model Delete from diagram Drag & Drop Copy & PasteFreitag, 4. November 11
  • 22. TECHNOLOGY MISMATCH EMF EMF EMFT Changes EMFT Xtext CDO Java ... ...Freitag, 4. November 11
  • 23. Freitag, 4. November 11
  • 24. TODOsforaGraphicalToolFreitag, 4. November 11
  • 25. TODOsforaGraphicalTool DiagrameditorFreitag, 4. November 11
  • 26. TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmappingFreitag, 4. November 11
  • 27. TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filterFreitag, 4. November 11
  • 28. TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter BidirectionaltransactionmapperFreitag, 4. November 11
  • 29. TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper DiagramdesignFreitag, 4. November 11
  • 30. TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign ModelbrowserorfullmodeleditorFreitag, 4. November 11
  • 31. TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor DetaileditorFreitag, 4. November 11
  • 32. TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor ModelnavigationFreitag, 4. November 11
  • 33. TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 34. TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 35. TODOsforaGraphicalTool Diagrameditor view Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 36. TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 37. TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping DSL Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 38. TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 39. TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 40. TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot Diagramdesign stylesheetDSL Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 41. TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot live Diagramdesign stylesheetDSL Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 42. TODOsforaGraphicalTool Diagrameditor view uni live Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot live Diagramdesign stylesheetDSL Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 43. TODOsforaGraphicalTool Diagrameditor view uni live Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot live Diagramdesign stylesheetDSL Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • 44. TODOsforaGraphicalTool Diagrameditor view uni live Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot live Diagramdesign stylesheetDSL Modelbrowserorfullmodeleditor Detaileditor Modelnavigation Editorsynchro textFreitag, 4. November 11
  • 45. baseFreitag, 4. November 11
  • 46. base Modern Expression LanguageFreitag, 4. November 11
  • 47. base Modern Expression Language Java-IntegrationFreitag, 4. November 11
  • 48. base Modern Expression Language Java-Integration Statically TypedFreitag, 4. November 11
  • 49. base Modern Expression Language Java-Integration Statically Typed Highly ReusableFreitag, 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, JDTFreitag, 4. November 11
  • 51. MAPPING DSL • Xtext-based with Xbase expressions • Uni-directional transformation • InterpretedFreitag, 4. November 11
  • 52. STYLING DSL • Xtext-based with Xbase expressions • Directly modifies Draw2d figures • InterpretedFreitag, 4. November 11
  • 53. MyClass SuperClassFreitag, 4. November 11
  • 54. MyClass this SuperClassFreitag, 4. November 11
  • 55. diagram EClassHierarchy type EClass { MyClass this SuperClassFreitag, 4. November 11
  • 56. diagram EClassHierarchy type EClass { MyClass this SuperClassFreitag, 4. November 11
  • 57. diagram EClassHierarchy type EClass { node EClassNode for this { MyClass this SuperClassFreitag, 4. November 11
  • 58. diagram EClassHierarchy type EClass { node EClassNode for this { MyClass this SuperClassFreitag, 4. November 11
  • 59. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this MyClass this SuperClassFreitag, 4. November 11
  • 60. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this MyClass this MyClass SuperClassFreitag, 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 SuperClassFreitag, 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 thisFreitag, 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 thisFreitag, 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 thisFreitag, 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 SuperClassFreitag, 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 SuperClassFreitag, 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 SuperClassFreitag, 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 SuperClassFreitag, 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 PROTOTYPEFreitag, 4. November 11