A FRESH LOOK        ATGRAPHICAL EDITING     Dr. Jan Köhnlein
A PICTURE     SAYS MORE THANA THOUSAND   WORDS
A PICTURE     SAYS MORE THANA THOUSAND   WORDS w          ron              g
package ecoreclass EObject {}abstract class EModelElement extends EObject {}class EFactory extends EObject {}abstract clas...
package ecore           class EObject {}           abstract class EModelElement extends EObject {}           class EFactor...
abstract class EStructuralFeature extends ETypedElement {	    boolean changeable = "true"	    boolean ^volatile	    boolea...
abstract class EStructuralFeature extends ETypedElement { 	    boolean changeable = "true" 	    boolean ^volatile 	    boo...
ENTIRE ECORE ~500 WORDS
A GOOD DIAGRAMIS A PROJECTION
MappingSemantic model       Diagram
MappingSemantic model       Diagram
STRUCTURAL MISMATCH                         bar               Foo             BarPackage              Diagram Class       ...
EDITING METAPHORS                 bar           Foo         Bar
EDITING METAPHORS                          bar                    Foo         BarDelete from model
EDITING METAPHORS                             bar                      Foo          BarDelete from model   Delete from dia...
EDITING METAPHORS                               bar                        Foo          BarDelete from model     Delete fr...
EDITING METAPHORS                                bar                         Foo          BarDelete from model      Delete...
TECHNOLOGY MISMATCH EMF               EMF EMFT    Changes                   EMFT Xtext                   CDO  Java        ...
TODOs for aGraphical Tool
TODOs for aDiagram editor Graphical Tool
TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping
TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mappingElement picker / filter
TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mappingElement picker / filterBidirectionaltransaction ma...
TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mappingElement picker / filterBidirectionaltransaction ma...
TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping Element picker / filter Bidirectional transaction...
TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping Element picker / filter Bidirectional transaction...
TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping Element picker / filter Bidirectional transaction...
TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping Element picker / filter Bidirectional transaction...
TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping Element picker / filter Bidirectional transaction...
TODOs for aDiagram editor Graphical Tool Hard-wired           view bidirectional mapping Element picker / filter Bidirectio...
TODOs for aDiagram editor Graphical Tool Hard-wired       uni view bidirectional mapping Element picker / filter Bidirectio...
TODOs for aDiagram editor Graphical Tool Hard-wired       uni view bidirectional mapping Element picker / filter   DSL Bidi...
TODOs for aDiagram editor Graphical Tool Hard-wired       uni view bidirectional mapping Element picker / filter DSL Bidire...
TODOs for aDiagram editor Graphical Tool Hard-wired       uni view bidirectional mapping Element picker / filter DSL Bidire...
TODOs for aDiagram editor Graphical Tool Hard-wired       uni view bidirectional mapping Element picker / filter DSL Bidire...
TODOs for a   Diagram editor    Graphical Tool    Hard-wired          uni view    bidirectional mapping    Element picker ...
TODOs for a   Diagram editor    Graphical Tool    Hard-wired          uni view    bidirectional mappinglive Element picker...
TODOs for a   Diagram editor    Graphical Tool    Hard-wired          uni view    bidirectional mappinglive Element picker...
TODOs for a   Diagram editor    Graphical Tool    Hard-wired          uni view    bidirectional mappinglive Element picker...
base
baseModern Expression Language
baseModern Expression LanguageJava-Integration
baseModern Expression LanguageJava-IntegrationStatically Typed
baseModern Expression LanguageJava-IntegrationStatically TypedHighly Reusable
RUNTIME•   Reads mapping and stylesheet•   Capture snapshots of any live model•   Render GEF diagram with shape library•  ...
MAPPING DSL•   Xtext-based with Xbase expressions•   Uni-directional transformation•   Interpreted
STYLING DSL•   Xtext-based with Xbase expressions•   Directly modifies Draw2d figures•   Interpreted
MyClassSuperClass
MyClass     thisSuperClass
diagram EClassHierarchy type EClass { MyClass       thisSuperClass
diagram EClassHierarchy type EClass { MyClass       thisSuperClass
diagram EClassHierarchy type EClass {	 node EClassNode for this { MyClass       thisSuperClass
diagram EClassHierarchy type EClass {	 node EClassNode for this { MyClass       thisSuperClass
diagram EClassHierarchy type EClass {	 node EClassNode for this {	 	 label Name for this MyClass       thisSuperClass
diagram EClassHierarchy type EClass {	 node EClassNode for this {	 	 label Name for this MyClass       this               ...
diagram EClassHierarchy type EClass {	 node EClassNode for this {	 	 label Name for this	 	 edge SuperType for each this.g...
diagram EClassHierarchy type EClass {	 node EClassNode for this {	 	 label Name for this	 	 edge SuperType for each this.g...
diagram EClassHierarchy type EClass {	 node EClassNode for this {	 	 label Name for this	 	 edge SuperType for each this.g...
diagram EClassHierarchy type EClass {	 node EClassNode for this {	 	 label Name for this	 	 edge SuperType for each this.g...
diagram EClassHierarchy type EClass {	 node EClassNode for this {	 	 label Name for this	 	 edge SuperType for each this.g...
diagram EClassHierarchy type EClass {	 node EClassNode for this {	 	 label Name for this	 	 edge SuperType for each this.g...
diagram EClassHierarchy type EClass {	 node EClassNode for this {	 	 label Name for this	 	 edge SuperType for each this.g...
diagram EClassHierarchy type EClass {	 node EClassNode for this {	 	 label Name for this	 	 edge SuperType for each this.g...
stylesheet EClassHierarchy   for EClassHierarchystyle EClassNode.SuperType {	 var arrow = new PolygonDecoration()	 arrow.s...
stylesheet EClassHierarchy   for EClassHierarchy                                           refs to mappingsstyle EClassNod...
stylesheet EClassHierarchy   for EClassHierarchystyle EClassNode.SuperType {	 var arrow = new PolygonDecoration()      Xba...
stylesheet EClassHierarchy   for EClassHierarchystyle EClassNode.SuperType {	 var arrow = new PolygonDecoration()	 arrow.s...
stylesheet EClassHierarchy   for EClassHierarchystyle EClassNode.SuperType {	 var arrow = new PolygonDecoration()	 arrow.s...
stylesheet EClassHierarchy   for EClassHierarchystyle EClassNode.SuperType {	 var arrow = new PolygonDecoration()	 arrow.s...
stylesheet EClassHierarchy   for EClassHierarchystyle EClassNode.SuperType {	 var arrow = new PolygonDecoration()	 arrow.s...
The code is athttps://github.com/JanKoehnlein/Generic-Graph-View                 But remember:        IT‘S A PROTOTYPE
2011 10-24-initiatives-tracker-launch-v1.0
2011 10-24-initiatives-tracker-launch-v1.0
2011 10-24-initiatives-tracker-launch-v1.0
2011 10-24-initiatives-tracker-launch-v1.0
2011 10-24-initiatives-tracker-launch-v1.0
Upcoming SlideShare
Loading in …5
×

2011 10-24-initiatives-tracker-launch-v1.0

143
-1

Published on

Slides from the Initiatives tracker roll-out bottlecap.

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

  • Be the first to like this

No Downloads
Views
Total Views
143
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 2011 10-24-initiatives-tracker-launch-v1.0

    1. 1. A FRESH LOOK ATGRAPHICAL EDITING Dr. Jan Köhnlein
    2. 2. A PICTURE SAYS MORE THANA THOUSAND WORDS
    3. 3. A PICTURE SAYS MORE THANA THOUSAND WORDS w ron g
    4. 4. package ecoreclass 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 {}
    5. 5. 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 {}
    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 Classtype EJavaObject wraps Objecttype EEnumerator wraps java.util.Enumeration
    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.Enumeration
    8. 8. ENTIRE ECORE ~500 WORDS
    9. 9. A GOOD DIAGRAMIS A PROJECTION
    10. 10. MappingSemantic model Diagram
    11. 11. MappingSemantic model Diagram
    12. 12. STRUCTURAL MISMATCH bar Foo BarPackage Diagram Class Node Property Class Node Association Connection Property Label
    13. 13. EDITING METAPHORS bar Foo Bar
    14. 14. EDITING METAPHORS bar Foo BarDelete from model
    15. 15. EDITING METAPHORS bar Foo BarDelete from model Delete from diagram
    16. 16. EDITING METAPHORS bar Foo BarDelete from model Delete from diagram Drag & Drop
    17. 17. EDITING METAPHORS bar Foo BarDelete from model Delete from diagram Drag & Drop Copy & Paste
    18. 18. TECHNOLOGY MISMATCH EMF EMF EMFT Changes EMFT Xtext CDO Java ... ...
    19. 19. TODOs for aGraphical Tool
    20. 20. TODOs for aDiagram editor Graphical Tool
    21. 21. TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping
    22. 22. TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mappingElement picker / filter
    23. 23. TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mappingElement picker / filterBidirectionaltransaction mapper
    24. 24. TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mappingElement picker / filterBidirectionaltransaction mapperDiagram design
    25. 25. TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping Element picker / filter Bidirectional transaction mapper Diagram designModel browser or fullmodel editor
    26. 26. TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping Element picker / filter Bidirectional transaction mapper Diagram designModel browser or fullmodel editorDetail editor
    27. 27. TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping Element picker / filter Bidirectional transaction mapper Diagram designModel browser or fullmodel editorDetail editorModel navigation
    28. 28. TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping Element picker / filter Bidirectional transaction mapper Diagram designModel browser or fullmodel editorDetail editorModel navigation
    29. 29. TODOs for aDiagram editor Graphical Tool Hard-wired bidirectional mapping Element picker / filter Bidirectional transaction mapper Diagram designModel browser or fullmodel editorDetail editorModel navigation
    30. 30. TODOs for aDiagram editor Graphical Tool Hard-wired view bidirectional mapping Element picker / filter Bidirectional transaction mapper Diagram designModel browser or fullmodel editorDetail editorModel navigation
    31. 31. TODOs for aDiagram editor Graphical Tool Hard-wired uni view bidirectional mapping Element picker / filter Bidirectional transaction mapper Diagram designModel browser or fullmodel editorDetail editorModel navigation
    32. 32. TODOs for aDiagram editor Graphical Tool Hard-wired uni view bidirectional mapping Element picker / filter DSL Bidirectional transaction mapper Diagram designModel browser or fullmodel editorDetail editorModel navigation
    33. 33. TODOs for aDiagram editor Graphical Tool Hard-wired uni view bidirectional mapping Element picker / filter DSL Bidirectional expressions transaction mapper Diagram designModel browser or fullmodel editorDetail editorModel navigation
    34. 34. TODOs for aDiagram editor Graphical Tool Hard-wired uni view bidirectional mapping Element picker / filter DSL Bidirectional expressions transaction mapper snapshot Diagram designModel browser or fullmodel editorDetail editorModel navigation
    35. 35. TODOs for aDiagram editor Graphical Tool Hard-wired uni view bidirectional mapping Element picker / filter DSL Bidirectional expressions transaction mapper snapshot stylesheet DSL Diagram designModel browser or fullmodel editorDetail editorModel navigation
    36. 36. TODOs for a Diagram editor Graphical Tool Hard-wired uni view bidirectional mapping Element picker / filter DSL Bidirectional expressions transaction mapper snapshotliveDiagramstylesheet DSL design Model browser or full model editor Detail editor Model navigation
    37. 37. TODOs for a Diagram editor Graphical Tool Hard-wired uni view bidirectional mappinglive Element picker / filter DSL Bidirectional expressions transaction mapper snapshotliveDiagramstylesheet DSL design Model browser or full model editor Detail editor Model navigation
    38. 38. TODOs for a Diagram editor Graphical Tool Hard-wired uni view bidirectional mappinglive Element picker / filter DSL Bidirectional expressions transaction mapper snapshotliveDiagramstylesheet DSL design Model browser or full model editor Detail editor Model navigation
    39. 39. TODOs for a Diagram editor Graphical Tool Hard-wired uni view bidirectional mappinglive Element picker / filter DSL Bidirectional expressions transaction mapper snapshotliveDiagramstylesheet DSL design Model browser or full text model editor Detail editor Model navigation
    40. 40. base
    41. 41. baseModern Expression Language
    42. 42. baseModern Expression LanguageJava-Integration
    43. 43. baseModern Expression LanguageJava-IntegrationStatically Typed
    44. 44. baseModern Expression LanguageJava-IntegrationStatically TypedHighly Reusable
    45. 45. RUNTIME• Reads mapping and stylesheet• Capture snapshots of any live model• Render GEF diagram with shape library• Selection / navigation adapter for • EMF, Xtext, JDT
    46. 46. MAPPING DSL• Xtext-based with Xbase expressions• Uni-directional transformation• Interpreted
    47. 47. STYLING DSL• Xtext-based with Xbase expressions• Directly modifies Draw2d figures• Interpreted
    48. 48. MyClassSuperClass
    49. 49. MyClass thisSuperClass
    50. 50. diagram EClassHierarchy type EClass { MyClass thisSuperClass
    51. 51. diagram EClassHierarchy type EClass { MyClass thisSuperClass
    52. 52. diagram EClassHierarchy type EClass { node EClassNode for this { MyClass thisSuperClass
    53. 53. diagram EClassHierarchy type EClass { node EClassNode for this { MyClass thisSuperClass
    54. 54. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this MyClass thisSuperClass
    55. 55. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this MyClass this MyClassSuperClass
    56. 56. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { MyClass this MyClassSuperClass
    57. 57. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { MyClass MyClassSuperClass this
    58. 58. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this MyClass MyClassSuperClass this
    59. 59. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this MyClass MyClassSuperClass this
    60. 60. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this MyClass MyClassSuperClass this SuperClass
    61. 61. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this MyClass this MyClassSuperClass SuperClass
    62. 62. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this MyClass this MyClassSuperClass SuperClass
    63. 63. diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this } }} MyClass this MyClassSuperClass SuperClass
    64. 64. stylesheet EClassHierarchy for EClassHierarchystyle 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)}
    65. 65. stylesheet EClassHierarchy for EClassHierarchy refs to mappingsstyle 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)}
    66. 66. stylesheet EClassHierarchy for EClassHierarchystyle 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)}
    67. 67. stylesheet EClassHierarchy for EClassHierarchystyle 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)}
    68. 68. stylesheet EClassHierarchy for EClassHierarchystyle EClassNode.SuperType { var arrow = new PolygonDecoration() arrow.setScale(10,10) arrow.backgroundColor = color(#ffffff) arrow.lineWidth = 2 this.targetDecoration = arrow} color literalsstyle EClassNode.Name { font = font("Helvetica", 13, if (element.abstract) 3 else 1)}
    69. 69. stylesheet EClassHierarchy for EClassHierarchystyle 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)}
    70. 70. stylesheet EClassHierarchy for EClassHierarchystyle 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}
    71. 71. The code is athttps://github.com/JanKoehnlein/Generic-Graph-View But remember: IT‘S A PROTOTYPE
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×