SlideShare a Scribd company logo
A FRESH LOOK
                                  AT
                          GRAPHICAL EDITING
                               Dr. Jan Köhnlein




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

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

                      言
                                        g

Freitag, 4. November 11
Freitag, 4. November 11
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
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
Freitag, 4. November 11
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
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
Freitag, 4. November 11
ENTIRE ECORE ~500 WORDS




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



Freitag, 4. November 11
Mapping




         Semantic model             Diagram
Freitag, 4. November 11
Mapping




         Semantic model             Diagram
Freitag, 4. November 11
STRUCTURAL MISMATCH
                                               bar
                                     Foo             Bar



                      Package              Diagram
                       Class                Node
                         Property
                       Class                Node
                       Association          Connection
                         Property            Label

Freitag, 4. November 11
EDITING METAPHORS
                                           bar
                                     Foo         Bar




Freitag, 4. November 11
EDITING METAPHORS
                                           bar
                                     Foo         Bar



            Delete from model




Freitag, 4. November 11
EDITING METAPHORS
                                             bar
                                      Foo          Bar



            Delete from model       Delete from diagram




Freitag, 4. November 11
EDITING METAPHORS
                                                bar
                                         Foo          Bar



            Delete from model          Delete from diagram
                               Drag & Drop




Freitag, 4. November 11
EDITING METAPHORS
                                                 bar
                                          Foo          Bar



            Delete from model           Delete from diagram
                               Drag & Drop
                               Copy & Paste


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




Freitag, 4. November 11
TODOsforaGraphicalTool
                      Diagrameditor




Freitag, 4. November 11
TODOsforaGraphicalTool
                      Diagrameditor
                        Hard-wiredbidirectionalmapping




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




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




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




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




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



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

Freitag, 4. November 11
TODOsforaGraphicalTool
                      Diagrameditor
                        Hard-wiredbidirectionalmapping
                        Elementpicker/filter
                        Bidirectionaltransactionmapper
                        Diagramdesign
                      Modelbrowserorfullmodeleditor
                      Detaileditor
                      Modelnavigation
                      Editorsynchro
Freitag, 4. November 11
TODOsforaGraphicalTool
                      Diagrameditor
                        Hard-wiredbidirectionalmapping
                        Elementpicker/filter
                        Bidirectionaltransactionmapper
                        Diagramdesign
                      Modelbrowserorfullmodeleditor
                      Detaileditor
                      Modelnavigation
                      Editorsynchro
Freitag, 4. November 11
TODOsforaGraphicalTool
           Diagrameditor view
                        Hard-wiredbidirectionalmapping
                        Elementpicker/filter
                        Bidirectionaltransactionmapper
                        Diagramdesign
                      Modelbrowserorfullmodeleditor
                      Detaileditor
                      Modelnavigation
                      Editorsynchro
Freitag, 4. November 11
TODOsforaGraphicalTool
           Diagrameditor view
                             uni
                        Hard-wiredbidirectionalmapping
                        Elementpicker/filter
                        Bidirectionaltransactionmapper
                        Diagramdesign
                      Modelbrowserorfullmodeleditor
                      Detaileditor
                      Modelnavigation
                      Editorsynchro
Freitag, 4. November 11
TODOsforaGraphicalTool
           Diagrameditor view
                             uni
                        Hard-wiredbidirectionalmapping DSL
                        Elementpicker/filter
                        Bidirectionaltransactionmapper
                        Diagramdesign
                      Modelbrowserorfullmodeleditor
                      Detaileditor
                      Modelnavigation
                      Editorsynchro
Freitag, 4. November 11
TODOsforaGraphicalTool
           Diagrameditor view
                             uni
                        Hard-wiredbidirectionalmapping DSL
                        Elementpicker/filter expressions
                        Bidirectionaltransactionmapper
                        Diagramdesign
                      Modelbrowserorfullmodeleditor
                      Detaileditor
                      Modelnavigation
                      Editorsynchro
Freitag, 4. November 11
TODOsforaGraphicalTool
           Diagrameditor view
                             uni
                        Hard-wiredbidirectionalmapping DSL
                        Elementpicker/filter expressions
                        Bidirectionaltransactionmapper snapshot
                        Diagramdesign
                      Modelbrowserorfullmodeleditor
                      Detaileditor
                      Modelnavigation
                      Editorsynchro
Freitag, 4. November 11
TODOsforaGraphicalTool
           Diagrameditor view
                             uni
                        Hard-wiredbidirectionalmapping DSL
                        Elementpicker/filter expressions
                        Bidirectionaltransactionmapper snapshot
                        Diagramdesign stylesheetDSL
                      Modelbrowserorfullmodeleditor
                      Detaileditor
                      Modelnavigation
                      Editorsynchro
