LibSAPO.js

SAPO Sessions #2



 http://js.sapo.pt/

   18 de Março de 2009



 Cláudio Gamboa
    <gamboa@co.sapo.pt>
LibSAPO.js



Ao contrário de outras pessoas
LibSAPO.js



    ...
LibSAPO.js




Eu venho pregar
LibSAPO.js

                     METAL
                  HELL YEAAHHH




Eu venho pregar
LibSAPO.js




E venho vender o meu peixe
LibSAPO.js

    LibSAPO.js



        Estrutura
    



    Prototype



        Alguns exemplos da API
    



    Li...
LibSAPO.js



  Estrutura
LibSAPO.js
                              (estrutura)




    LibSAPO.js - http://js.sapo.pt/



        SAPO/
    


   ...
LibSAPO.js
                        (estrutura)




    LibSAPO.js - http://js.sapo.pt/



        Prototype/
    



   ...
LibSAPO.js
                                        (estrutura)




    /SAPO/Utility/



             Array/ (inArray, ke...
LibSAPO.js
                                   (estrutura)




    /SAPO/Communication/



            Syndication/
      ...
LibSAPO.js
                            (estrutura)




    /SAPO/Component/              (brevemente)



            Cont...
LibSAPO.js
                          (estrutura)




    /SAPO/Widget/



            Blogthis
        


            Co...
LibSAPO.js
                         (estrutura)




    /Prototype/



             Dragdrop/
         


             E...
LibSAPO.js
                                (estrutura)



    /JQuery/



                                               ...
LibSAPO.js
                            (estrutura)



    /YUI/



            Animation/                        Editor/
...
LibSAPO.js
                                              (estrutura)




    /Bundles/ e /Snippets/



$> cat sapoNoticia...
LibSAPO.js

                   JSLint
            (http://www.jslint.com/)

                   JSMin
(http://www.crockford...
LibSAPO.js




         SOLD
LibSAPO.js

    e

Prototype
LibSAPO.js

       e

  Prototype
Script.aculo.us
LibSAPO.js

       e

  Prototype
Script.aculo.us
  e jQuery...
LibSAPO.js

Todas RULAM...
LibSAPO.js

  ...mas...
Prototype

      ...mas...


falemos de Prototype
Prototype

     $()





em vez:
var myElement = document.getElementById('elmId');


var myElement = $('elmId');
ou
var m...
Prototype

     $$()





em vez:
var aDivs = document.getElementsByTagName('div');
var aDivs = $$('div');
ou
var elm = $...
Prototype

    ... e mais...





$A(), $F(), $H(), $R(), $w(), Try.these()


http://prototypejs.org/api/utility
Prototype
        Class



                         create()
                     


var Animal = Class.create({        ...
Prototype
      Element





new Element('tagName', <attr options>);



ex:



var myA = new Element('a', { 'class': 'foo...
Prototype
    Element



              addClassName()
          


              removeClassName()
          


       ...
Prototype
    Element



                 .... e muitos mais...
             


                 http://prototypejs.org/...
Prototype
    Event



                observe()
            


                element()
            


              ...
Prototype
    Event



                        http://prototypejs.org/api/event
Como usar:
Event.observe(elm, 'click', fu...
Prototype
    Ajax



               Request()
           


               Updater()
           


               Peri...
Prototype
    Ajax



                                  http://prototypejs.org/api/ajax

Como usar:
function onSuccessCal...
Prototype
... and...                Number
                      



    Array                 Object
                  ...
Prototype
    bind()




    bindAsEventListener()





                  WTF?!
Prototype
                     Criar uma class – (sem o Class.create())

var myClass = function() {

     this.init();    ...
Prototype
                                         bind()



var myClass = function() {                        var myClass...
Prototype
                                       bindAsEventListener()



var myClass = function(elm) { this.init(elm); };...
Chega de Prototype
Vamos falar de jQuery?
Ou da


LibSAPO.js
LibSAPO.js

          As variáveis e o código...
var SAPO
    SAPO.namespace();
    SAPO.Browser //{version:'', isGecko:''...
LibSAPO.js

     Ex: SAPO.Utility.String



<script type=”text/javascript” src=”http://js.sapo.pt/SAPO/”></script>

SAPO....
LibSAPO.js
     Ex: SAPO.Widget.LameWidget



SAPO.namespace('Widget');

var SAPO.Widget.LameWidget = function(options) {...
LibSAPO.js


Exemplos
    ...
LibSAPO.js

   Úteis e práticos




para trabalhar como um
        homem :)
LibSAPO.js

    SAPO.Utility.*



             Array/ (inArray, keyValue)
         


             Cookie/ * (get, set, ...
LibSAPO.js

    /SAPO/Component/          (brevemente)



            Contextmenu
        


            Dialog *
      ...
LibSAPO.js

    /SAPO/Communication/



            Syndication/ *
        


             var myIns = new SAPO.Communic...
LibSAPO.js

    /SAPO/Widget/



            Blogthis
        


            Comments
        


            ImageSlide...
Perguntas




   ?
Fim
                                    Cláudio Gamboa
gamboa@co.sapo.pt

http://js.sapo.pt/ - Docs

http://libsapojs.blog...
Upcoming SlideShare
Loading in...5
×

Prototype e LibSAPO.js

806

Published on

Introdução a frameworks.

Tornar a vida mais fácil com Prototype e torná-la ainda mais fácil com a LibSAPO.js.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
806
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Prototype e LibSAPO.js

  1. 1. LibSAPO.js SAPO Sessions #2 http://js.sapo.pt/ 18 de Março de 2009 Cláudio Gamboa <gamboa@co.sapo.pt>
  2. 2. LibSAPO.js Ao contrário de outras pessoas
  3. 3. LibSAPO.js ...
  4. 4. LibSAPO.js Eu venho pregar
  5. 5. LibSAPO.js METAL HELL YEAAHHH Eu venho pregar
  6. 6. LibSAPO.js E venho vender o meu peixe
  7. 7. LibSAPO.js LibSAPO.js  Estrutura  Prototype  Alguns exemplos da API  LibSAPO.js  Código e estrutura do código  Exemplos 
  8. 8. LibSAPO.js Estrutura
  9. 9. LibSAPO.js (estrutura) LibSAPO.js - http://js.sapo.pt/  SAPO/  Utility/  Communication/  Components/ *  Widget/  Assets/  Snippets/  Bundles/ 
  10. 10. LibSAPO.js (estrutura) LibSAPO.js - http://js.sapo.pt/  Prototype/  JQuery/  YUI/ 
  11. 11. LibSAPO.js (estrutura) /SAPO/Utility/  Array/ (inArray, keyValue)  Cookie/ (get, set, remove)  Crypto/ (md5, sha1, sha256)  CSS/ (set)  Dumper/ (printDump, alertDump, returnDump, windowDump)  Pagination/ ( new SAPO.Utility.Pagination(options); )  String/ (ucFirst, trim, stripTags, htmlEntities(En|De)code, utf8(En|De)code, shortString,  removeAccentedChars) Templating/ ( new SAPO.Utility.Templating()).gen )  Url/ (getUrl, getQueryString, getAnchor, getAnchorString, parseUrl, currentScriptElement,  base64(En|De)code) Validator/ (mail, url, isPortuguesePhone, isAOPhone, isMZPhone, isCVPhone)  Variable/ (isArray, isObject, isBoolean, isNumber, isString, isNull) 
  12. 12. LibSAPO.js (estrutura) /SAPO/Communication/  Syndication/  var myIns = new SAPO.Communication.Syndication() myIns.push() myIns.run() myIns.remove()
  13. 13. LibSAPO.js (estrutura) /SAPO/Component/ (brevemente)  Contextmenu  Dialog  Passwordmeter  Rating  Tooltip 
  14. 14. LibSAPO.js (estrutura) /SAPO/Widget/  Blogthis  Comments  ImageSlide  Maps  Marquee  Meteo  Search  ShareThis  SimpleSlide  Spot  Tags  Thumbs 
  15. 15. LibSAPO.js (estrutura) /Prototype/  Dragdrop/  Effects/  Slider/  Controls/  Builder/ 
  16. 16. LibSAPO.js (estrutura) /JQuery/  UIAccordion/ EffectsBlind/   UICore/ EffectsBounce/   UIDatepicker/ EffectsClip/   UIDialog/ EffectsCore/   UIDraggable/ EffectsDrop/   UIDroppable/ EffectsExplode/   UIProgressbar/ EffectsFold/   UIResizable/ EffectsHighlight/   UISelectable/ EffectsPulsate/   UISlider/ EffectsScale/   UISortable/ EffectsShake/   UITabs/ EffectsSlide/   EffectsTransfer/ 
  17. 17. LibSAPO.js (estrutura) /YUI/  Animation/ Editor/   Autocomplete/ Element/   Button/ Event/   Calendar/ Grids/   Colorpicker/ History/   Connection/ Logger/   Container/ Menu/   Datasource/ Slider/   Datatable/ Tabview/   Dom/ Treeview/   DomEvent/ Utilities/   Dragdrop/ 
  18. 18. LibSAPO.js (estrutura) /Bundles/ e /Snippets/  $> cat sapoNoticias2008.bundle - (http://js.sapo.pt/Bundes/sapoNoticias2008.js) script_include(quot;/SAPO/0.1/quot;); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/browser.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/page.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/main_solo.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/elements.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/pngfix.jsquot;, true); script_include(quot;/SAPO/Utility/Url/0.1/quot;); script_include(quot;/SAPO/Utility/Crypto/0.1/quot;); script_include(quot;/SAPO/Communication/Syndication/0.1/quot;); script_include(quot;/Prototype/1.8/quot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/utils.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/swfobject.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/vlw.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/yahoo/yahoo-dom-event.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/yahoo/utilities.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/yahoo/dragdrop-min.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/yahoo/container_core-min.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/carousel/carousel.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/sapocarrossel_solo.jsquot;, true); script_include(quot;http://imgs.sapo.pt/js/NOTICIAS2008/comments.jsquot;, true);
  19. 19. LibSAPO.js JSLint (http://www.jslint.com/) JSMin (http://www.crockford.com/javascript/jsmin.html) m/ ”ROCKAM” m/ 435Kb > 347Kb > 72Kb (gzipped)
  20. 20. LibSAPO.js SOLD
  21. 21. LibSAPO.js e Prototype
  22. 22. LibSAPO.js e Prototype Script.aculo.us
  23. 23. LibSAPO.js e Prototype Script.aculo.us e jQuery...
  24. 24. LibSAPO.js Todas RULAM...
  25. 25. LibSAPO.js ...mas...
  26. 26. Prototype ...mas... falemos de Prototype
  27. 27. Prototype $()  em vez: var myElement = document.getElementById('elmId'); var myElement = $('elmId'); ou var myElement = $(myElement);
  28. 28. Prototype $$()  em vez: var aDivs = document.getElementsByTagName('div'); var aDivs = $$('div'); ou var elm = $$('#myId'); ou var aElms = $$('div.divClassName');
  29. 29. Prototype ... e mais...  $A(), $F(), $H(), $R(), $w(), Try.these() http://prototypejs.org/api/utility
  30. 30. Prototype Class  create()  var Animal = Class.create({ // subclassing Animal initialize: function(name, sound) { var Snake = Class.create(Animal, { this.name = name; initialize: function($super, name) { this.sound = sound; $super(name, 'hissssssssss'); }, } speak: function() { }); alert(this.name + quot; says: quot; + this.sound); } });
  31. 31. Prototype Element  new Element('tagName', <attr options>); ex: var myA = new Element('a', { 'class': 'foo', href: '/foo.html' }).update(quot;Next pagequot;); myA.innerHTML /* Next page */ myA.href /* /foo.html */ myA.className /* foo */
  32. 32. Prototype Element  addClassName()  removeClassName()  setStyle()  getStyle()  getWidth()  getHeight()  getDimensions()  cumulativeOffset()  show()  hide()  toggle()  select()  .... 
  33. 33. Prototype Element  .... e muitos mais...  http://prototypejs.org/api/element Como usar: Element.getWidth(elm); elm.getWidth(); Element.select(myULElm, 'li'); myULElm.select('li');
  34. 34. Prototype Event  observe()  element()  findElement()  isLeftClick()  pointerX()  pointerY()  stop()  stopObserving() 
  35. 35. Prototype Event  http://prototypejs.org/api/event Como usar: Event.observe(elm, 'click', function(e){ alert('elm clicked'); }); elm.observe('click', function(e){ alert('elm clicked'); }); function myClickFuction(e) { alert('elemento clicked => '+Event.element(e)); alert('Elemento está no UL '+Event.findElement(e, 'UL')); alert('click xy => '+Event.pointerX(e)+'|'+Event.pointerY(e)); Event.stop(e); } elm.observe('click', myClickFunction);
  36. 36. Prototype Ajax  Request()  Updater()  PeriodicalUpdater()  Responders  Response 
  37. 37. Prototype Ajax  http://prototypejs.org/api/ajax Como usar: function onSuccessCallBack(obj) { var req = obj.responseText; // var req = obj.responseXML; // var req = obj.responseText.evalJSON(); } var options = { method:'post', postBody: 'foo=bar', onSuccess: onSuccessCallBack, onFailure: function(err) { throw 'Error: FAIL... '+err; } } new Ajax.Request('/myurl.php', options);
  38. 38. Prototype ... and... Number  Array Object   Date Prototype   Enumerable String   Form Template   Function TimedObserver   Hash document   Insertion document.viewport  
  39. 39. Prototype bind()  bindAsEventListener()  WTF?!
  40. 40. Prototype Criar uma class – (sem o Class.create()) var myClass = function() { this.init(); var myClass = { }; init: function(name) { myClass.prototype = { this.foo(); }, init: function() { foo: function(arg) { this.foo(); alert('Hello!'); }, } foo: function() { }; alert('Hello!'); } myClass.init(); /* Hello! */ }; new myClass(); /* Hello! */
  41. 41. Prototype bind() var myClass = function() { var myClass = function(name) { this.init(); this.init(name); }; }; myClass.prototype = { myClass.prototype = { init: function() { init: function(name) { setTimeout(function(){ setTimeout(function(bar){ this.foo(); this.foo(bar); }.bind(this), 1000); }.bind(this, name), 1000); }, }, foo: function() { foo: function(arg) { alert('Hello!'); alert('Hello '+arg); } } }; }; new myClass(); /* Hello! */ new myClass('Gamboa'); /* Hello Gamboa*/
  42. 42. Prototype bindAsEventListener() var myClass = function(elm) { this.init(elm); }; myClass.prototype = { init: function(elm) { this.name = 'claudio'; Event.observe(elm, 'click', this.foo.bindAsEventListener(this)); //Event.observe(elm, 'click', this.foo.bindAsEventListener(this, 'gamboa')); }, foo: function(e) { alert('Hello '+this.name); // alert('Hello '+this.name+' '+arguments[1]); } }; <a id=”mylink” href=”http://www.sapo.pt/”>sapo.pt</a> new myClass(document.getElementById('mylink')); clica-se e............ /* Hello claudio / ou /* Hello claudio gamboa */
  43. 43. Chega de Prototype
  44. 44. Vamos falar de jQuery?
  45. 45. Ou da LibSAPO.js
  46. 46. LibSAPO.js As variáveis e o código... var SAPO SAPO.namespace(); SAPO.Browser //{version:'', isGecko:'', isIE:'', ...} Apenas... SAPO
  47. 47. LibSAPO.js Ex: SAPO.Utility.String  <script type=”text/javascript” src=”http://js.sapo.pt/SAPO/”></script> SAPO.namespace('Utility'); SAPO.Utility.String = { trim: function(str) { if (str && typeof(str) == 'string') { return str.replace(/^s+|s+$|n+$/g, ''); } } }; var strTrim = SAPO.Utility.String.trim(' Sane eiusdem concilii patres '); alert('|'+strTrim+'|'); /* |Sane eiusdem concilii patres| */
  48. 48. LibSAPO.js Ex: SAPO.Widget.LameWidget  SAPO.namespace('Widget'); var SAPO.Widget.LameWidget = function(options) { this.init(options); }; SAPO.Widget.LameWidget.prototype = { init: function(options) { var options = Object.extend({ name: false }, arguments[0] || {}); this.options = options; this.foo(); }, foo: function() { alert(this.options.name); } }; new SAPO.Widget.LameWidget({name:'gamboa'}); /* gamboa */
  49. 49. LibSAPO.js Exemplos ...
  50. 50. LibSAPO.js Úteis e práticos para trabalhar como um homem :)
  51. 51. LibSAPO.js SAPO.Utility.*  Array/ (inArray, keyValue)  Cookie/ * (get, set, remove)  Crypto/ * (md5, sha1, sha256)  CSS/ (set)  Dumper/ * (printDump, alertDump, returnDumpt, windowDump)  Pagination/ * ( new SAPO.Utility.Pagination(options); )  String/ * (ucFirst, trim, stripTags, htmlEntities(En|De)code, utf8(En|De)code,  shortString, removeAccentedChars) Templating/ ( new SAPO.Utility.Templating()).gen )  Url/ * (getUrl, getQueryString, getAnchor, getAnchorString, parseUrl,  currentScriptElement, base64(En|De)code) Validator/ * (mail, url, isPortuguesePhone, isAOPhone, isMZPhone, isCVPhone)  Variable/ (isArray, isObject, isBoolean, isNumber, isString, isNull) 
  52. 52. LibSAPO.js /SAPO/Component/ (brevemente)  Contextmenu  Dialog *  Passwordmeter *  Rating  Tooltip 
  53. 53. LibSAPO.js /SAPO/Communication/  Syndication/ *  var myIns = new SAPO.Communication.Syndication() myIns.push() myIns.run() myIns.remove()
  54. 54. LibSAPO.js /SAPO/Widget/  Blogthis  Comments  ImageSlide  Maps  Marquee  Meteo  Search  ShareThis  SimpleSlide *  Spot  Tags *  Thumbs 
  55. 55. Perguntas ?
  56. 56. Fim Cláudio Gamboa gamboa@co.sapo.pt http://js.sapo.pt/ - Docs http://libsapojs.blogs.sapo.pt - Blog da LibSAPO.js http://prototypejs.org/ - Prototype http://script.aculo.us/ - Script.aculo.us http://jquery.com/ - jQuery http://developers.yahoo.com/yui/ - YUI http://blog.pdvel.com/ (shitty stuff) http://dev.pdvel.com/ /(social)?/ - suskind
  1. A particular slide catching your eye?

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

×