Mais conteúdo relacionado Mais de SAPO Sessions (12) Prototype e LibSAPO.js7. LibSAPO.js
LibSAPO.js
Estrutura
Prototype
Alguns exemplos da API
LibSAPO.js
Código e estrutura do código
Exemplos
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)
23. LibSAPO.js
e
Prototype
Script.aculo.us
e jQuery...
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 */
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 */
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
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