1. Introducing
AlloyUI
Diagram
Builder
Eduardo Lundgren
Liferay Inc.
@eduardolundgren

2. Main points
1. What we needed
2. What we wanted to create
3. How we started
4. Architecture
5. Events
6. Serializing visual data (demo)
7. Real world applications (demo)

3. What’s AlloyUI?
• Provide a set of UI Widgets and
Utilities on top of YUI3

4. What we needed

5. Liferay Portal

6. What we needed
• How to explain complex ideas more effectively?
• Build definitions visually for Liferay Workflow Engine

7. What we needed

8. What we wanted to create

9. The Goal: Diagram Builder

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. How we started

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. 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. 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. Y.DiagramBuilder
How we started

16. How we started
div.aui-diagram-builder-canvas
svg/vml
new Y.Graphic(...)

17. How we started
Available Fields

18. How we started
Y.AvailableField

19. How we started
Y.DiagramNode

20. How we started
Inspector

21. How we started Y.Connector

22. How we started
12KB

23. Architecture

24. Diagram Builder Architecture
aui-diagram-builder
aui-diagram-builder-base
aui-diagram-builder-impl

25. Diagram Builder Architecture
Y.Widget
Y.DiagramBuilderBase Y.FieldSupport
‣ addField(field, index);
‣ removeField(field);
Y.DiagramBuilder

26. Diagram Builder Architecture
Y.Widget
Y.DiagramBuilderBase Y.FieldSupport
‣ addField(field, index);
‣ removeField(field);
Y.DiagramBuilder

27. Diagram Builder Architecture
Y.Widget
Y.DiagramBuilderBase Y.FieldSupport
‣ addField(field, index);
‣ removeField(field);
Y.DiagramBuilder

28. Diagram Builder Architecture
Y.DiagramBuilder
Y.FormBuilder

29. Diagram Builder Architecture
Y.DiagramBuilder
Y.FormBuilder

30. Diagram Builder Architecture
Y.DiagramBuilder

31. Available Fields Architecture
Y.Base
Y.AvailableField
‣ draggable
‣ label Y.AvailableField
‣ iconClass
‣ type

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. Node Architecture
Y.DiagramNode

34. Node Architecture Y.Overlay
var availableFields = [
{
type: 'start',
Y.DiagramNode
label: 'Start',
...
},
Y.DiagramNodeState
{
type: 'end',
label: 'End',
...
},
...
]; Y.DiagramStart
Y.DiagramEnd
A.DiagramBuilder.types = {
start: A.DiagramNodeStart,
end: A.DiagramNodeEnd, Y.DiagramJoin
join: A.DiagramNodeJoin,
... Y.DiagramFork
};
Y.DiagramTask
Y.DiagramCondition

35. Node Architecture
.yui3-widget .aui-diagram-node
.aui-diagram-node-content
<svg:svg />

36. Node Architecture
A.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. Connector Architecture Y.Connector

38. Connector Architecture
Y.Base
Y.Connector
‣ p1
‣ p2
‣ draw();

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. 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. Connector Architecture
• Solution: JavaScript Impl of Cubic
Bézier.

42. Connector Architecture
Bézier
Bernstein basis polynomial
• The points “Pi” are called control points for the Bézier curve.
• “t” varies from 0 to 1.
(Image from Wikipedia)

43. Connector Architecture
Cubic 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. Connector Architecture
Cubic 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. Connector Architecture
• Problem2: Dynamic control points.
p1 (x1, y1)
p2 (x2, y2)

46. Connector Architecture

47. Connector Architecture
• 8 pseudo-quadrants decides the new
control points
2
3 1
+
4 0
3 1
-
2

48. Connector Architecture
• Problem3: Preventing overlap.
p1 (x1, y1)
p2 (x2, y2)

49. Connector Architecture
• Problem3: Preventing overlap.
p1 (x1, y1)
p2 (x2, y2)

50. Connector Architecture
• Problem3: Preventing overlap.
p1 (x1, y1)
d = (x1 − x2 )2 + (y1 − y2 )2
d -> min p2 (x2, y2)

51. Connector Architecture
(demo)

52. Events
• boundaryMouseEnter
• boundaryMouseLeave
• connectDrop
• connectEnd
• connectMove
• connectOutTarget
• connectOverTarget
• connectStart

53. Serializing visual data
(demo)

54. Real world application
Liferay Workflow Designer
(demo)

55. Questions

56. Thank you!
• Liferay Inc.
• YUI Team
• @natecavanaugh - nathan.cavanaugh@liferay.com
• @jonmak - jonathan.mak@liferay.com
• @bbasto - bruno.basto@liferay.com

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. Contact
• E-Mail: eduardo.lundgren@liferay.com
• Twitter: @eduardolundgren