Prototype Framework

Julie Iskander, Lecturer at ITI
MSc. Communication and Electronics

LectureOutlines
 Object Oriented JavaScript Revision
 Prototype js
 Extending the DOM
 Elements dimensions
 Event Model
 Classes and inheritance
 JSON
 Ajax

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

Prototype
 It is about the abstract not the concrete
 Many toolkits is built over it like script.aculo.us

$ 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

$$ 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

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

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);
});

each
 Implement continue using return
 Example:
{
if(elem>10)
return;
alert(elem);
});

each
 Implement break by throw $break
 Example:
{
if(elem>10)
return;
if(elem==4)
throw $break;
alert(elem);
});

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

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;
});

Prototype’s DOM extension
Modifying properties of elements
Visibility
 .hide()
 .show()
 .visible()  returns true/false
 .toggle()

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’)

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()

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.

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'};

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>" });
});
}

Prototype Form Methods
 disable() Disables the form as whole. Form controls will
be visible but uneditable.
 enable() Enables a fully or partially disabled form.

 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.

 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.

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

Events
 A single model for all browsers
 Event.observe(element,’event’,function{}())
 Event.observe(window,’load’,function(){})
Element.observe
 $(‘ ’).observe(‘event’,function(){})

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(){
………………
});

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: }
}

Class
 Manages Prototype’s class-based OOP system
 Class methods:
 create()
 Instance Methods:
 addMethods()

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.

Class.create()
var Person = Class.create({
initialize: function(name) { this.name = name; },
say: function(message) {
return this.name + ': ' + message;
}
});

Example
 Create your own class that’s mixed with
Enumerable

Var MyClass=Class.Create(Enumerable, {
initialize:function(){………….},
_each: function(iterator){
for(var i=0;i<……)
{
iterator(….);
}
}
});

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.”’

Parsing
 String#evalJSON
 var data = '{ "name": "Violet", "occupation": "character"
}'.evalJSON();
 data.name; //-> "Violet”

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.

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/

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

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()

References
 http://prototypejs.org/
 Practical Prototype and script.aculo.us, Andrew
Dupont , 2008

Prototype Framework

Recommended

More Related Content

What's hot (20)

Similar to Prototype Framework (20)

More from Julie Iskander (20)

Recently uploaded (20)

Prototype Framework