Introdução a frameworks. Tornar a vida mais fácil com Prototype e torná-la ainda mais fácil com a LibSAPO.js.

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