Freitag, 4. November 11
TODOsforaGraphicalTool
           Diagrameditor view
                             uni
                Hard-wiredbidirectionalmapping DSL
                Elementpicker/filter expressions
                Bidirectionaltransactionmapper snapshot
           live Diagramdesign stylesheetDSL
              Modelbrowserorfullmodeleditor
              Detaileditor
              Modelnavigation
              Editorsynchro
Freitag, 4. November 11
TODOsforaGraphicalTool
           Diagrameditor view
                             uni
          live Hard-wiredbidirectionalmapping DSL
               Elementpicker/filter expressions
               Bidirectionaltransactionmapper snapshot
          live Diagramdesign stylesheetDSL
                      Modelbrowserorfullmodeleditor
                      Detaileditor
                      Modelnavigation
                      Editorsynchro
Freitag, 4. November 11
TODOsforaGraphicalTool
           Diagrameditor view
                             uni
          live Hard-wiredbidirectionalmapping DSL
               Elementpicker/filter expressions
               Bidirectionaltransactionmapper snapshot
          live Diagramdesign stylesheetDSL
                      Modelbrowserorfullmodeleditor
                      Detaileditor
                      Modelnavigation
                      Editorsynchro
Freitag, 4. November 11
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
base



Freitag, 4. November 11
base
                Modern Expression Language




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




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




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



Freitag, 4. November 11
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
MAPPING DSL
                          •   Xtext-based with Xbase expressions

                          •   Uni-directional transformation

                          •   Interpreted




Freitag, 4. November 11
STYLING DSL
                          •   Xtext-based with Xbase expressions

                          •   Directly modifies Draw2d figures

                          •   Interpreted




Freitag, 4. November 11
MyClass



                      SuperClass



Freitag, 4. November 11
MyClass   this


                      SuperClass



