Prototype e LibSAPO.js

  • 740 views
Uploaded on

Introdução a frameworks. …

Introdução a frameworks.

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
740
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
12
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. LibSAPO.js SAPO Sessions #2 http://js.sapo.pt/ 18 de Março de 2009 Cláudio Gamboa <gamboa@co.sapo.pt>
  • 2. LibSAPO.js Ao contrário de outras pessoas
  • 3. LibSAPO.js ...
  • 4. LibSAPO.js Eu venho pregar
  • 5. LibSAPO.js METAL HELL YEAAHHH Eu venho pregar
  • 6. LibSAPO.js E venho vender o meu peixe
  • 7. LibSAPO.js LibSAPO.js  Estrutura  Prototype  Alguns exemplos da API  LibSAPO.js  Código e estrutura do código  Exemplos 
  • 8. LibSAPO.js Estrutura
  • 9. LibSAPO.js (estrutura) LibSAPO.js - http://js.sapo.pt/  SAPO/  Utility/  Communication/  Components/ *  Widget/  Assets/  Snippets/  Bundles/ 
  • 10. LibSAPO.js (estrutura) LibSAPO.js - http://js.sapo.pt/  Prototype/  JQuery/  YUI/ 
  • 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. LibSAPO.js (estrutura) /SAPO/Communication/  Syndication/  var myIns = new SAPO.Communication.Syndication() myIns.push() myIns.run() myIns.remove()
  • 13. LibSAPO.js (estrutura) /SAPO/Component/ (brevemente)  Contextmenu  Dialog  Passwordmeter  Rating  Tooltip 
  • 14. LibSAPO.js (estrutura) /SAPO/Widget/  Blogthis  Comments  ImageSlide  Maps  Marquee  Meteo  Search  ShareThis  SimpleSlide  Spot  Tags  Thumbs 
  • 15. LibSAPO.js (estrutura) /Prototype/  Dragdrop/  Effects/  Slider/  Controls/  Builder/ 
  • 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. 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. 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. LibSAPO.js JSLint (http://www.jslint.com/) JSMin (http://www.crockford.com/javascript/jsmin.html) m/ ”ROCKAM” m/ 435Kb > 347Kb > 72Kb (gzipped)
  • 20. LibSAPO.js SOLD
  • 21. LibSAPO.js e Prototype
  • 22. LibSAPO.js e Prototype Script.aculo.us
  • 23. LibSAPO.js e Prototype Script.aculo.us e jQuery...
  • 24. LibSAPO.js Todas RULAM...
  • 25. LibSAPO.js ...mas...
  • 26. Prototype ...mas... falemos de Prototype
  • 27. Prototype $()  em vez: var myElement = document.getElementById('elmId'); var myElement = $('elmId'); ou var myElement = $(myElement);
  • 28. Prototype $$()  em vez: var aDivs = document.getElementsByTagName('div'); var aDivs = $$('div'); ou var elm = $$('#myId'); ou var aElms = $$('div.divClassName');
  • 29. Prototype ... e mais...  $A(), $F(), $H(), $R(), $w(), Try.these() http://prototypejs.org/api/utility
  • 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. 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. Prototype Element  addClassName()  removeClassName()  setStyle()  getStyle()  getWidth()  getHeight()  getDimensions()  cumulativeOffset()  show()  hide()  toggle()  select()  .... 
  • 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. Prototype Event  observe()  element()  findElement()  isLeftClick()  pointerX()  pointerY()  stop()  stopObserving() 
  • 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. Prototype Ajax  Request()  Updater()  PeriodicalUpdater()  Responders  Response 
  • 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. Prototype ... and... Number  Array Object   Date Prototype   Enumerable String   Form Template   Function TimedObserver   Hash document   Insertion document.viewport  
  • 39. Prototype bind()  bindAsEventListener()  WTF?!
  • 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. 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. 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. Chega de Prototype
  • 44. Vamos falar de jQuery?
  • 45. Ou da LibSAPO.js
  • 46. LibSAPO.js As variáveis e o código... var SAPO SAPO.namespace(); SAPO.Browser //{version:'', isGecko:'', isIE:'', ...} Apenas... SAPO
  • 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. 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. LibSAPO.js Exemplos ...
  • 50. LibSAPO.js Úteis e práticos para trabalhar como um homem :)
  • 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. LibSAPO.js /SAPO/Component/ (brevemente)  Contextmenu  Dialog *  Passwordmeter *  Rating  Tooltip 
  • 53. LibSAPO.js /SAPO/Communication/  Syndication/ *  var myIns = new SAPO.Communication.Syndication() myIns.push() myIns.run() myIns.remove()
  • 54. LibSAPO.js /SAPO/Widget/  Blogthis  Comments  ImageSlide  Maps  Marquee  Meteo  Search  ShareThis  SimpleSlide *  Spot  Tags *  Thumbs 
  • 55. Perguntas ?
  • 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