8. Prototype: Focus
• DOM manipulation
• Ajax transport
• Utility methods for built-in objects
• Class-based OOP
9. Prototype: DOM manipulation
Say goodbye to getElementById()
document.getElementById(quot;idquot;).innerHTML = quot;<li>node</li>quot;;
Say hello to $()
$(quot;idquot;).innerHTML = quot;<li>node</li>quot;;
$(element) extended DOM element
11. Prototype: Creating a DOM element
The old way:
var a = document.createElement('a');
a.setAttribute('class', 'foo');
a.setAttribute('href', '/foo.html');
a.appendChild(document.createTextNode(quot;Next pagequot;));
The new way:
var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update(quot;Next pagequot;);
14. Prototype: Ajax transport
new Ajax.Request('/some_url',{
method:'get',
onSuccess: function(transport){
var response = transport.responseText || quot;no response textquot;;
alert(quot;Success! nnquot; + response);
},
onFailure: function(){ alert('Something went wrong...') }
});
Also available are onXXX callbacks, where XXX is the HTTP response status
like 200 or 404.
15. Prototype: Ajax transport
new Ajax.Request('/some_url', {
method: 'get',
parameters: {company: 'example', limit: 12}
});
new Ajax.Request('/some_url', {
parameters: $('id_of_form_element').serialize(true)
});
form serialization
21. Prototype: Conclusion
• lightweight
• good for small projects
• a lot of useful methods
• transport support
• effects with script.aculo.us
• good documented
• a lot of real project which use prototype
27. jQuery: DOM manipulation
Even more powerful than you expect.
$('li:eq(0)')
$('li:even')
$('li:lt(3)')
$('li:not(.goofy)')
$('p a[href*=#]')
$('code, li.goofy')
$('ol .goofy > strong')
$('li + li > a[href$=pdf]')
$('span:hidden')
28. jQuery: DOM manipulation
Attributes: Text:
attr( name ) text( )
attr( properties ) text( val )
attr( key, value )
HTML:
attr( key, value )
removeAttr( name )
html( )
Classes: html( val )
addClass( class )
Value:
hasClass( class )
removeClass( class ) val( )
toggleClass( class ) val( val )
38. jQuery: Conclusion
• lightweight
• powerful CSS selectors
• ‘less code’ way
• built-in effects and animation
• transport support (including cross-domain)
• a lot of real-life examples
42. Dojo: Focus
• DOM manipulation
• Animations
• Ajax
• Event and keyboard normalization
• Internationalization (i18n)
• Widgets
43. Dojo: Package system
Dojo has a package system built-in to load all the code you need,
and is controlled by dojo.require().
This function allows us to pull in parts of the Dojo Toolkit not provided for
in the Base dojo.js, such as Drag and Drop, additional animations, Dijit widgets,
DojoX projects, or even your own code.
dojo.require(quot;dijit.form.Buttonquot;);
dojo.require(quot;dijit.TitlePanequot;);
44. Dojo: Selectors
dojo.addOnLoad(function(){
// our dom is ready, get the node:
dojo.query(quot;#testHeadingquot;)
// add quot;testClassquot; to its class=quot;quot; attribute
.addClass(quot;testClassquot;)
// and fade it out after 500 ms
.fadeOut({ delay:500 }).play();
});
45. Dojo: Event handling
dojo.addOnLoad(function(){
var node = dojo.byId(quot;testHeadingquot;);
dojo.connect(node,quot;onclickquot;,function(){
node.innerHTML = quot;I've been clickedquot;;
});
});
dojo.addOnLoad(function(){
dojo.query(quot;#testHeadingquot;)
.style(quot;cursorquot;,quot;pointerquot;)
.connect(quot;onclickquot;,function(){
this.innerHTML = quot;I've been clickedquot;;
});
});
46. Dojo: Ajax transport
var init = function(){
var contentNode = dojo.byId(quot;contentquot;);
dojo.xhrGet({
url: quot;js/sample.txtquot;,
handleAs: quot;textquot;,
load: function(data,args){
// fade out the node we're modifying
dojo.fadeOut({
node: contentNode,
onEnd: function(){
// set the data, fade it back in
contentNode.innerHTML = data;
dojo.fadeIn({node: contentNode}).play();
}
}).play();
},
// if any error occurs, it goes here:
error: function(error,args){
console.warn(quot;error!quot;,error);
}
});
};
dojo.addOnLoad(init);
47. Dojo: Ajax transport
// sumbit the form
var formSubmit = function(e){
// prevent the form from actually submitting
e.preventDefault();
// submit the form in the background
dojo.xhrPost({
url: quot;alternate-submit.phpquot;,
form: quot;mainFormquot;,
handleAs: quot;textquot;,
handle: function(data,args){
if(typeof data == quot;errorquot;){
console.warn(quot;error!quot;,args);
}else{
// show our response
console.log(data);
}
}
});
};
dojo.addOnLoad(function(){
var theForm = dojo.byId(quot;mainFormquot;);
// another dojo.connect syntax: call a function directly
dojo.connect(theForm,quot;onsubmitquot;,formSubmit);
});
49. Dojo: Dijit at a Glance
Border Container AccordionContainer
ContentPane Toolbar
Slider ComboBox CurrencyTextBox NumberTextBox
CheckBox DateTextBox
Textarea ValidationTextBox
FilteringSelect InlineEditBox
TimeTextBox TabContainer
NumberSpinner StackContainer
Menu
Dialog
Tree ProgressBar Editor Grid
50. Dojo: DojoX - Dojo eXtensions
Cometd Cryptography
Widgets
Charting
FX
Data Layout
Collections
Wire
Grid
I/O
Image Timing
XML Utilities Offline GFX
String Utilities
Validate
UUID
51. Dojo: Dojo custom build
1. groups together modules into layers
2. interns external non-JavaScript files
3. smooshes the layer down with ShrinkSafe
4. copies all non-layered scripts to the appropriate places
52. Dojo: Conclusion
• not so lightweight as previous
• tons of features
• separate packages
• custom build
59. qooxdoo: Special Types of Classes
qx.Class.define(quot;qx.test.Catquot;, {
type : quot;staticquot;
...
});
qx.Class.define(quot;qx.test.Catquot;, {
type : quot;abstractquot;
...
});
qx.Class.define(quot;qx.test.Catquot;, {
type : quot;singletonquot;
...
});
60. qooxdoo: Inheritance
qx.Class.define(quot;qx.test.Animalquot;, {
members: {
makeSound : function(howManyTimes) {
....
}
}
});
qx.Class.define(quot;qx.test.Catquot;, {
extend: qx.test.Animal,
members: {
makeSound : function() {
this.debug(quot;I'm a catquot;);
/* howManyTimes or any other parameter are passed. We
don't need to know how many parameters are used. */
arguments.callee.base.apply(this, arguments);
}
}
});
67. qooxdoo: GUI and even more features
• Layouting
• Widgets
• Interaction
• Selection Handling
• Drag & Drop
• Theming
• Low-level Ajax Transport
• RPC
• Logging and Debugging
• Unit testing