prototype prototype

22
Prototype Prototype Sang Shin Sang Shin Java Technology Architect & Evangelist Java Technology Architect & Evangelist Sun Microsystems, Inc. Sun Microsystems, Inc. [email protected] [email protected] www.javapassion.com www.javapassion.com

Upload: sampetruda

Post on 07-Dec-2014

1.197 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Prototype Prototype

PrototypePrototype

Sang ShinSang ShinJava Technology Architect & EvangelistJava Technology Architect & EvangelistSun Microsystems, Inc.Sun Microsystems, [email protected]@sun.comwww.javapassion.comwww.javapassion.com

Page 2: Prototype Prototype

2Source: www.sergiopereira.com/articles/prototype.js.html

Disclaimer & Acknowledgments

• Even though Sang Shin is a full-time employee of Sun Microsystems, the contents here are created as his own personal endeavor and thus does not necessarily reflect any official stance of Sun Microsystems on any particular technology• Many slides are created from the contents posted in

website by Sergio Pereira with author's permission > www.sergiopereira.com/articles/prototype.js.html

Page 3: Prototype Prototype

3Source: www.sergiopereira.com/articles/prototype.js.html

Agenda

• What is Prototype?• Utility functions• Form and Element classes• Ajax.Request

Page 4: Prototype Prototype

What is Prototype?What is Prototype?

Page 5: Prototype Prototype

5Source: www.sergiopereira.com/articles/prototype.js.html

What is Prototype?• JavaScript library written by Sam Stephenson> prototype.js> http://prototype.conio.net

• Supports utility JavaScript functions including AJAX utility function - Ajax.Request > $() - same as document.getElementById('someid');> $F() - working with Forms> $R()

Page 6: Prototype Prototype

Utility FunctionsUtility Functions

Page 7: Prototype Prototype

7Source: www.sergiopereira.com/articles/prototype.js.html

$() function• Same as document.getElementById()

var d = $('myDiv');

• You can pass more than one id and $() will return an array object with all the requested elements> Useful when you modify multiple elements

// Get elements into an array via $()var divs = $('myDiv','myOtherDiv'); // Display child node of the each item in the arrayfor(i=0; i<divs.length; i++){

alert(divs[i].innerHTML);}

Page 8: Prototype Prototype

8Source: www.sergiopereira.com/articles/prototype.js.html

$F() function• Used to get a value of an element (input form field

element) var username = $F('userName')...<input type="text" id="userName" value="Joe Doe"><br>

• It works with on any input field> text> checkbox> button

Page 9: Prototype Prototype

9Source: www.sergiopereira.com/articles/prototype.js.html

$A() function• Converts the single argument it receives into an

Array object<script>

function showOptions(){var someNodeList = $('lstEmployees').getElementsByTagName('option');var nodes = $A(someNodeList);

nodes.each(function(node){alert(node.nodeName + ': ' + node.innerHTML);

});}

</script>

<select id="lstEmployees" size="10" ><option value="5">Buchanan, Steven</option><option value="8">Callahan, Laura</option></select>

<input type="button" value="Show the options" onclick="showOptions();" >

Page 10: Prototype Prototype

10Source: www.sergiopereira.com/articles/prototype.js.html

$H() function• Converts objects into enumerable Hash objects<script>

function testHash(){

//let's create the objectvar a = {

first: 10,second: 20,third: 30

};

//now transform it into a hashvar h = $H(a);alert(h.toQueryString()); //displays: first=10&second=20&third=30

}

</script>

Page 11: Prototype Prototype

11Source: www.sergiopereira.com/articles/prototype.js.html

$R() function• A short hand to writing new ObjectRange

(lowerBound, upperBound, excludeBounds)<script>

function demoDollar_R(){var range = $R(10, 20, false);range.each(function(value, index){

alert(value);});

}

</script>

<input type="button" value="Sample Count" onclick="demoDollar_R();" >

Page 12: Prototype Prototype

Form and ElementForm and ElementClassesClasses

Page 13: Prototype Prototype

13Source: www.sergiopereira.com/articles/prototype.js.html

Form Class • getElements(form)> Return all elements of the form as an array

• getInputs(form, typeName, name)> Returns all the input elements from a form filtering out results

by element type or element name• disable(form)> Gets every element of the form, fires the blur event, and sets

the disabled attribute to true for every element• enable(form)> Gets every element of the form, fires the blur event, and sets

the disabled attribute to false for every element

Page 14: Prototype Prototype

14Source: www.sergiopereira.com/articles/prototype.js.html

Form Class • focusFirstElement(form)> Places the focus on the first non-hidden, non-disabled form

field• reset(form)> Calls reset on the form element

• serialize(form)> Formats a string for posting the form to the server via AJAX in

the form of elementname1=value1&elementname2=value2

Page 15: Prototype Prototype

15Source: www.sergiopereira.com/articles/prototype.js.html

Element Class - CSS Style• addClassName(element, className)> Adds the given class name to the element's class names

• classNames(element)> Returns an Element.ClassNames object representing the

CSS class names associated with the given element• setStyle(element, cssPropertyHash)> Sets the value of the CSS properties in the given element,

according to the values in the cssPropertyHash argument.• getStyle(element, cssProperty)> Returns the value of the CSS property in the given element or

null if not present.

Page 16: Prototype Prototype

16Source: www.sergiopereira.com/articles/prototype.js.html

Element Class - Visibility • hide(elem1 [, elem2 [, elem3 [...]]])> Hides each element by setting its style.display to 'none'

• show(elem1 [, elem2 [, elem3 [...]]])> Shows each element by resetting its style.display to ' '

• toggle(elem1 [, elem2 [, elem3 [...]]])> Toggles the visibility of each passed element.

• scrollTo(element)> Scrolls the window to the element position

Page 17: Prototype Prototype

17Source: www.sergiopereira.com/articles/prototype.js.html

Element Class • remove(element)> Removes the element from the document

• update(element, html)> Replaces the inner html of the element with the given html

argument

Page 18: Prototype Prototype

Ajax.Request()Ajax.Request()

Page 19: Prototype Prototype

19Source: www.sergiopereira.com/articles/prototype.js.html

Ajax.Request• Handles XMLHttpRequest handling // Use Prototype's Ajax.Request for remoting var url = 'http://localhost:8084/ajax-validation-prototype/validate'; var pars = "action=create&"+ "id=" + escape(target.value); var myAjax = new Ajax.Request( url, // AJAX options { method: 'get', // HTTP method parameters: pars, // Parameters onComplete: processRequest // Callback function } );

Page 20: Prototype Prototype

20Source: www.sergiopereira.com/articles/prototype.js.html

AJAX Options in Ajax.Request call • method: 'post'> Method of the HTTP request, default is 'post'

• parameters> The url-formatted list of values passed to the request

• postBody> Content passed to in the request's body in case of a HTTP

POST• on<event>: Function(XMLHttpRequest, Object)> Custom function to be called when the respective event/status

is reached during the AJAX call.

Page 21: Prototype Prototype

21Source: www.sergiopereira.com/articles/prototype.js.html

AJAX Options in Ajax.Request call • onException: Function(Ajax.Request, exception) > Custom function to be called when an exceptional condition

happens on the client side of the AJAX call, like an invalid response or invalid arguments

Page 22: Prototype Prototype

PrototypePrototype

Sang ShinSang ShinJava Technology Architect & EvangelistJava Technology Architect & EvangelistSun Microsystems, Inc.Sun Microsystems, [email protected]@sun.comwww.javapassion.comwww.javapassion.com