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.

SAPO Sessions #2 - LibSAPO.js

768 views

Published on

SAPO Sessions #2

Javascript - LiBSAPO.js, Prototype

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SAPO Sessions #2 - 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

×