Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introducing  AlloyUI  Diagram  BuilderEduardo Lundgren   Liferay Inc.  @eduardolundgren
Main points1. What we needed2. What we wanted to create3. How we started4. Architecture5. Events6. Serializing visual data...
What’s AlloyUI?• Provide a set of UI Widgets and  Utilities on top of YUI3
What we needed
Liferay Portal
What we needed•   How to explain complex ideas more effectively?•   Build definitions visually for Liferay Workflow Engine
What we needed
What we wanted to create
The Goal: Diagram Builder
The Goal: Diagram Builder• Intuitive drag-and-drop interface• HTML5 and web standards (no flash)• Support modern browsers ...
How we started
How we started      new A.DiagramBuilder(       {        availableFields: [ {...}, ... ],        boundingBox: #bbId,      ...
How we started      new A.DiagramBuilder(       {        availableFields: [ {...}, ... ],        boundingBox: #bbId,      ...
How we started   var availableFields = [    {     type: task,     label: Task,     iconClass: aui-diagram-node-task-icon  ...
Y.DiagramBuilderHow we started
How we started          div.aui-diagram-builder-canvas           svg/vml                       new Y.Graphic(...)
How we started          Available Fields
How we started    Y.AvailableField
How we started          Y.DiagramNode
How we started            Inspector
How we started   Y.Connector
How we started                 12KB
Architecture
Diagram Builder Architecture     aui-diagram-builder       aui-diagram-builder-base       aui-diagram-builder-impl
Diagram Builder Architecture      Y.WidgetY.DiagramBuilderBase   Y.FieldSupport                       ‣ addField(field, in...
Diagram Builder Architecture      Y.WidgetY.DiagramBuilderBase   Y.FieldSupport                       ‣ addField(field, in...
Diagram Builder Architecture      Y.WidgetY.DiagramBuilderBase   Y.FieldSupport                       ‣ addField(field, in...
Diagram Builder Architecture                      Y.DiagramBuilder                          Y.FormBuilder
Diagram Builder Architecture                      Y.DiagramBuilder                          Y.FormBuilder
Diagram Builder Architecture                      Y.DiagramBuilder
Available Fields Architecture              Y.Base    Y.AvailableField‣ draggable‣ label                Y.AvailableField‣ i...
Available Fields Architecture    var availableFields = [     {      type: task,      label: Task,      iconClass: aui-diag...
Node Architecture           Y.DiagramNode
Node Architecture                    Y.Overlayvar availableFields = [ {  type: start,                                  Y.D...
Node Architecture   .yui3-widget .aui-diagram-node    .aui-diagram-node-content                  <svg:svg />
Node ArchitectureA.DiagramNode.CIRCLE_POINTS: [ [35, 20], [28, 33], [14, 34], ...]A.DiagramNode.DIAMOND_POINTS: [ [30,5], ...
Connector Architecture   Y.Connector
Connector Architecture                      Y.Base                 Y.Connector          ‣ p1          ‣ p2          ‣ draw...
Connector Architecture                                                                            x     p1 (x1, y1)       ...
Connector Architecture• Problem1: Position some element  over the curve.• Is there a way to get the curve points  from SVG...
Connector Architecture• Solution: JavaScript Impl of CubicBézier.
Connector Architecture                    BézierBernstein basis polynomial     • The points “Pi” are called control points...
Connector ArchitectureCubic Bézier JavaScript Implementation:  B1   =   function(t)   {   return   (t*t*t); },  B2   =   f...
Connector ArchitectureCubic Bézier JavaScript Implementation:  B1   =   function(t)   {   return   (t*t*t); },  B2   =   f...
Connector Architecture• Problem2: Dynamic control points.   p1 (x1, y1)                          p2 (x2, y2)
Connector Architecture
Connector Architecture• 8 pseudo-quadrants decides the new               control points                        2          ...
Connector Architecture• Problem3: Preventing overlap.    p1 (x1, y1)                       p2 (x2, y2)
Connector Architecture• Problem3: Preventing overlap.    p1 (x1, y1)                       p2 (x2, y2)
Connector Architecture• Problem3: Preventing overlap.    p1 (x1, y1)                     d =   (x1 − x2 )2 + (y1 − y2 )2  ...
Connector Architecture              (demo)
Events • boundaryMouseEnter• boundaryMouseLeave• connectDrop• connectEnd• connectMove• connectOutTarget• connectOverTarget...
Serializing visual data                (demo)
Real world application       Liferay Workflow Designer                (demo)
Questions
Thank you!•   Liferay Inc.•   YUI Team•   @natecavanaugh - nathan.cavanaugh@liferay.com•   @jonmak - jonathan.mak@liferay....
References•   Liferay Portal http://github.com/liferay/liferay-portal•   AlloyUI http://github.com/liferay/alloy-ui•   Wik...
Contact•   E-Mail: eduardo.lundgren@liferay.com•   Twitter: @eduardolundgren
Upcoming SlideShare
Loading in …5
×

Introducing AlloyUI DiagramBuilder

2,844 views

Published on

Published in: Technology, News & Politics
  • Be the first to comment

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

×