prototype e libsapo.js
DESCRIPTION
Introdução a frameworks. Tornar a vida mais fácil com Prototype e torná-la ainda mais fácil com a LibSAPO.js.TRANSCRIPT
LibSAPO.js
SAPO Sessions #2
http://js.sapo.pt/
18 de Março de 2009
Cláudio Gamboa<[email protected]>
LibSAPO.js
Ao contrário de outras pessoas
LibSAPO.js
...
LibSAPO.js
Eu venho pregar
LibSAPO.js
Eu venho pregar
METALMETALHELL YEAAHHHHELL YEAAHHH
LibSAPO.js
E venho vender o meu peixe
LibSAPO.js
LibSAPO.js Estrutura
Prototype Alguns exemplos da API
LibSAPO.js Código e estrutura do código Exemplos
LibSAPO.js
Estrutura
LibSAPO.js(estrutura)
LibSAPO.js - http://js.sapo.pt/ SAPO/
Utility/ Communication/ Components/ * Widget/
Assets/ Snippets/ Bundles/
LibSAPO.js(estrutura)
LibSAPO.js - http://js.sapo.pt/ Prototype/ JQuery/ YUI/
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)
LibSAPO.js(estrutura)
/SAPO/Communication/ Syndication/
var myIns = new SAPO.Communication.Syndication()myIns.push()myIns.run()myIns.remove()
LibSAPO.js(estrutura)
/SAPO/Component/ (brevemente)
Contextmenu Dialog Passwordmeter Rating Tooltip
LibSAPO.js(estrutura)
/SAPO/Widget/ Blogthis Comments ImageSlide Maps Marquee Meteo Search ShareThis SimpleSlide Spot Tags Thumbs
LibSAPO.js(estrutura)
/Prototype/ Dragdrop/ Effects/ Slider/ Controls/ Builder/
LibSAPO.js(estrutura)
/JQuery/ EffectsBlind/ EffectsBounce/ EffectsClip/ EffectsCore/ EffectsDrop/ EffectsExplode/ EffectsFold/ EffectsHighlight/ EffectsPulsate/ EffectsScale/ EffectsShake/ EffectsSlide/ EffectsTransfer/
UIAccordion/ UICore/ UIDatepicker/ UIDialog/ UIDraggable/ UIDroppable/ UIProgressbar/ UIResizable/ UISelectable/ UISlider/ UISortable/ UITabs/
LibSAPO.js(estrutura)
/YUI/ Animation/ Autocomplete/ Button/ Calendar/ Colorpicker/ Connection/ Container/ Datasource/ Datatable/ Dom/ DomEvent/ Dragdrop/
Editor/ Element/ Event/ Grids/ History/ Logger/ Menu/ Slider/ Tabview/ Treeview/ Utilities/
LibSAPO.js(estrutura)
/Bundles/ e /Snippets/ $> cat sapoNoticias2008.bundle - (http://js.sapo.pt/Bundes/sapoNoticias2008.js)$> cat sapoNoticias2008.bundle - (http://js.sapo.pt/Bundes/sapoNoticias2008.js)script_include("/SAPO/0.1/");script_include("http://imgs.sapo.pt/js/NOTICIAS2008/browser.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/page.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/main_solo.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/elements.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/pngfix.js", true);script_include("/SAPO/Utility/Url/0.1/");script_include("/SAPO/Utility/Crypto/0.1/");script_include("/SAPO/Communication/Syndication/0.1/");script_include("/Prototype/1.8/", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/utils.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/swfobject.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/vlw.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/yahoo/yahoo-dom-event.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/yahoo/utilities.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/yahoo/dragdrop-min.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/yahoo/container_core-min.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/carousel/carousel.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/sapocarrossel_solo.js", true);script_include("http://imgs.sapo.pt/js/NOTICIAS2008/comments.js", true);
LibSAPO.js
JSLint(http://www.jslint.com/)
JSMin(http://www.crockford.com/javascript/jsmin.html)
\m/ ”ROCKAM” \m/
435Kb > 347Kb > 72Kb (gzipped)
LibSAPO.js
SOLDSOLD
LibSAPO.js
e
Prototype
LibSAPO.js
e
PrototypeScript.aculo.us
LibSAPO.js
e
PrototypeScript.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 myElement = $(myElement);
Prototype
$$()
em vez:
var aDivs = document.getElementsByTagName('div');
var aDivs = $$('div');
ou
var elm = $$('#myId');
ou
var aElms = $$('div.divClassName');
Prototype
... e mais...
$A(), $F(), $H(), $R(), $w(), Try.these()
http://prototypejs.org/api/utility
Prototype
Class create()
var Animal = Class.create({
initialize: function(name, sound) {
this.name = name;
this.sound = sound;
},
speak: function() {
alert(this.name + " says: " + this.sound);
}
});
// subclassing Animal
var Snake = Class.create(Animal, {
initialize: function($super, name) {
$super(name, 'hissssssssss');
}
});
Prototype
Element
new Element('tagName', <attr options>);
ex:
var myA = new Element('a', { 'class': 'foo', href: '/foo.html' }).update("Next page");
myA.innerHTML /* Next page */
myA.href /* /foo.html */
myA.className /* foo */
Prototype Element
addClassName() removeClassName() setStyle() getStyle() getWidth() getHeight() getDimensions() cumulativeOffset() show() hide() toggle() select() ....
Prototype Element
.... e muitos mais... http://prototypejs.org/api/element
Como usar:
Element.getWidth(elm);
elm.getWidth();
Element.select(myULElm, 'li');
myULElm.select('li');
Prototype Event
observe() element() findElement() isLeftClick() pointerX() pointerY() stop() stopObserving()
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);
Prototype Ajax
Request() Updater() PeriodicalUpdater() Responders Response
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);
Prototype
... and... Array Date Enumerable Form Function Hash Insertion
Number Object Prototype String Template TimedObserver document document.viewport
Prototype bind() bindAsEventListener()
WTF?!
Prototype
var myClass = function() {
this.init();
};
myClass.prototype = {
init: function() {
this.foo();
},
foo: function() {
alert('Hello!');
}
};
new myClass(); /* Hello! */
var myClass = {
init: function(name) {
this.foo();
},
foo: function(arg) {
alert('Hello!');
}
};
myClass.init(); /* Hello! */
Criar uma class – (sem o Class.create())Criar uma class – (sem o Class.create())
Prototypebind()
var myClass = function() {
this.init();
};
myClass.prototype = {
init: function() {
setTimeout(function(){
this.foo();
}.bind(this), 1000);
},
foo: function() {
alert('Hello!');
}
};
new myClass(); /* Hello! */
var myClass = function(name) {
this.init(name);
};
myClass.prototype = {
init: function(name) {
setTimeout(function(bar){
this.foo(bar);
}.bind(this, name), 1000);
},
foo: function(arg) {
alert('Hello '+arg);
}
};
new myClass('Gamboa'); /* Hello Gamboa*/
PrototypebindAsEventListener()
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 */
Chega de Prototype
Vamos falar de jQuery?
Ou da
LibSAPO.jsLibSAPO.js
LibSAPO.js
As variáveis e o código...
var SAPOSAPO.namespace();
SAPO.Browser //{version:'', isGecko:'', isIE:'', ...}
Apenas...
SAPOSAPO
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| */
LibSAPO.js Ex: SAPO.Widget.LameWidgetSAPO.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 */
LibSAPO.js
Exemplos...
LibSAPO.js
Úteis e práticos
para trabalhar como um homem :)
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)
LibSAPO.js
/SAPO/Component/ (brevemente)
Contextmenu Dialog * Passwordmeter * Rating Tooltip
LibSAPO.js
/SAPO/Communication/ Syndication/ *
var myIns = new SAPO.Communication.Syndication()myIns.push()myIns.run()myIns.remove()
LibSAPO.js
/SAPO/Widget/ Blogthis Comments ImageSlide Maps Marquee Meteo Search ShareThis SimpleSlide * Spot Tags * Thumbs
Perguntas
?
Fim
Cláudio GamboaCláudio Gamboa
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