Prototype Framework
Download as PPTX, PDF•0 likes•1,385 views
This document outlines topics covered in a lecture on object oriented JavaScript using the Prototype framework, including: - Revision of object oriented JavaScript concepts like objects, prototypes, and classes - Prototype framework utilities like $, $$ and Enumerable - Extending DOM elements using Prototype methods - Templates, form management, and getting element dimensions - Event handling and classes/inheritance in Prototype - JSON encoding/parsing - Ajax utilities like Ajax.Request and Ajax.Updater
![each
elem.each(Visitor object)
Implements visitor on each element
Example:
[1,3,4,7,89,6,3,4,5].each(function(elem)
{
alert(elem);
});](https://image.slidesharecdn.com/prototype-130424095133-phpapp01/85/Prototype-Framework-12-320.jpg)
![each
Implement continue using return
Example:
[1,3,4,7,89,6,3,4,5].each(function(elem)
{
if(elem>10)
return;
alert(elem);
});](https://image.slidesharecdn.com/prototype-130424095133-phpapp01/85/Prototype-Framework-13-320.jpg)
![each
Implement break by throw $break
Example:
[1,3,4,7,89,6,3,4,5].each(function(elem)
{
if(elem>10)
return;
if(elem==4)
throw $break;
alert(elem);
});](https://image.slidesharecdn.com/prototype-130424095133-phpapp01/85/Prototype-Framework-14-320.jpg)
![detect
Takes function that returns true/false
Returns first element that returns true
If no match returns undefined
Examples:
[1,3,4,6,8,0,9].detect(function(elem)
{
return elem==0
}));
See also select, reject, partition](https://image.slidesharecdn.com/prototype-130424095133-phpapp01/85/Prototype-Framework-15-320.jpg)
![map
Applies function on each element, pushes the
return into an array that is eventually returned
Example:
[2, 5, 7, 9,50].map(function(item)
{
return item*item;
});](https://image.slidesharecdn.com/prototype-130424095133-phpapp01/85/Prototype-Framework-16-320.jpg)
![Example
var records = [record1, record2, record3, record4 ];
// Now apply template to produce desired formatted output
records.each( function(conv)
{
$$('p')[0].insert( {bottom: "<div>Formatted Output : " +
myTemplate.evaluate(conv)+"</div>" });
});
}](https://image.slidesharecdn.com/prototype-130424095133-phpapp01/85/Prototype-Framework-24-320.jpg)
![Class.create([superclass][, methods...])
superclass (class): superclass to inherit from.
method (object): an object (mix-in) that will be mixed-in to my
new class. Multiple mixins can be used, later mixins take
precedence.
returns a constructor function that can be called using new
operator. It will invoke the initialize method.
The object mixin must contain ‘initialize’ method to be called
when new is called.](https://image.slidesharecdn.com/prototype-130424095133-phpapp01/85/Prototype-Framework-38-320.jpg)
Prototype Framework
- 1. Julie Iskander, Lecturer at ITI MSc. Communication and Electronics
- 2. LectureOutlines Object Oriented JavaScript Revision Prototype js Extending the DOM Elements dimensions Event Model Classes and inheritance JSON Ajax
- 4. Remember Everything is an Object Every Object can have instance methods All objects have prototype Functions are first-class Objects JavaScript is multi-paradigm language Imperative style of C Object oriented style of Java Functional style of Lisp
- 6. Prototype JS
- 7. Prototype
- 8. Prototype It is about the abstract not the concrete Many toolkits is built over it like script.aculo.us
- 9. $ Function $() document.getElementById() $(‘menu’) returns element with id=menu $(element) if element is a node, it is returned back $(‘menu’,’menuitem1’,’menuitem2’) return an array of 3 nodes id=menu and menuitem1 and menuitem2 $ extends node returned with useful prototype node methods
- 10. $$ Function $$(), selects node using CSS selectors, support CSS3 selectors $$(‘li’) select all li elements $$(‘li.current’) select all li elements of class=current $$(‘#menu a’) select element all a elements inside of element with id=menu $$ extends nodes returned with useful prototype node methods
- 11. Enumerable Object A mixin that provides methods useful for collections Use in the following classes Array Hash DOM- related objects Instance Methods: all; any; collect; detect; each; eachSlice; entries; every; filter; find; find;All; grep; include; inGroupsOf; inject; inspect; invoke; map; max; member; min; partition; pluck; reject; select; size; some; sortBy; toArray; zip
- 12. each elem.each(Visitor object) Implements visitor on each element Example: [1,3,4,7,89,6,3,4,5].each(function(elem) { alert(elem); });
- 13. each Implement continue using return Example: [1,3,4,7,89,6,3,4,5].each(function(elem) { if(elem>10) return; alert(elem); });
- 14. each Implement break by throw $break Example: [1,3,4,7,89,6,3,4,5].each(function(elem) { if(elem>10) return; if(elem==4) throw $break; alert(elem); });
- 15. detect Takes function that returns true/false Returns first element that returns true If no match returns undefined Examples: [1,3,4,6,8,0,9].detect(function(elem) { return elem==0 })); See also select, reject, partition
- 16. map Applies function on each element, pushes the return into an array that is eventually returned Example: [2, 5, 7, 9,50].map(function(item) { return item*item; });
- 17. Extending DOM
- 18. Prototype’s DOM extension Modifying properties of elements Visibility .hide() .show() .visible() returns true/false .toggle()
- 19. Prototype’s DOM extension Modifying properties of elements Style and classes .addClassName(‘class name’) .removeClassName(‘class name’) .hasClassName(‘class name’) returns true/false .toggleClassName(‘class name’) .setStyle({ prop:val,prop:val,……… }) .getStyle(‘css property’)
- 20. Prototype’s DOM extension Modifying DOM .update(‘ ’) Change content of element .replace(‘ ’) Remove element and add a new one in its place .insert(‘ ’), insert({top:’ ’,bottom:’ ‘, after:’ ‘, before : ‘ ’ }) .remove()
- 21. Templates
- 22. Templates TheTemplate class uses a basic formatting syntax, similar to Ruby. The templates are created from strings that use symbols in the form (e.g., #{fieldName}) The symbols are replaced by actual values when the template is applied (evaluated) to an object.
- 23. Example var myTemplate = newTemplate('<p>The TV show #{title} was directed by #{author}.</p>'); // Create hashes with the required values for placeholders var record1 = {title: 'Metrix', author:'Arun Pandey'}; var record2 = {title: 'Junoon', author:'Manusha'}; var record3 = {title: 'Red Moon', author:'Paul, John'}; var record4 = {title: 'Henai', author:'Robert'};
- 24. Example var records = [record1, record2, record3, record4 ]; // Now apply template to produce desired formatted output records.each( function(conv) { $$('p')[0].insert( {bottom: "<div>Formatted Output : " + myTemplate.evaluate(conv)+"</div>" }); }); }
- 26. Form Management
- 27. Prototype Form Methods disable() Disables the form as whole. Form controls will be visible but uneditable. enable() Enables a fully or partially disabled form.
- 28. Prototype Form Methods findFirstElement() Finds first non-hidden, non-disabled form control. focusFirstElement() Gives keyboard focus to the first element of the form. getElements() Returns a collection of all form controls within a form.
- 29. Prototype Form Methods getInputs() Returns a collection of all INPUT elements in a form. Use optional type and name arguments to restrict the search on these attributes. request() A convenience method for serializing and submitting the form via an Ajax.Request to the URL of the form's action attribute.The options parameter is passed to the Ajax.Request instance, allowing to override the HTTP method and to specify additional parameters. reset() Resets a form to its default values.
- 31. Element Dimension Solve problem of inconsistent browser measurements .measure(‘ property‘ ) $(‘mydiv’).measure(‘width’) pixel values For better performance, when measuring more than one dimension .getLayout() Layout object $(‘mydiv’).getLayout().get(‘width’); http://prototypejs.org/learn/element-layout
- 32. Event Model
- 33. Events A single model for all browsers Event.observe(element,’event’,function{}()) Event.observe(window,’load’,function(){}) Element.observe $(‘ ’).observe(‘event’,function(){})
- 34. Events Can register events on elements or children of an element. The selection of children is done using CSS-selectors Element.on $(‘ ’).on(‘event’,function(){}) $(‘ ’).on(‘event’,’css selector for child’,function(){}) $(‘item’).on(‘click’,’li’, function(){ ……………… });
- 35. Event Object All event handlers are receive an event object function submitFun(evnt) { evnt.element() //returns element object that triggered event evnt.preventDefault() //stop default behaviour evnt.isLeftClick() or isRightClick() or isMiddleClick() evnt.pointerX() or pointerY() evnt.pointer() object{x: , y: } }
- 37. Class Manages Prototype’s class-based OOP system Class methods: create() Instance Methods: addMethods()
- 38. Class.create([superclass][, methods...]) superclass (class): superclass to inherit from. method (object): an object (mix-in) that will be mixed-in to my new class. Multiple mixins can be used, later mixins take precedence. returns a constructor function that can be called using new operator. It will invoke the initialize method. The object mixin must contain ‘initialize’ method to be called when new is called.
- 39. Class.create() var Person = Class.create({ initialize: function(name) { this.name = name; }, say: function(message) { return this.name + ': ' + message; } });
- 40. Example Create your own class that’s mixed with Enumerable
- 41. Var MyClass=Class.Create(Enumerable, { initialize:function(){………….}, _each: function(iterator){ for(var i=0;i<……) { iterator(….); } } });
- 42. JSON
- 43. Encoding Number#toJSON, String#toJSON,Array#toJSON, Hash#toJSON, Date#toJSON, and Object.toJSON. var data = {name: 'Violet', occupation: 'character', age: 25 }; Object.toJSON(data); //-> '{"name": "Violet", "occupation": "character", "age": 25}’ For custom objects, Set toJSON method which will be used by Object.toJSON. var Person = Class.create({ initialize: function(name) { this.name = name; }, toJSON: function() { return ('My name is ' + this.name + ' and I am ' + this.age + ' years old.').toJSON(); } }); var john = new Person('John', 49); Object.toJSON(john); //-> '"My name is John and I am 49 years old.”’
- 44. Parsing String#evalJSON var data = '{ "name": "Violet", "occupation": "character" }'.evalJSON(); data.name; //-> "Violet”
- 45. Ajax
- 46. Ajax A wrapper class around the XMLHttpRequest Uses callbacks to handle different phases of the asynchronous request. If requested page is a JavaScript code then it is automatically evaluated and executed.
- 47. Ajax.Request new Ajax.Request(URL, Option) URL : string representing the url to request Options hash method parameters contentType onSuccess onFailure For complete details: http://api.prototypejs.org/ajax/
- 48. Ajax.Updater Updates a portion of the DOM with external source new Ajax.Updater(ID , URL , Options) ID: the id of the element to be updated URL: url to fetch Options: hash same as previous insertion: Insertion.Top Insertion.Bottom Insertion.After Insertion.Before
- 49. Ajax.PeriodicalUpdater Runs Updater in periodical Intervals to repeatedly fetch content from the server. new Ajax.PeriodicalUpdater(ID, URL, Options) Same except Options frequency : interval in seconds decay : factor to multiply frequency by everytime the fetched response is the same as the previously fetched. stop() start()
- 50. References http://prototypejs.org/ Practical Prototype and script.aculo.us, Andrew Dupont , 2008