Freitag, 4. November 11
diagram EClassHierarchy type EClass {




                          MyClass    this


                      SuperClass



Freitag, 4. November 11
diagram EClassHierarchy type EClass {




                          MyClass    this


                      SuperClass



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




                          MyClass    this


                      SuperClass



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




                          MyClass    this


                      SuperClass



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




                          MyClass    this


                      SuperClass



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




                          MyClass    this                     MyClass




                      SuperClass



Freitag, 4. November 11
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
The code is at

               https://github.com/JanKoehnlein/Generic-Graph-View


                                But remember:

                          IT‘S A PROTOTYPE


Freitag, 4. November 11

More Related Content

More from Dr. Jan Köhnlein

Graphical Views For Xtext With FXDiagram
Graphical Views For Xtext With FXDiagramGraphical Views For Xtext With FXDiagram
Graphical Views For Xtext With FXDiagram
Dr. Jan Köhnlein
 
XRobots
XRobotsXRobots
Diagrams, Xtext and UX
Diagrams, Xtext and UXDiagrams, Xtext and UX
Diagrams, Xtext and UX
Dr. Jan Köhnlein
 
Scoping
ScopingScoping
Xtext, diagrams and ux
Xtext, diagrams and uxXtext, diagrams and ux
Xtext, diagrams and ux
Dr. Jan Köhnlein
 
Diagram Editors - The FXed Generation
Diagram Editors - The FXed GenerationDiagram Editors - The FXed Generation
Diagram Editors - The FXed Generation
Dr. Jan Köhnlein
 
Code Generation With Xtend
Code Generation With XtendCode Generation With Xtend
Code Generation With Xtend
Dr. Jan Köhnlein
 
Graphical Views For Xtext
Graphical Views For XtextGraphical Views For Xtext
Graphical Views For Xtext
Dr. Jan Köhnlein
 
The Xtext Grammar Language
The Xtext Grammar LanguageThe Xtext Grammar Language
The Xtext Grammar Language
Dr. Jan Köhnlein
 
Eclipse Diagram Editors - An Endangered Species
Eclipse Diagram Editors - An Endangered SpeciesEclipse Diagram Editors - An Endangered Species
Eclipse Diagram Editors - An Endangered Species
Dr. Jan Köhnlein
 
Java DSLs with Xtext
Java DSLs with XtextJava DSLs with Xtext
Java DSLs with Xtext
Dr. Jan Köhnlein
 
DSLs for Java Developers
DSLs for Java DevelopersDSLs for Java Developers
DSLs for Java Developers
Dr. Jan Köhnlein
 
A fresh look at graphical editing
A fresh look at graphical editingA fresh look at graphical editing
A fresh look at graphical editing
Dr. Jan Köhnlein
 
A fresh look at graphical editing
A fresh look at graphical editingA fresh look at graphical editing
A fresh look at graphical editing
Dr. Jan Köhnlein
 
Pragmatic DSL Design with Xtext, Xbase and Xtend 2
Pragmatic DSL Design with Xtext, Xbase and Xtend 2Pragmatic DSL Design with Xtext, Xbase and Xtend 2
Pragmatic DSL Design with Xtext, Xbase and Xtend 2
Dr. Jan Köhnlein
 
What's Cooking in Xtext 2.0
What's Cooking in Xtext 2.0What's Cooking in Xtext 2.0
What's Cooking in Xtext 2.0
Dr. Jan Köhnlein
 
Android tutorial - Xtext slides
Android tutorial - Xtext slidesAndroid tutorial - Xtext slides
Android tutorial - Xtext slides
Dr. Jan Köhnlein
 
Eclipse meets e4
Eclipse meets e4Eclipse meets e4
Eclipse meets e4
Dr. Jan Köhnlein
 
Combining Text and Graphics in Eclipse-based Modeling Tools
Combining Text and Graphics in Eclipse-based Modeling ToolsCombining Text and Graphics in Eclipse-based Modeling Tools
Combining Text and Graphics in Eclipse-based Modeling Tools
Dr. Jan Köhnlein
 
Combining Graphical and Textual
Combining Graphical and TextualCombining Graphical and Textual
Combining Graphical and Textual
Dr. Jan Köhnlein
 

More from Dr. Jan Köhnlein (20)

Graphical Views For Xtext With FXDiagram
Graphical Views For Xtext With FXDiagramGraphical Views For Xtext With FXDiagram
Graphical Views For Xtext With FXDiagram
 
XRobots
XRobotsXRobots
XRobots
 
Diagrams, Xtext and UX
Diagrams, Xtext and UXDiagrams, Xtext and UX
Diagrams, Xtext and UX
 
Scoping
ScopingScoping
Scoping
 
Xtext, diagrams and ux
Xtext, diagrams and uxXtext, diagrams and ux
Xtext, diagrams and ux
 
Diagram Editors - The FXed Generation
Diagram Editors - The FXed GenerationDiagram Editors - The FXed Generation
Diagram Editors - The FXed Generation
 
Code Generation With Xtend
Code Generation With XtendCode Generation With Xtend
Code Generation With Xtend
 
Graphical Views For Xtext
Graphical Views For XtextGraphical Views For Xtext
Graphical Views For Xtext
 
The Xtext Grammar Language
The Xtext Grammar LanguageThe Xtext Grammar Language
The Xtext Grammar Language
 
Eclipse Diagram Editors - An Endangered Species
Eclipse Diagram Editors - An Endangered SpeciesEclipse Diagram Editors - An Endangered Species
Eclipse Diagram Editors - An Endangered Species
 
Java DSLs with Xtext
Java DSLs with XtextJava DSLs with Xtext
Java DSLs with Xtext
 
DSLs for Java Developers
DSLs for Java DevelopersDSLs for Java Developers
DSLs for Java Developers
 
A fresh look at graphical editing
A fresh look at graphical editingA fresh look at graphical editing
A fresh look at graphical editing
 
A fresh look at graphical editing
A fresh look at graphical editingA fresh look at graphical editing
A fresh look at graphical editing
 
Pragmatic DSL Design with Xtext, Xbase and Xtend 2
Pragmatic DSL Design with Xtext, Xbase and Xtend 2Pragmatic DSL Design with Xtext, Xbase and Xtend 2
Pragmatic DSL Design with Xtext, Xbase and Xtend 2
 
What's Cooking in Xtext 2.0
What's Cooking in Xtext 2.0What's Cooking in Xtext 2.0
What's Cooking in Xtext 2.0
 
Android tutorial - Xtext slides
Android tutorial - Xtext slidesAndroid tutorial - Xtext slides
Android tutorial - Xtext slides
 
Eclipse meets e4
Eclipse meets e4Eclipse meets e4
Eclipse meets e4
 
Combining Text and Graphics in Eclipse-based Modeling Tools
Combining Text and Graphics in Eclipse-based Modeling ToolsCombining Text and Graphics in Eclipse-based Modeling Tools
Combining Text and Graphics in Eclipse-based Modeling Tools
 
Combining Graphical and Textual
Combining Graphical and TextualCombining Graphical and Textual
Combining Graphical and Textual
 

Recently uploaded

Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
Management Institute of Skills Development
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 

Recently uploaded (20)

Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 

A fresh look at graphical editing

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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