Prototype Venkat Subramaniam svenkatcs uh edu 1 Prototype

Prototype Venkat Subramaniam – svenkat@cs. uh. edu 1

Prototype • This is what happens when a smart Ruby programmer plays with Java. Script – Created by Sam Stephenson – http: //prototype. conio. net • Makes Java. Script some what Ruby like – Additional convenience methods, etc. • Makes DOM much simpler to navigate • Manages browser differences Venkat Subramaniam – svenkat@cs. uh. edu 2

Extend • We discussed about inheritance in Java. Script • Prototype provides an extend method – Copies properties from one to another Clone() copies class/object Venkat Subramaniam – svenkat@cs. uh. edu 3

Ruby like functions • for in Java iterates over object properties • Ruby’s each iterator would be nice! – Closure can perform tasks on the elements of a collection • More Ruby like functions added Venkat Subramaniam – svenkat@cs. uh. edu 4

DOM Simplified • DOM is powerful, but awfully painful • Prototype helps by providing a number of convenience methods – Somewhat cryptic, but darn good Venkat Subramaniam – svenkat@cs. uh. edu 5

$() Method • Takes all kinds of things – Id represented by String – a DOM node • Adds some interesting Ruby like methods to DOM element – So you can iterate over, … Venkat Subramaniam – svenkat@cs. uh. edu 6

$$() Method • Allows you to select (and iterate) over elements identified by – Tag name – CSS Class name – Id Venkat Subramaniam – svenkat@cs. uh. edu 7

Insertion • Given an ID, insertion allows you to insert content – Before (above) – Top (top within) – Bottom (bottom within) – After (below) • the content Venkat Subramaniam – svenkat@cs. uh. edu 8

Using $() and Insertion Venkat Subramaniam – svenkat@cs. uh. edu 9

Using $() and Insertion… Venkat Subramaniam – svenkat@cs. uh. edu 10

Ajax Calls • Prototype’s provides a “class” called Ajax that takes care of several things related to Ajax – Browser idiosyncrasies • Goes to the extent of: – Making the remote call – Helps you with return codes • Remember the hideous status ids – Allows you to perform actions when call complete Venkat Subramaniam – svenkat@cs. uh. edu 11

Help with XMLHttp. Request • XMLHttp. Request object implementation is across browsers • We saw how to write code to deal with these differences • Prototype hides this for you Venkat Subramaniam – svenkat@cs. uh. edu 12

What we saw earlier Venkat Subramaniam – svenkat@cs. uh. edu 13

Prototype’s solution beautiful! Venkat Subramaniam – svenkat@cs. uh. edu 14

What’s that Try. these? Venkat Subramaniam – svenkat@cs. uh. edu 15

Defining success and failure Venkat Subramaniam – svenkat@cs. uh. edu 16

Ahem, but how do I make a remote call? • Ajax. Request helps with that • But, what’s that Class. create()? Venkat Subramaniam – svenkat@cs. uh. edu 17

Class. create() • Earlier we saw how to create classes in Java. Script • Prototype adds convenience to create a class Venkat Subramaniam – svenkat@cs. uh. edu 18

Ajax. Request Venkat Subramaniam – svenkat@cs. uh. edu 19

Making Asynchronous Call Venkat Subramaniam – svenkat@cs. uh. edu 20

Making Asynchronous Call… Venkat Subramaniam – svenkat@cs. uh. edu 21

Making Asynchronous Call… Venkat Subramaniam – svenkat@cs. uh. edu 22

Pretty cool, but can be simpler! • Ajax. Updater extends Ajax. Request – Updates a section of page (typically an id for a div tag) with returned content – Periodical. Executer can keep polling the server at specified interval Venkat Subramaniam – svenkat@cs. uh. edu 23