YUI3 e AlloyUI  Eduardo Lundgren     Liferay Inc.    @eduardolundgren
Pontos principais1. Introdução YUI e AlloyUI2. Primeiros Passos3. Por que utilizar YUI?4. Exemplos5. Conclusão
YUI3and Alloy.
O que é AlloyUI?• Extensão para YUI• Open Source (BSD)
YUI: Componentes• Utilities• Selectors• DOM• Events• Effects• Ajax / pjax• Muito mais
Alloy: Componentes• Calendário• Carousel• Image Gallery• Progress Bar• Resize• Scheduler• Muito mais
YUI: Primeiros passos<!doctype html><html>  <head>    <title>Demo</title>    <script src="http://yui.yahooapis.com/3.5.0/b...
YUI: Primeiros passos<!doctype html><html>  <head>    <title>Demo</title>    <script src="http://yui.yahooapis.com/3.5.0/b...
YUI: Primeiros passosjQuery $(document).ready(function(){   // Your code here });YUI3YUI().use(‘widget’, function(Y) {    ...
YUI: Primeiros passosYUI SandboxYUI().use(‘widget’, function(Y) {    // Your code here    var widget = new Y.Widget();});
YUI: Primeiros passosYUI SandboxYUI().use(‘widget’, function(Y) {    // Your code here    var widget = new Y.Widget();});A...
YUI3vs jQuery.
YUI: Primeiros passosjQuery vs. YUIjQuery:$.foo.bar()YUI3:YUI().use(node, module2, function (Y) {  Y.foo.bar()});
YUI: Primeiros passosjQuery vs. YUIjQuery:$(div.foo:first)YUI3:Y.one(div.foo)
YUI: Primeiros passosjQuery vs. YUIjQuery:var foo = $(div.foo:first);foo.someMethod();YUI3:var foo = Y.one(div.foo);if (fo...
YUI: Primeiros passosjQuery vs. YUIjQuery:$(div.foo)YUI3:Y.all(div.foo)
YUI: Primeiros passosjQuery vs. YUIjQuery:.find(p.foo:first).find(p.foo)YUI3:.one(p.foo).all(p.foo)
YUI: Primeiros passosjQuery vs. YUIjQuery:$(<div/>)YUI3:Y.Node.create(<div/>)
YUI: Primeiros passosjQuery vs. YUIjQuery:.html(foo).text(foo).val(foo)YUI3:.setHTML(foo).set(text, foo).set(value, foo)
YUI: Primeiros passosjQuery vs. YUIjQuery:.html().text().val()YUI3:.getHTML().get(text).get(value)
YUI: Primeiros passosjQuery vs. YUIjQuery:parent.append(<div/>);child.appendTo(parent);YUI3:parent.append(<div/>);child.ap...
YUI: Primeiros passosjQuery vs. YUIjQuery:.click(fn).focus(fn).blur(fn).mouseout(fn).mouseover(fn)YUI3:.on(click, fn).on(f...
YUI: Primeiros passosjQuery vs. YUIjQuery:$(#message).load(/ajax/test.html);YUI3:Y.one(#message).load(/ajax/test.html);Y.o...
YUI: Primeiros passosjQuery vs. YUIjQuery:                   YUI3:$(#foo).animate(        Y.one(#foo).transition({   {    ...
Por que usar YUI3?
Por que usar YUI3?• Built-in Lazy Loading• Base• Widget• Graphics• Custom Events• Muito mais
Por que usar YUI3?Loader ModuleYUI().use(‘mod1’,‘mod2’, function(Y) {    // Your code here    var widget = new Y.Widget();...
Por que usar YUI3?Y.BaseY.User = A.Component.create({    NAME: User,                           var user1 = new Y.User({   ...
Por que usar YUI3?Y.Widget
Por que usar YUI3?Y.WidgetA.Calendario = A.Component.create({    NAME: Calendario,                 var c1 = new Y.Calendar...
Exemplos
Liferay Portal
1Workflow Designer
O que queríamos?
O que queríamos?•   Como expressar ideias mais eficientemente?•   Construir visualmente um fluxo para a engine de    workf...
WorkflowDefinição <?xml version="1.0"?> <workflow-definition>     <name>Single Approver</name>     <description>A single a...
Protótipo (sem YUI)
O que realmente queríamos?
Diagram Builder• Drag-and-drop interface• HTML5 and web standards (no flash)• Support modern browsers and devices• HTML vs...
Diagram Builder (with YUI)
Arquitetura
Diagram Builder   Y.DiagramBuilder
Diagram Builder      Y.WidgetY.DiagramBuilderBase   Y.FieldSupport                       ‣ addField(field, index);        ...
Diagram Builder            Available Fields
Diagram Builder     Y.AvailableField
Available Fields       Y.Base   Y.AvailableField                      Y.AvailableField
Diagram Builder          Y.DiagramNode
Arquitetura: Node         Y.Overlay                       Y.DiagramNode                    Y.DiagramNodeState             ...
Arquitetura: Node .yui3-widget .aui-diagram-node  .aui-diagram-node-content                   <svg:svg />
Diagram Builder                  Y.Connector
Connector Architecture      Y.Base    Y.Connector          Y.Connector
Diagram Builder   Canvas === Y.Graphic
Exemplos
2Scheduler
O que queríamos?google calendar
Calendário• Serviço de agenda e calendário on-line• Adicionar, controlar eventos,  compromissos, compartilhar  programação
Y.Scheduler
Perguntas?
Obrigado!•   Pernambuco.JS•   Liferay Inc.•   YAHOO!•   YUI Team
Referências•   Liferay Portal http://github.com/liferay/liferay-portal•   AlloyUI http://github.com/liferay/alloy-ui•   Al...
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
YUI3 and AlloyUI Introduction for Pernambuco.JS 2012
Upcoming SlideShare
Loading in …5
×

YUI3 and AlloyUI Introduction for Pernambuco.JS 2012

2,562 views

Published on

YUI3 and AlloyUI Introduction for Pernambuco.JS (pernambucojs.com)

Published in: Technology

YUI3 and AlloyUI Introduction for Pernambuco.JS 2012

  1. 1. YUI3 e AlloyUI Eduardo Lundgren Liferay Inc. @eduardolundgren
  2. 2. Pontos principais1. Introdução YUI e AlloyUI2. Primeiros Passos3. Por que utilizar YUI?4. Exemplos5. Conclusão
  3. 3. YUI3and Alloy.
  4. 4. O que é AlloyUI?• Extensão para YUI• Open Source (BSD)
  5. 5. YUI: Componentes• Utilities• Selectors• DOM• Events• Effects• Ajax / pjax• Muito mais
  6. 6. Alloy: Componentes• Calendário• Carousel• Image Gallery• Progress Bar• Resize• Scheduler• Muito mais
  7. 7. YUI: Primeiros passos<!doctype html><html> <head> <title>Demo</title> <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"> </head> <body> <script> // Your code here! </script> </body></html>
  8. 8. YUI: Primeiros passos<!doctype html><html> <head> <title>Demo</title> <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"> </head> <body> <script> // Your code here! </script> 20KB! </body></html>
  9. 9. YUI: Primeiros passosjQuery $(document).ready(function(){ // Your code here });YUI3YUI().use(‘widget’, function(Y) { // Your code here});
  10. 10. YUI: Primeiros passosYUI SandboxYUI().use(‘widget’, function(Y) { // Your code here var widget = new Y.Widget();});
  11. 11. YUI: Primeiros passosYUI SandboxYUI().use(‘widget’, function(Y) { // Your code here var widget = new Y.Widget();});Alloy SandboxAUI().use(‘widget’, function(A) { // Your code here var widget = new A.Widget();});
  12. 12. YUI3vs jQuery.
  13. 13. YUI: Primeiros passosjQuery vs. YUIjQuery:$.foo.bar()YUI3:YUI().use(node, module2, function (Y) { Y.foo.bar()});
  14. 14. YUI: Primeiros passosjQuery vs. YUIjQuery:$(div.foo:first)YUI3:Y.one(div.foo)
  15. 15. YUI: Primeiros passosjQuery vs. YUIjQuery:var foo = $(div.foo:first);foo.someMethod();YUI3:var foo = Y.one(div.foo);if (foo) { foo.someMethod(); }
  16. 16. YUI: Primeiros passosjQuery vs. YUIjQuery:$(div.foo)YUI3:Y.all(div.foo)
  17. 17. YUI: Primeiros passosjQuery vs. YUIjQuery:.find(p.foo:first).find(p.foo)YUI3:.one(p.foo).all(p.foo)
  18. 18. YUI: Primeiros passosjQuery vs. YUIjQuery:$(<div/>)YUI3:Y.Node.create(<div/>)
  19. 19. YUI: Primeiros passosjQuery vs. YUIjQuery:.html(foo).text(foo).val(foo)YUI3:.setHTML(foo).set(text, foo).set(value, foo)
  20. 20. YUI: Primeiros passosjQuery vs. YUIjQuery:.html().text().val()YUI3:.getHTML().get(text).get(value)
  21. 21. YUI: Primeiros passosjQuery vs. YUIjQuery:parent.append(<div/>);child.appendTo(parent);YUI3:parent.append(<div/>);child.appendTo(parent);
  22. 22. YUI: Primeiros passosjQuery vs. YUIjQuery:.click(fn).focus(fn).blur(fn).mouseout(fn).mouseover(fn)YUI3:.on(click, fn).on(focus, fn).on(blur, fn).on(mouseout, fn).on(mouseover, fn)
  23. 23. YUI: Primeiros passosjQuery vs. YUIjQuery:$(#message).load(/ajax/test.html);YUI3:Y.one(#message).load(/ajax/test.html);Y.one(#message).load(/ajax/test.html, #foo);
  24. 24. YUI: Primeiros passosjQuery vs. YUIjQuery: YUI3:$(#foo).animate( Y.one(#foo).transition({ { width: 100, width: 100, opacity: 0.5, opacity: 0.5 duration: 0.6 }, }); { duration: 600, easing: swing });
  25. 25. Por que usar YUI3?
  26. 26. Por que usar YUI3?• Built-in Lazy Loading• Base• Widget• Graphics• Custom Events• Muito mais
  27. 27. Por que usar YUI3?Loader ModuleYUI().use(‘mod1’,‘mod2’, function(Y) { // Your code here var widget = new Y.Widget();}); Scripts block downloads in IE6&7, Firefox 2&3.0, Safari 3, Chrome 1, and Opera Scripts downloads in parallel
  28. 28. Por que usar YUI3?Y.BaseY.User = A.Component.create({ NAME: User, var user1 = new Y.User({ nome: ‘Eduardo’ ATTRS: { }); nome: { value: Default name } }, EXTENDS: Y.Base, prototype: { initializer: function() {} }});
  29. 29. Por que usar YUI3?Y.Widget
  30. 30. Por que usar YUI3?Y.WidgetA.Calendario = A.Component.create({ NAME: Calendario, var c1 = new Y.Calendario({ date: ’10/10/2012’ ATTRS: { }); date: { value: } }, c1.render(); EXTENDS: A.Widget, prototype: { initializer: function() {}, renderUI: function() {}, bindUI: function() {}, syncUI: function() {}, destroy: function() {} }});
  31. 31. Exemplos
  32. 32. Liferay Portal
  33. 33. 1Workflow Designer
  34. 34. O que queríamos?
  35. 35. O que queríamos?• Como expressar ideias mais eficientemente?• Construir visualmente um fluxo para a engine de workflow do Liferay
  36. 36. WorkflowDefinição <?xml version="1.0"?> <workflow-definition> <name>Single Approver</name> <description>A single approver can approve a workflow content.</ description> <version>1</version> <state> <name>created</name> <metadata> <![CDATA[{"xy":[78,53]}]]> </metadata> <initial>true</initial> <transitions> <transition> <name>review</name> <target>review</target> </transition> </transitions>
  37. 37. Protótipo (sem YUI)
  38. 38. O que realmente queríamos?
  39. 39. Diagram Builder• Drag-and-drop interface• HTML5 and web standards (no flash)• Support modern browsers and devices• HTML vs Graphic API• Flexible and extensible API
  40. 40. Diagram Builder (with YUI)
  41. 41. Arquitetura
  42. 42. Diagram Builder Y.DiagramBuilder
  43. 43. Diagram Builder Y.WidgetY.DiagramBuilderBase Y.FieldSupport ‣ addField(field, index); ‣ removeField(field); Y.DiagramBuilder
  44. 44. Diagram Builder Available Fields
  45. 45. Diagram Builder Y.AvailableField
  46. 46. Available Fields Y.Base Y.AvailableField Y.AvailableField
  47. 47. Diagram Builder Y.DiagramNode
  48. 48. Arquitetura: Node Y.Overlay Y.DiagramNode Y.DiagramNodeState Y.DiagramStart Y.DiagramEnd Y.DiagramJoin Y.DiagramFork Y.DiagramTask Y.DiagramCondition
  49. 49. Arquitetura: Node .yui3-widget .aui-diagram-node .aui-diagram-node-content <svg:svg />
  50. 50. Diagram Builder Y.Connector
  51. 51. Connector Architecture Y.Base Y.Connector Y.Connector
  52. 52. Diagram Builder Canvas === Y.Graphic
  53. 53. Exemplos
  54. 54. 2Scheduler
  55. 55. O que queríamos?google calendar
  56. 56. Calendário• Serviço de agenda e calendário on-line• Adicionar, controlar eventos, compromissos, compartilhar programação
  57. 57. Y.Scheduler
  58. 58. Perguntas?
  59. 59. Obrigado!• Pernambuco.JS• Liferay Inc.• YAHOO!• YUI Team
  60. 60. Referências• Liferay Portal http://github.com/liferay/liferay-portal• AlloyUI http://github.com/liferay/alloy-ui• AlloyUI API http://deploy.alloyui.com/api• Twitter: @eduardolundgren• E-Mail: eduardo.lundgren@liferay.com• Github: http://github.com/eduardolundgren• YUI3 vs. jQuery? http://www. jsrosettastone.com

×