Introducing AlloyUI DiagramBuilder

2,625 views

Published on

Published in: Technology, News & Politics
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,625
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
68
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Introducing AlloyUI DiagramBuilder

    1. 1. Introducing AlloyUI Diagram BuilderEduardo Lundgren Liferay Inc. @eduardolundgren
    2. 2. Main points1. What we needed2. What we wanted to create3. How we started4. Architecture5. Events6. Serializing visual data (demo)7. Real world applications (demo)
    3. 3. What’s AlloyUI?• Provide a set of UI Widgets and Utilities on top of YUI3
    4. 4. What we needed
    5. 5. Liferay Portal
    6. 6. What we needed• How to explain complex ideas more effectively?• Build definitions visually for Liferay Workflow Engine
    7. 7. What we needed
    8. 8. What we wanted to create
    9. 9. The Goal: Diagram Builder
    10. 10. The Goal: Diagram Builder• Intuitive drag-and-drop interface• HTML5 and web standards (no flash)• Support modern browsers and devices• Balance between HTML v Graphic API• Flexible and extensible API
    11. 11. How we started
    12. 12. How we started new A.DiagramBuilder( { availableFields: [ {...}, ... ], boundingBox: #bbId, fields: [ { name: Start, transitions: [ Task ], type: start }, { name: Task, transitions: [ End ], type: task }, { name: End, type: end } ], render: true } );
    13. 13. How we started new A.DiagramBuilder( { availableFields: [ {...}, ... ], boundingBox: #bbId, fields: [ { name: Start, transitions: [ Task ], type: start }, { name: Task, transitions: [ End ], type: task }, { name: End, type: end } ], render: true } );
    14. 14. How we started var availableFields = [ { type: task, label: Task, iconClass: aui-diagram-node-task-icon }, { type: state, label: State, iconClass: aui-diagram-node-state-icon }, ... ];
    15. 15. Y.DiagramBuilderHow we started
    16. 16. How we started div.aui-diagram-builder-canvas svg/vml new Y.Graphic(...)
    17. 17. How we started Available Fields
    18. 18. How we started Y.AvailableField
    19. 19. How we started Y.DiagramNode
    20. 20. How we started Inspector
    21. 21. How we started Y.Connector
    22. 22. How we started 12KB
    23. 23. Architecture
    24. 24. Diagram Builder Architecture aui-diagram-builder aui-diagram-builder-base aui-diagram-builder-impl
    25. 25. Diagram Builder Architecture Y.WidgetY.DiagramBuilderBase Y.FieldSupport ‣ addField(field, index); ‣ removeField(field); Y.DiagramBuilder
    26. 26. Diagram Builder Architecture Y.WidgetY.DiagramBuilderBase Y.FieldSupport ‣ addField(field, index); ‣ removeField(field); Y.DiagramBuilder
    27. 27. Diagram Builder Architecture Y.WidgetY.DiagramBuilderBase Y.FieldSupport ‣ addField(field, index); ‣ removeField(field); Y.DiagramBuilder
    28. 28. Diagram Builder Architecture Y.DiagramBuilder Y.FormBuilder
    29. 29. Diagram Builder Architecture Y.DiagramBuilder Y.FormBuilder
    30. 30. Diagram Builder Architecture Y.DiagramBuilder
    31. 31. Available Fields Architecture Y.Base Y.AvailableField‣ draggable‣ label Y.AvailableField‣ iconClass‣ type
    32. 32. Available Fields Architecture var availableFields = [ { type: task, label: Task, iconClass: aui-diagram-node-task-icon }, { type: state, label: State, iconClass: aui-diagram-node-state-icon }, ... ];
    33. 33. Node Architecture Y.DiagramNode
    34. 34. Node Architecture Y.Overlayvar availableFields = [ { type: start, Y.DiagramNode label: Start, ... }, Y.DiagramNodeState { type: end, label: End, ... }, ...]; Y.DiagramStart Y.DiagramEndA.DiagramBuilder.types = { start: A.DiagramNodeStart, end: A.DiagramNodeEnd, Y.DiagramJoin join: A.DiagramNodeJoin, ... Y.DiagramFork}; Y.DiagramTask Y.DiagramCondition
    35. 35. Node Architecture .yui3-widget .aui-diagram-node .aui-diagram-node-content <svg:svg />
    36. 36. Node ArchitectureA.DiagramNode.CIRCLE_POINTS: [ [35, 20], [28, 33], [14, 34], ...]A.DiagramNode.DIAMOND_POINTS: [ [30,5], [35,10], [40,15], ...]A.DiagramNode.SQUARE_POINTS: [ [5,5], [10,5], [15,5], ... ]
    37. 37. Connector Architecture Y.Connector
    38. 38. Connector Architecture Y.Base Y.Connector ‣ p1 ‣ p2 ‣ draw();
    39. 39. Connector Architecture x p1 (x1, y1) p2 (x2, y2) Cubic Bézier <path d="M x1,y1 C x1,y1 x2,y2 c1x,c1y" stroke="lightblue" /> y curveTo(...);
    40. 40. Connector Architecture• Problem1: Position some element over the curve.• Is there a way to get the curve points from SVG/VML path? (x, y)? Connector Name p1 (x1, y1) p2 (x2, y2)
    41. 41. Connector Architecture• Solution: JavaScript Impl of CubicBézier.
    42. 42. Connector Architecture BézierBernstein basis polynomial • The points “Pi” are called control points for the Bézier curve. • “t” varies from 0 to 1. (Image from Wikipedia)
    43. 43. Connector ArchitectureCubic Bézier JavaScript Implementation: B1 = function(t) { return (t*t*t); }, B2 = function(t) { return (3*t*t*(1-t)); }, B3 = function(t) { return (3*t*(1-t)*(1-t)); }, B4 = function(t) { return ((1-t)*(1-t)*(1-t)); } getCubicBezier = function(t, startPos, endPos, cp1, cp2) { var x = ...; var y = ...; return [x, y]; } var centerXY = getCubicBezier(0.5, [x1, y1], [x2, y2], [cpx1, cpy1], [cpx2, cpy2]); centerXY (50%) Connector Name p1 (x1, y1) p2 (x2, y2)
    44. 44. Connector ArchitectureCubic Bézier JavaScript Implementation: B1 = function(t) { return (t*t*t); }, B2 = function(t) { return (3*t*t*(1-t)); }, B3 = function(t) { return (3*t*(1-t)*(1-t)); }, B4 = function(t) { return ((1-t)*(1-t)*(1-t)); } getCubicBezier = function(t, startPos, endPos, cp1, cp2) { var x = ...; var y = ...; return [x, y]; } var centerXY = getCubicBezier(0.5, [x1, y1], [x2, y2], [cpx1, cpy1], [cpx2, cpy2]); centerXY (50%) 50% Connector Name p1 (x1, y1) p2 (x2, y2)
    45. 45. Connector Architecture• Problem2: Dynamic control points. p1 (x1, y1) p2 (x2, y2)
    46. 46. Connector Architecture
    47. 47. Connector Architecture• 8 pseudo-quadrants decides the new control points 2 3 1 + 4 0 3 1 - 2
    48. 48. Connector Architecture• Problem3: Preventing overlap. p1 (x1, y1) p2 (x2, y2)
    49. 49. Connector Architecture• Problem3: Preventing overlap. p1 (x1, y1) p2 (x2, y2)
    50. 50. Connector Architecture• Problem3: Preventing overlap. p1 (x1, y1) d = (x1 − x2 )2 + (y1 − y2 )2 d -> min p2 (x2, y2)
    51. 51. Connector Architecture (demo)
    52. 52. Events • boundaryMouseEnter• boundaryMouseLeave• connectDrop• connectEnd• connectMove• connectOutTarget• connectOverTarget• connectStart
    53. 53. Serializing visual data (demo)
    54. 54. Real world application Liferay Workflow Designer (demo)
    55. 55. Questions
    56. 56. Thank you!• Liferay Inc.• YUI Team• @natecavanaugh - nathan.cavanaugh@liferay.com• @jonmak - jonathan.mak@liferay.com• @bbasto - bruno.basto@liferay.com
    57. 57. References• Liferay Portal http://github.com/liferay/liferay-portal• AlloyUI http://github.com/liferay/alloy-ui• Wikipedia http://en.wikipedia.org/wiki/B%C3%A9zier_curve• Rob La Placa CSS cubic Bézier builder http://www.roblaplaca.com/examples/bezierBuilder/
    58. 58. Contact• E-Mail: eduardo.lundgren@liferay.com• Twitter: @eduardolundgren

    ×