A FRESH LOOK                                AT                        GRAPHICAL EDITING                             Dr. Ja...
一                        畫                        勝                        千Mittwoch, 28. März 12                        言
一                        畫     A PICTURE                                 SAYS                        勝    MORE THAN       ...
一                        畫     A PICTURE                                 SAYS                        勝    MORE THAN       ...
Mittwoch, 28. März 12
abstract class EStructuralFeature extends ETypedElement {                        	    boolean changeable = "true"         ...
abstract class EStructuralFeature extends ETypedElement {                         	    boolean changeable = "true"        ...
Mittwoch, 28. März 12
ENTIRE ECORE ~500 WORDSMittwoch, 28. März 12
Mittwoch, 28. März 12
DIAGRAMS                        ARE TALKING TO                             YOU                         NOT TO YOUR        ...
REQUIREMENTS                        Model          Diagram                        (Computer)     (User)Mittwoch, 28. März 12
REQUIREMENTS                               Model          Diagram                               (Computer)     (User)     ...
REQUIREMENTS                               Model                        Diagram                               (Computer)  ...
MODEL EDITING SOLUTION                                   1-to-1                                  Mapping                 S...
MODEL EDITING SOLUTION                                   1-to-1                                  Mapping                 S...
MISMATCH IS THE RULE                                                          Diagram                                   ch...
MISMATCH IS THE RULE                                                          Diagram                                   ch...
MISMATCH IS THE RULE                                                           Diagram                                    ...
MISMATCH IS THE RULE                                                           Diagram                                    ...
MISMATCH IS THE RULE                                                           Diagram                                    ...
DIAGRAM ASSIMILATIONMittwoch, 28. März 12
USER SURPRISEMittwoch, 28. März 12
USER SURPRISE                        Delete                        Cut / Copy / Paste                        Drag & DropMi...
GHOST ELEMENTSMittwoch, 28. März 12
GHOST ELEMENTS                        Remnants of failed                        Cut/Copy/Paste/Delete                     ...
NON-GRAPHICAL EDITINGMittwoch, 28. März 12
NON-GRAPHICAL EDITINGMittwoch, 28. März 12
NON-GRAPHICAL EDITINGMittwoch, 28. März 12
INSUFFICIENT DESIGNMittwoch, 28. März 12
INSUFFICIENT DESIGNMittwoch, 28. März 12
YOUR EDITOR                            DEGRADES                        WHEN YOU FOCUS ON                          MODEL ED...
WHAT IS YOUR FOCUS                          Model                         Diagram                          Editing        ...
MODEL VIEW SOLUTION                                  One-way                                  Mapping                 Sema...
MODEL VIEW SOLUTION                                  One-way                                  Mapping                 Sema...
MODEL                        EDITINGMittwoch, 28. März 12
DIAGRAM                        EDITINGMittwoch, 28. März 12
RUNTIME                        •   Reads mapping and stylesheet                        •   Capture snapshots of any live m...
MAPPING DSL                        •   Xtext-based with Xbase expressions                        •   Uni-directional trans...
STYLING DSL                        •   Xtext-based with Xbase expressions                        •   Directly modifies Draw...
MyClass                        SuperClassMittwoch, 28. März 12
MyClass     this                        SuperClassMittwoch, 28. März 12
diagram EClassHierarchy type EClass {                         MyClass       this                        SuperClassMittwoch...
diagram EClassHierarchy type EClass {                         MyClass       this                        SuperClassMittwoch...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                         MyClass ...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                         MyClass ...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                        	 	 label...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                        	 	 label...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                        	 	 label...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                        	 	 label...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                        	 	 label...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                        	 	 label...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                        	 	 label...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                        	 	 label...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                        	 	 label...
diagram EClassHierarchy type EClass {                        	 node EClassNode for this {                        	 	 label...
stylesheet EClassHierarchy            for EClassHierarchy          style EClassNode.SuperType {          	 var arrow = new...
stylesheet EClassHierarchy            for EClassHierarchy                                                     refs to mapp...
stylesheet EClassHierarchy            for EClassHierarchy          style EClassNode.SuperType {          	 var arrow = new...
stylesheet EClassHierarchy            for EClassHierarchy          style EClassNode.SuperType {          	 var arrow = new...
stylesheet EClassHierarchy            for EClassHierarchy          style EClassNode.SuperType {          	 var arrow = new...
stylesheet EClassHierarchy            for EClassHierarchy          style EClassNode.SuperType {          	 var arrow = new...
stylesheet EClassHierarchy            for EClassHierarchy          style EClassNode.SuperType {          	 var arrow = new...
The code is at               https://github.com/JanKoehnlein/Generic-Graph-View                                But remembe...
Upcoming SlideShare
Loading in …5
×

A fresh look at graphical editing

3,716 views

Published on

Ta

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,716
On SlideShare
0
From Embeds
0
Number of Embeds
2,254
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

A fresh look at graphical editing

  1. 1. A FRESH LOOK AT GRAPHICAL EDITING Dr. Jan KöhnleinMittwoch, 28. März 12
  2. 2. 一 畫 勝 千Mittwoch, 28. März 12 言
  3. 3. 一 畫 A PICTURE SAYS 勝 MORE THAN A THOUSAND 千 WORDSMittwoch, 28. März 12 言
  4. 4. 一 畫 A PICTURE SAYS 勝 MORE THAN A THOUSAND 千 WORDS My thMittwoch, 28. März 12 言
  5. 5. Mittwoch, 28. März 12
  6. 6. 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.EnumerationMittwoch, 28. März 12
  7. 7. 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.EnumerationMittwoch, 28. März 12
  8. 8. Mittwoch, 28. März 12
  9. 9. ENTIRE ECORE ~500 WORDSMittwoch, 28. März 12
  10. 10. Mittwoch, 28. März 12
  11. 11. DIAGRAMS ARE TALKING TO YOU NOT TO YOUR COMPUTERMittwoch, 28. März 12
  12. 12. REQUIREMENTS Model Diagram (Computer) (User)Mittwoch, 28. März 12
  13. 13. REQUIREMENTS Model Diagram (Computer) (User) Completeness Conciseness Consistency ContainmentMittwoch, 28. März 12
  14. 14. 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 toolMittwoch, 28. März 12
  15. 15. MODEL EDITING SOLUTION 1-to-1 Mapping Semantic model DiagramMittwoch, 28. März 12
  16. 16. MODEL EDITING SOLUTION 1-to-1 Mapping Semantic model DiagramMittwoch, 28. März 12
  17. 17. MISMATCH IS THE RULE Diagram children TreeNode * nodes * * edges Node EdgeMittwoch, 28. März 12
  18. 18. MISMATCH IS THE RULE Diagram children TreeNode * nodes * * edges Node EdgeMittwoch, 28. März 12
  19. 19. MISMATCH IS THE RULE Diagram children TreeNode * nodes * * edges Node Edge TreeNode A > TreeNode BMittwoch, 28. März 12
  20. 20. MISMATCH IS THE RULE Diagram children TreeNode * nodes * * edges Node Edge TreeNode A > TreeNode BMittwoch, 28. März 12
  21. 21. MISMATCH IS THE RULE Diagram children TreeNode * nodes * * edges Node Edge Diagram TreeNode A > Node A > TreeNode B > Node B > Edge (A,B)Mittwoch, 28. März 12
  22. 22. DIAGRAM ASSIMILATIONMittwoch, 28. März 12
  23. 23. USER SURPRISEMittwoch, 28. März 12
  24. 24. USER SURPRISE Delete Cut / Copy / Paste Drag & DropMittwoch, 28. März 12
  25. 25. GHOST ELEMENTSMittwoch, 28. März 12
  26. 26. GHOST ELEMENTS Remnants of failed Cut/Copy/Paste/Delete or Drag & Drop actions Breaking model integrity Not shown in any diagramMittwoch, 28. März 12
  27. 27. NON-GRAPHICAL EDITINGMittwoch, 28. März 12
  28. 28. NON-GRAPHICAL EDITINGMittwoch, 28. März 12
  29. 29. NON-GRAPHICAL EDITINGMittwoch, 28. März 12
  30. 30. INSUFFICIENT DESIGNMittwoch, 28. März 12
  31. 31. INSUFFICIENT DESIGNMittwoch, 28. März 12
  32. 32. YOUR EDITOR DEGRADES WHEN YOU FOCUS ON MODEL EDITINGMittwoch, 28. März 12
  33. 33. WHAT IS YOUR FOCUS Model Diagram Editing Editing Enforce 1-to-1-mapping Dynamic one-way mapping • Assimilate diagram Full graphical flexibility • Loss of expressiveness Style for understandability • Loss of usability Choose projection easily • Add non-graphical tools • Find another way to editMittwoch, 28. März 12
  34. 34. MODEL VIEW SOLUTION One-way Mapping Semantic model DiagramMittwoch, 28. März 12
  35. 35. MODEL VIEW SOLUTION One-way Mapping Semantic model DiagramMittwoch, 28. März 12
  36. 36. MODEL EDITINGMittwoch, 28. März 12
  37. 37. DIAGRAM EDITINGMittwoch, 28. März 12
  38. 38. RUNTIME • Reads mapping and stylesheet • Capture snapshots of any live model • Render GEF diagram with shape library • Selection / navigation adapter for • EMF, Xtext, JDTMittwoch, 28. März 12
  39. 39. MAPPING DSL • Xtext-based with Xbase expressions • Uni-directional transformation • InterpretedMittwoch, 28. März 12
  40. 40. STYLING DSL • Xtext-based with Xbase expressions • Directly modifies Draw2d figures • InterpretedMittwoch, 28. März 12
  41. 41. MyClass SuperClassMittwoch, 28. März 12
  42. 42. MyClass this SuperClassMittwoch, 28. März 12
  43. 43. diagram EClassHierarchy type EClass { MyClass this SuperClassMittwoch, 28. März 12
  44. 44. diagram EClassHierarchy type EClass { MyClass this SuperClassMittwoch, 28. März 12
  45. 45. diagram EClassHierarchy type EClass { node EClassNode for this { MyClass this SuperClassMittwoch, 28. März 12
  46. 46. diagram EClassHierarchy type EClass { node EClassNode for this { MyClass this SuperClassMittwoch, 28. März 12
  47. 47. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this MyClass this SuperClassMittwoch, 28. März 12
  48. 48. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this MyClass this MyClass SuperClassMittwoch, 28. März 12
  49. 49. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { MyClass this MyClass SuperClassMittwoch, 28. März 12
  50. 50. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { MyClass MyClass SuperClass thisMittwoch, 28. März 12
  51. 51. 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 thisMittwoch, 28. März 12
  52. 52. 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 thisMittwoch, 28. März 12
  53. 53. 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 SuperClassMittwoch, 28. März 12
  54. 54. 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 SuperClassMittwoch, 28. März 12
  55. 55. 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 SuperClassMittwoch, 28. März 12
  56. 56. 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 SuperClassMittwoch, 28. März 12
  57. 57. 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) }Mittwoch, 28. März 12
  58. 58. 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) }Mittwoch, 28. März 12
  59. 59. 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) }Mittwoch, 28. März 12
  60. 60. 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) }Mittwoch, 28. März 12
  61. 61. 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) }Mittwoch, 28. März 12
  62. 62. 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) }Mittwoch, 28. März 12
  63. 63. 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 }Mittwoch, 28. März 12
  64. 64. The code is at https://github.com/JanKoehnlein/Generic-Graph-View But remember: IT‘S A PROTOTYPEMittwoch, 28. März 12

×