sprotty
play

sprotty GRAPHICAL VIEWS FOR WEB APPLICATIONS Jan Khnlein Miro - PowerPoint PPT Presentation

Jan 16, 2023 •199 likes •507 views

sprotty GRAPHICAL VIEWS FOR WEB APPLICATIONS Jan Khnlein Miro Spnemann @jankoehnlein @sponemann visualize complex relationships subsystems models dependencies actors modules states networks data

  1. sprotty GRAPHICAL VIEWS FOR WEB APPLICATIONS Jan Köhnlein Miro Spönemann @jankoehnlein @sponemann

  2. visualize complex relationships… subsystems models dependencies actors modules states networks data

  3. ���� ����� ����� ���� ���� ���� ����� ������� ���� ���� ���� ����� ���� ���� ���� ���� ���� ���� ���� ���� ���� ���� ����

  4. L0,2 L7,2 Request L8,2 L10,2: pend = false L11,2: req true Dispatch L12,2: pend = true L20,1 L13,2: checkReq=req L22,1: grant = false wr wr 1 1 L14,0: pend L23,1: checkReq && grant && free true true 1wr L15,0: pend = false L24,1: grant = true L16s,0 L25s,0 L16d,2 L25d,1 L17,2 L18,0 L27,0 L26,1 L28,0 L29,0

  5. Activity startup startup reset buffer got command got command no command no command process command monitor status command done command done status done status done rerun rerun is complete is complete ILayoutConfig getAffectedOptions (LayoutContext) : Collection<IProperty<?>> shutdown shutdown getContextValue (IProperty<?>, LayoutContext) : Object 0..* getOptionValue (LayoutOptionData, LayoutContext) : Object getPriority () : int IMutableLayoutConfig DefaultLayoutConfig EclipseLayoutConfig setOptionValue (LayoutOptionData, LayoutContext, Object) : void AbstractMutableLayoutConfig CompoundLayoutConfig add (ILayoutConfig) : void remove (ILayoutConfig) : void SemanticLayoutConfig getAffectedOptions (Object) : IProperty<?>[] getSemanticValue (Object, LayoutOptionData) : Object setSemanticValue (Object, LayoutOptionData, Object) : void

  7. GEF

  8. sprotty CSS

  9. DEMO: NPM npm-dependencies.com

  10. CLIENT ARCHITECTURE: Flow Of Information M odel V iew C ontroller

  11. CLIENT ARCHITECTURE: Flow Of Information Command CommandStack SModel ActionDispatcher Action Viewer

  12. CLIENT ARCHITECTURE: Viewer and Virtual DOM Command CommandStack SModel ActionDispatcher Action Viewer ViewRegistry View View View Action render patch DOM Virtual DOM

  13. CLIENT ARCHITECTURE: Model Source Command CommandStack SModel ModelSource ActionDispatcher Action Action Viewer

  14. CLIENT ARCHITECTURE: Server Connection Command Web CommandStack Socket Action SModel ModelSource ActionDispatcher DiagramServer Action Action Viewer

  15. SERVER ARCHITECTURE Web Domain Diagram 
 Action IDiagramServer Socket Model generate Model ILayoutEngine Eclipse Layout Kernel

  16. DEMO: MULTICORE sprotty-demo.typefox.io

  17. GETTING STARTED: The Diagram Model sprotty model SModelElement SShapeElement SEdge SNode SPort SLabel Flow domain-specific model TaskNode BarrierNode

  18. GETTING STARTED: The Diagram Model model instance TaskNode TaskNode source source Flow Flow target target BarrierNode source source source Flow Flow Flow target target target TaskNode TaskNode TaskNode

  19. GETTING STARTED: The View

  20. GETTING STARTED: The View class TaskNodeView implements IView { render(node: TaskNode, context: RenderingContext): VNode { const radius = node.size.width / 2 return <g> <circle r={radius} cx={radius} cy={radius} class-sprotty-node={true} class-task={true} class-selected={node.selected}> </circle> <text x={radius} y={radius} class-task-name={true}> {node.name} </text> </g> } }

  21. GETTING STARTED: Configuration const flowModule = new ContainerModule((…) => { configureModelElement(context, 'flow', SGraph, SGraphView); configureModelElement(context, 'task', TaskNode, TaskNodeView); configureModelElement(context, 'barrier', BarrierNode, BarrierNodeView); configureModelElement(context, 'edge', SEdge, FlowEdgeView); configureModelElement(context, 'html', HtmlRoot, HtmlRootView); configureModelElement(context, 'pre-rendered', PreRenderedElement, PreRenderedView); }) const container = new Container() container.load(defaultModule, selectModule, ..., flowModule)

  22. GETTING STARTED: The Server Implement a diagram generator TaskNode Task application diagram model model

  23. GETTING STARTED: The Server Implement a diagram generator private def createTask(Task declaration) { val tnode = new TaskNode tnode.type = 'task' tnode.id = 'task_' + declaration.name tnode.name = declaration.name return tnode }

  24. DEMO YANG

  25. SERVER ARCHITECTURE: Xtext and LSP TextDocument Service generate Xtext Language 
 Grammar Server JSON Workspace RPC Service DiagramLanguage 
 Diagram ServerExtension Service

  26. YANG FOR ECLIPSE

  27. ECLIPSE PROPOSAL

  28. ROADMAP ➤ Set up Eclipse project and resources ➤ More editing features ➤ More navigation and exploration features ➤ Specify client-server protocol ➤ Additional layers for faster implementation of common use cases

  29. Evaluate the Sessions Sign in and vote at eclipsecon.org -1 0 +1

More recommend