Prototype Js

Prototype JS in Ruby On RailsKıvanç Kantürk

Outline

•What is Prototype JS ?•Why Prototype JS ?•Speed Comparison Between Frameworks•Some Problems of JS Frameworks and

Prototype•Some General Methods•Ruby and Prototype JS

What is Prototype JS

•Prototype is a JavaScript framework.•The reason is to ease dynamic web

application development.•Mainly extends DOM and JavaScript

objects.•Written by Sam Stephenson and friends

Why Prototype JS

•It is included in the Rails package. •It is better and faster in Chrome, however

not for the others.•Easy to implement (It depends on

familiarity).•Provides Ajax dynamic pages.•Prototype adds better OOP support better

OOP support

Speed Comparison Between Frameworks

Problems

•Cross browser issues•Chance of name collisions•Performance overheads

General Methods

• Main methods– Class.create• Creates a constructor that calls “initialize”• You can define everything in prototype

instead of half (fields) in constructor an half (methods) in prototype

var MyClass= Class.create({ initialize: function(args){functionA(){..}, functionB(){..} });

General Methods Cont’d

– Object.extend • Adds new capabilities to existing class• Lets you define object hierarchies (almost real

inheritance)• Object.extend called automatically if first

arg of Class.create is a class nameAdd properties to a single object• var obj1 = {a: 1, b: 2};• var obj2 = {c: 3, d: 4};• Object.extend(obj1, obj2); // obj1 has a, b, c, d

General Methods Cont’d

•Prototype uses $() for id based selection.•The $() function is a shortcut to the most

frequent document.getElementById() function of the DOM.

•$()can pass more than one id and it will return an Array object with all the requested elements.var divs = $

('myDiv','myOtherDiv');for(i=0; i<divs.length; i++){ alert(divs[i].innerHTML);}

General Methods Cont’d

•Try.these() provides different function calls until one of them works. It takes some functions as arguments and calls them in an order.

function getType(Worker){ return Try.these ( function() {return Worker.Id;}, function() {return Worker.Salary;) );}

General Methods Cont’d

Ajax.Request class assists AJAX functionality.

Assume that we have an suitable XML response.

<script> function f(){ var url = ‘ http:// localhost/20000/factory’ var params = ‘workerId=’ + workerId + ‘&salary=’ + s; var MyAjax = new Ajax.Request(url,{ method: ‘get’, parameters: params, onC omplete: displayResult});}

function displayResult(responseData){ if (responseData){ $(‘result’).value = responseData.responseText;} else{               $('result').value = "Sunucuda bir hata oluştu";}}</script>

Ruby and Prototype JS

Ruby and Prototype JS Cont’d

•<%= javascript_include_tag 'prototype'  %>

•That must be added by user in the needed .erb document

Referances• http://courses.coreservlets.com/Course-Materials/pdf/ajax/Prototype-3.pdf• http://sergiopereira.com/articles/DeveloperNotes-Prototype-JS.pdf• http://www.slideshare.net/remy.sharp/prototype-jquery-going-from-one-to-the-other• http://api.prototypejs.org/• http://www.prototypejs.org/learn/extensions• http://stackoverflow.com/questions/1026080/no-route-matches-javascripts-prototype-js-explicitly-d

efine-one• http://articles.sitepoint.com/article/painless-javascript-prototype• http://alternateidea.com/blog/articles/2005/12/07/prototype-meets-ruby-a-look-at-enumerable-

array-and-hash• http://en.wikipedia.org/wiki/Prototype_JavaScript_Framework• http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks• http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-

comparison