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,097

Published on

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

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,097
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
45
Comments
1
Likes
3
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×