Download - SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic
![Page 1: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/1.jpg)
Improve Workflow Driven Applications with Ext JS
Draw Package
Jovan Cvetkovic
![Page 2: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/2.jpg)
What is Workflow?
• Sequence of processes
• Execution and automation of business processes
• Coordinating tasks between people
2
![Page 3: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/3.jpg)
Business Process Management
• Business solution approach
• BPM Software / Workflow application
![Page 4: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/4.jpg)
Workflow application
![Page 5: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/5.jpg)
Workflow ApplicationWhat is workflow application?
• Graphical designer
![Page 6: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/6.jpg)
Workflow ApplicationGraphical designer
• Back-end
• Front-end
![Page 7: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/7.jpg)
Workflow Application
• Activiti (Software)
• BPMN (Business Process Model and Notation)
Back-end
![Page 8: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/8.jpg)
Workflow Application
• Draw package
• Implementation
• Designer
Front-end
![Page 9: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/9.jpg)
Draw package
![Page 10: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/10.jpg)
Draw Package
• Basic shapes (rectangle, circle, text, image, path…)
• Transformations (translate, rotate, scale)
![Page 11: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/11.jpg)
Implementation
![Page 12: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/12.jpg)
Implementation
• Graphical designer
• Role model (data view)
Idea
![Page 13: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/13.jpg)
Implementation
Final goal
Graphical designer
![Page 14: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/14.jpg)
Implementation
• Store / Data model
• View
Data view role model
![Page 15: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/15.jpg)
Ext.define('App.workflow.data.Model', { extend: 'Ext.data.Model', fields: [{
// Draw Data name: 'translationX' }, { name: 'translationY' }, { name: 'width' }, { name: 'height' }, {
// Activity Data name: 'stepName' }, { name: 'description' }, { name: 'type' }, { name: 'configuration' }, { name: 'outgoingConfiguration' }]});
• Draw graphic data
• Activity workflow data
ImplementationWorkflow data model
![Page 16: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/16.jpg)
Implementation
• Store events
• Selection model (simple, multi, region)
• Plugins (events, drag & drop, pan)
View / draw component
![Page 17: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/17.jpg)
registerStoreListeners: function(){ this.store.on({ add: 'onStoreAdd', load: 'onStoreLoad', remove: 'onStoreRemove', update: 'onStoreChange' });},
onStoreAdd: function(record){ var surface = this.getSurface(); var sprite = record.getData(); surface.add(sprite);}
• Load (add all steps)
• Add (add step)
• Change (change step)
• Remove (remove step)
ImplementationStore events
![Page 18: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/18.jpg)
onItemSelect: function(record){ var sprite = this.findSprite(record); sprite.setAttributes({ selected: true });}
getRegion: function(){ var bbox = this.getBBox(); var top = bbox.x; var right = bbox.x + bbox.width; var bottom = bbox.y + bbox.height; var left = bbox.y; return Ext.create('Ext.util.Region', top, right, bottom, left);}
• Selecto Simple selectiono Multi selectiono Region selection
• Deselect• Deselect all
Selection modelImplementation
![Page 19: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/19.jpg)
Implementation
Select by drawing a region
Region selection
![Page 20: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/20.jpg)
Implementation
• Events (mouse events, click, hover…)
• Drag & Drop
• Pan (move surface)
Plugins
![Page 21: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/21.jpg)
Implementation
• Mandatory (enables use of touch and click events)
• Out of the box
Events plugin
![Page 22: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/22.jpg)
config: { gestures: { minDistance: 2, dragstart: 'onDragStart', drag: 'onDrag', dragend: 'onDragEnd' }}
• Start drag
• Drag element
• End drag
ImplementationDrag & drop plugin
![Page 23: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/23.jpg)
onDragStart: function(e){ var draw = this.getDraw(); var sprite = draw.getItemFromEvent(e); var ghost = sprite.ghost; var surface = draw.getSurface(); var xy = surface.getEventXY(e); this.startX = xy[0]; this.startY = xy[1]; this.translationX = sprite.attr.translationX; this.translationY = sprite.attr.translationY; ghost = Ext.apply(ghost, { translationX: this.translationX, translationY: this.translationY }); surface.add(ghost); surface.renderFrame();}
• Ghost element
• Start position
Start dragImplementation
![Page 24: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/24.jpg)
onDrag: function(e){ var draw = this.getDraw(); var surface = draw.getSurface(); var xy = surface.getEventXY(e); var deltaX = xy[0] - this.startX; var deltaY = xy[1] - this.startY; var positionX = this.translationX + deltaX; var positionY = this.translationY + deltaY; this.ghost.setAttributes({ translationX: positionX, translationY: positionY }); surface.renderFrame();}
ImplementationDrag
• Move vs translate
![Page 25: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/25.jpg)
onDragEnd: function(e){ var draw = this.getDraw(); var item = draw.getItemFromEvent(e); var surface = draw.getSurface(); var translation = this.getRulerSnapPosition(); item.record.set(translation); this.ghost.destroy(true); delete this.ghost; surface.renderFrame();}
ImplementationEnd drag
• Snap to position
• Set new coordinates
![Page 26: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/26.jpg)
updateViewBox: function(x, y){ var draw = this.getDraw(); var surface = draw.getSurface(); var viewBox = surface.getViewBox(); var updatedViewBox = [ (0 - x), (0 - y), viewBox.width, viewBox.height ].join(); surface.setViewBox(updatedViewBox);}
ImplementationPan plugin
• Draw surface
• ViewBox
![Page 27: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/27.jpg)
ImplementationViewBox
![Page 28: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/28.jpg)
Designer
![Page 29: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/29.jpg)
Designer
• Basic elements
• Composite elements
Sprite
![Page 30: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/30.jpg)
inheritableStatics: { def: { processors: { selected: 'bool' }, dirtyTriggers: { selected: 'setSelected' }, defaults: { selected: false }, updaters: { setSelected: function(attr){
var stroke = this.baseClr; if (attr.selected) { stroke = this.selectedClr; }
this.setAttributes({ strokeStyle: strokeStyle }); this.redraw(); } } }}
DesignerProcessors & updaters
• Attribute
• Processor
• Trigger
• Updater
![Page 31: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/31.jpg)
Designer
• Start
• Automatic
• Human
• Gate
• Transition
• End
Designer steps
![Page 32: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/32.jpg)
DesignerFinal view
![Page 33: SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package - Jovan Cvetkovic](https://reader034.vdocument.in/reader034/viewer/2022042723/5876fe511a28abf3398b6cab/html5/thumbnails/33.jpg)