SLIDE 1
GRAPHICAL VIEWS FOR WEB APPLICATIONS
Jan Köhnlein Miro Spönemann
sprotty
@jankoehnlein @sponemann
visualize complex relationships… models data networks modules dependencies states actors subsystems
sprotty GRAPHICAL VIEWS FOR WEB APPLICATIONS Jan Khnlein Miro - - PowerPoint PPT Presentation
sprotty GRAPHICAL VIEWS FOR WEB APPLICATIONS Jan Khnlein Miro - - PowerPoint PPT Presentation
sprotty GRAPHICAL VIEWS FOR WEB APPLICATIONS Jan Khnlein Miro Spnemann @jankoehnlein @sponemann visualize complex relationships subsystems models dependencies actors modules states networks data
SLIDE 2
SLIDE 3
SLIDE 4
Request Dispatch
L0,2 L7,2 L29,0 L8,2 L20,1 L28,0 L10,2: pend = false L18,0 L17,2 L11,2: req L12,2: pend = true L13,2: checkReq=req L14,0: pend && grant L23,1: checkReq && free
1 wr
L15,0: pend = false L16s,0
true true
L16d,2 L22,1: grant = false L27,0 L26,1
1 wr
L24,1: grant = true
1wr
L25s,0
true
L25d,1
SLIDE 5 Activity reset buffer process command monitor status
startup shutdown got command status done command done is complete no command rerun startup got command no command command done status done is complete rerun shutdown
ILayoutConfig
getAffectedOptions (LayoutContext) : Collection<IProperty<?>> getContextValue (IProperty<?>, LayoutContext) : Object getOptionValue (LayoutOptionData, LayoutContext) : Object getPriority () : int
IMutableLayoutConfig
setOptionValue (LayoutOptionData, LayoutContext, Object) : void
AbstractMutableLayoutConfig CompoundLayoutConfig
add (ILayoutConfig) : void remove (ILayoutConfig) : void
DefaultLayoutConfig SemanticLayoutConfig
getAffectedOptions (Object) : IProperty<?>[] getSemanticValue (Object, LayoutOptionData) : Object setSemanticValue (Object, LayoutOptionData, Object) : void
EclipseLayoutConfig
0..*
SLIDE 6
SLIDE 7
GEF
SLIDE 8
CSS
sprotty
SLIDE 9
DEMO: NPM
npm-dependencies.com
SLIDE 10
CLIENT ARCHITECTURE: Flow Of Information
Model View Controller
SLIDE 11
ActionDispatcher CommandStack Viewer
Command Action SModel
CLIENT ARCHITECTURE: Flow Of Information
SLIDE 12
ActionDispatcher CommandStack Viewer
Command Action SModel
CLIENT ARCHITECTURE: Viewer and Virtual DOM
Virtual DOM DOM ViewRegistry
Action patch
View View View
render
SLIDE 13
ActionDispatcher CommandStack Viewer
Command Action SModel
CLIENT ARCHITECTURE: Model Source
ModelSource
Action
SLIDE 14
ActionDispatcher CommandStack Viewer
Command Action SModel
CLIENT ARCHITECTURE: Server Connection
ModelSource DiagramServer Web Socket
Action
Action
SLIDE 15
Web Socket
SERVER ARCHITECTURE
Diagram Model Domain Model IDiagramServer
generate
ILayoutEngine
Action
Eclipse Layout Kernel
SLIDE 16
DEMO: MULTICORE
sprotty-demo.typefox.io
SLIDE 17
GETTING STARTED: The Diagram Model
SNode SShapeElement SModelElement SPort SEdge SLabel TaskNode BarrierNode Flow
sprotty model domain-specific model
SLIDE 18
TaskNode TaskNode TaskNode TaskNode TaskNode BarrierNode Flow Flow Flow Flow Flow
source source source source source target target target target target
model instance
GETTING STARTED: The Diagram Model
SLIDE 19
GETTING STARTED: The View
SLIDE 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> } }
SLIDE 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)
SLIDE 22
GETTING STARTED: The Server
TaskNode
Task
application model diagram model
Implement a diagram generator
SLIDE 23
private def createTask(Task declaration) { val tnode = new TaskNode tnode.type = 'task' tnode.id = 'task_' + declaration.name tnode.name = declaration.name return tnode }
Implement a diagram generator
GETTING STARTED: The Server
SLIDE 24
DEMO YANG
SLIDE 25
SERVER ARCHITECTURE: Xtext and LSP
Language Server Xtext Grammar JSON RPC TextDocument Service Workspace Service DiagramLanguage ServerExtension Diagram Service
generate
SLIDE 26
YANG FOR ECLIPSE
SLIDE 27
ECLIPSE PROPOSAL
SLIDE 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
- f common use cases
SLIDE 29
Evaluate the Sessions
- 1 0 +1
Sign in and vote at eclipsecon.org