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

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

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