Prof. Dr. Marko Boger Fabio Filippelli , Markus Gerhart, Michael Bauer, Steffen Kollosche

1. Prof. Dr. Marko Boger Fabio Filippelli, Markus Gerhart, Michael Bauer, Steffen Kollosche New conceptualideasfor Spray

2. Outline • Styling • Gradients • Highlighting (Rendering/Adoption) • Integratefeatures in the Core DSL • The FigureSection • The ToolingSection • The BehaviorSection • The RuleSection • PetriNetExample - „Transition“ • PetriNetExample - „Arc“ • External Palette definition Hochschule Konstanz | Fakultät Informatik

3. Styling • Graphiti provides • definition of Gradients • the highlighting of elements (on Style) • Idea: • Default-Gradient can be defined as background-color • All colors (inclusively Gradients) can be used for highlighting Hochschule Konstanz | Fakultät Informatik

4. Gradients • As partofthe Style DSL • Generates a JvmType (as Shapes and Styles) • inherits a markerinterface (ISprayGradient) • gradientBlueToBlack { • area(color = blue, offset = 0.0) • area(color = red, offset = 0.4) • area(color = RGB(130, 200, 25), offset = 0.6) • area(color = black, offset = 1.0) • } Hochschule Konstanz | Fakultät Informatik

5. Highlighting (Rendering/Adoption) • style StyleWithGradient{ • background-color= BlueToBlack • gradient-orientation = vertical • highlighting ( • selected = MyGradient, • multiselected= red, • allowed= RGB(0, 255, 200), • unallowed= MyUnallowedGradient • ) • } all attributesare optional allowed unallowed multi selected backgroundcolor selected Hochschule Konstanz | Fakultät Informatik

6. Integratefeatures in the Core DSL • Defining Elements • node Place for PlaceEClass { • ... • } • class PlaceEClassalias Place { • ... • } Hochschule Konstanz | Fakultät Informatik

7. Integratefeatures in the Core DSL • Split the Spray Core DSL in fourareas • Figure • Tooling • Behavior • Rules • Figurecontainsthe design of a „node“ or a „edge“ • Toolingcontaintooldefinitionsasrapid-buttons, tooltips, icon, paletteandproperty-view • Behaviorforcreating, editing, drill-down andcustomizedbehavior • Rulesdefinetheconnectionvalidationforelements • node<Name> for <EClass> { • figure { • } tooling { • } behavior { • } rules{ • } • } • edge<Name> for <EClass> { • figure { • } tooling { • } behavior { • } rules{ • } • } Hochschule Konstanz | Fakultät Informatik

8. The FigureSection • Features • Definethe design for a nodeoredge • Designing Shapes inline • Referencing Shapes from Shape DSL • Referencing Shapes whichimplementsISprayShape/ISprayConnection • MapEcoreattributestotextareas(incl. editablerestrictionandformattingrules) • Directlyif inline • The idforthereference on a textarea • MapEcorelistsforcompartments • Directlyif inline • The idforthereference on a compartmentarea Compartments not yetdefined in the Shape DSL Hochschule Konstanz | Fakultät Informatik

9. The FigureSection Shape Inline • nodePlace for EcorePlace { • figure { • ellipse{ • size (width=30, height=30) • } textforname { • position (x=0, y=30) • size (width=30, height=30) • } • } ... • } • shapePlaceShape { • ellipse{ • size(width=30, height=30) • }text{ • position(x=0, y=30) • size(width=30, height=30) • id= placeShapeId • } • } Shape in ShapeDSL • nodePlace for EcorePlace { • figurePlaceShape { • placeShapeIdforname • } ... • } • nodePlace for EcorePlace { • figurePlaceShape { • placeShapeIdforname (editable=false, format={„<<„ + name + „>>“} • } ... • } Hochschule Konstanz | Fakultät Informatik

10. The ToolingSection • Features • Define rapid-buttons for nodes • Tooltips on nodes and edges • Icon for the element • Palette naming (off-topic: maybe externalized) • Designing the Property-View (within eclipse) Hochschule Konstanz | Fakultät Informatik

11. The ToolingSection add. keyword „generated“ andusethegenerated SVG. • nodePlace for EcorePlace { • ... • } tooling { • palette“Nodes” • icon“icons/PlaceIcon.gif” • tooltip(“This describes a ” + name) • rapid-buttonsArc, Arc to Transition, Arc to Place, Arc2 to Place • property-view { • tab„Main“ { • name, // EString, regularexpression(Start withuppercase?) • description, // EString • priority// EInt-> textfield (but just integersallowed) • } tab„Class properties“ { • visibility// EReferencetoEnum-> selection-box • isStereotype// Eboolean-> Checkbox • } • } • } • } Hochschule Konstanz | Fakultät Informatik

12. The BehaviorSection • Features • Allow creation of elements on diagram or containments • Define the Edit-On-Create (aka. askFor) • Description of sub diagrams (drill-down) • Implementation of Custom Behavior • nodePlace for EcorePlace { • ... • } behavior{ • createable-indiagramElements, Place.token, Token.elm • edit-on-createclassName • drill-down-> to be discussed • custom // as in Spray Core (name and ref) • } • } Hochschule Konstanz | Fakultät Informatik

13. The RuleSection • Features • Definingtransitionrulesforthedomainobjects • Validateedgerules • Validatenoderules •  tobediscussed (not final yet) • nodePlace for EcorePlace { • ... • } rules { • ArcEClasstoTransitionEClass, TokenEClass, EmptyTransitionEClass • } • } Hochschule Konstanz | Fakultät Informatik

14. PetriNetExample - „Transition“ • nodeTransition for TransitionEClass { • figureTransitionShape{ • transitionNameforname (editable=false) • compartmentIdforpropertyList • }tooling { • palette“Nodes”/”Transitions” • icon“icons/TransitionIcon.gif” • tooltip(“This Transition is named ” + name + “.”) • rapid-buttonsArc, Arc to Place, ArrowArcto Place, Arc to Token • property-view { • tab„Main“ { • name, description • } • } • } behavior { • createable-indiagramElements, LaneEclass.elements, NodesEClass.transition • edit-on-createclassName • // drill-down -> to be defined • customshowInformation, reforg.eclipselabs.spray.MyCustomFeature • }rules { • ArcEclasstoPlaceEClass, TokenEClass • FilledArrowEClasstoPlaceEClass • } • } Hochschule Konstanz | Fakultät Informatik

15. PetriNetExample - „Arc“ • edgeArc for ArcEClass { • figureArcConnectionShape{ • arcNameforname (editable=false) • }tooling { • palette “Edges” • icon “icons/ArcIcon.gif” • property-view { • tab„Main“ { • name, description • } • } • } behavior { • createable-indiagramElements, Place.token, Token.elm • sourcesourceRef • targettoRef • edit-on-createclassName • customshowInformation, reforg.eclipselabs.spray.MyCustomFeature • } • } nocompartments notooltipsand no rapid-buttons newkeywords: sourceandtarget rapid-button maycreate edgeandnode in parallel! NoRuleSection! Hochschule Konstanz | Fakultät Informatik

16. External Palette definition • Maybedefine Palette externally • SortingofCompartments • Sortingof Elements withinCompartments • CreationofSubcompartments • palette-for-diagrammod4j { • category “Nodes” { • Place, • category “Transitions” { • Transition, • EmptyTransition • }, • Token • } category Edges { • Arc • } • } Hochschule Konstanz | Fakultät Informatik

17. End Prof. Dr. Marko Boger Fabio Filippelli Markus Gerhart Michael Bauer Steffen Kollosche