A fresh look at graphical editing
Upcoming SlideShare
Loading in...5
×
 

A fresh look at graphical editing

on

  • 1,341 views

 

Statistics

Views

Total Views
1,341
Views on SlideShare
1,341
Embed Views
0

Actions

Likes
0
Downloads
27
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

A fresh look at graphical editing A fresh look at graphical editing Presentation Transcript

  • A FRESH LOOK AT GRAPHICAL EDITING Dr. Jan KöhnleinFreitag, 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 言 gFreitag, 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.EnumerationFreitag, 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.EnumerationFreitag, 4. November 11
  • Freitag, 4. November 11
  • ENTIRE ECORE ~500 WORDSFreitag, 4. November 11
  • A GOOD DIAGRAM IS A PROJECTIONFreitag, 4. November 11
  • Mapping Semantic model DiagramFreitag, 4. November 11
  • Mapping Semantic model DiagramFreitag, 4. November 11
  • STRUCTURAL MISMATCH bar Foo Bar Package Diagram Class Node Property Class Node Association Connection Property LabelFreitag, 4. November 11
  • EDITING METAPHORS bar Foo BarFreitag, 4. November 11
  • EDITING METAPHORS bar Foo Bar Delete from modelFreitag, 4. November 11
  • EDITING METAPHORS bar Foo Bar Delete from model Delete from diagramFreitag, 4. November 11
  • EDITING METAPHORS bar Foo Bar Delete from model Delete from diagram Drag & DropFreitag, 4. November 11
  • EDITING METAPHORS bar Foo Bar Delete from model Delete from diagram Drag & Drop Copy & PasteFreitag, 4. November 11
  • TECHNOLOGY MISMATCH EMF EMF EMFT Changes EMFT Xtext CDO Java ... ...Freitag, 4. November 11
  • Freitag, 4. November 11
  • TODOsforaGraphicalToolFreitag, 4. November 11
  • TODOsforaGraphicalTool DiagrameditorFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmappingFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filterFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter BidirectionaltransactionmapperFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper DiagramdesignFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign ModelbrowserorfullmodeleditorFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor DetaileditorFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor ModelnavigationFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor view Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping DSL Elementpicker/filter Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot Diagramdesign Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot Diagramdesign stylesheetDSL Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor view uni Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot live Diagramdesign stylesheetDSL Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor view uni live Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot live Diagramdesign stylesheetDSL Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor view uni live Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot live Diagramdesign stylesheetDSL Modelbrowserorfullmodeleditor Detaileditor Modelnavigation EditorsynchroFreitag, 4. November 11
  • TODOsforaGraphicalTool Diagrameditor view uni live Hard-wiredbidirectionalmapping DSL Elementpicker/filter expressions Bidirectionaltransactionmapper snapshot live Diagramdesign stylesheetDSL Modelbrowserorfullmodeleditor Detaileditor Modelnavigation Editorsynchro textFreitag, 4. November 11
  • baseFreitag, 4. November 11
  • base Modern Expression LanguageFreitag, 4. November 11
  • base Modern Expression Language Java-IntegrationFreitag, 4. November 11
  • base Modern Expression Language Java-Integration Statically TypedFreitag, 4. November 11
  • base Modern Expression Language Java-Integration Statically Typed Highly ReusableFreitag, 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, JDTFreitag, 4. November 11
  • MAPPING DSL • Xtext-based with Xbase expressions • Uni-directional transformation • InterpretedFreitag, 4. November 11
  • STYLING DSL • Xtext-based with Xbase expressions • Directly modifies Draw2d figures • InterpretedFreitag, 4. November 11
  • MyClass SuperClassFreitag, 4. November 11
  • MyClass this SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { MyClass this SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { MyClass this SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { MyClass this SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { MyClass this SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this MyClass this SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this MyClass this MyClass SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { MyClass this MyClass SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { MyClass MyClass SuperClass thisFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this MyClass MyClass SuperClass thisFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this MyClass MyClass SuperClass thisFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this MyClass MyClass SuperClass this SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this MyClass this MyClass SuperClass SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this MyClass this MyClass SuperClass SuperClassFreitag, 4. November 11
  • diagram EClassHierarchy type EClass { node EClassNode for this { label Name for this edge SuperType for each this.getESuperTypes() { => call EClassNode for this } } } MyClass this MyClass SuperClass SuperClassFreitag, 4. November 11
  • 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 PROTOTYPEFreitag, 4. November 11