Prototype Framework

Julie Iskander, Lecturer at ITIMSc. Communication and Electronics

Lectu

re O

utlin

es

Object Oriented JavaScript Revision

Prototype js

Extending the DOM

Elements dimensions

Event Model

Classes and inheritance

JSON

Ajax

OO JavaScript

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

First T

heory, then Practice.

Prototype

then

Script.a

culo.us

Prototype JS

Prototype

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:

[1,3,4,7,89,6,3,4,5].each(function(elem)

{

if(elem>10)

return;

alert(elem);

});

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

});

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

Extending DOM

Prototype’s DOM extension

Modifying properties of elementsVisibility

.hide() .show() .visible() returns true/false .toggle()

Prototype’s DOM extension

Modifying properties of elementsStyle 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’)

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

Templates

Templates

The Template 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 = new Template('<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>" }); });}

Form Management

Prototype Form Methods

disable() Disables the form as whole. Form controls will be visible but uneditable.

enable() Enables a fully or partially disabled form.

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.

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.

Element Dimensions

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

Event Model

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

}

Classes and Inheritance

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

}});

JSON

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

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