Prototype Stuart Halloway

Size: px

Start display at page:

Download "Prototype Stuart Halloway"

Stanley White
6 years ago
Views:

2 What is Prototype? provides core support for Ajax hides browser oddities powers other libraries (Scriptaculous, Rico) keeps things simple works with any server stack integrates with Rails

3 Object Model

4 Create a Class Ajax.Request = Class.create(); Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; Ajax.Request.prototype = Object.extend(new Ajax.Base(), { initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setoptions(options); this.request(url); }, //...snip... }

5 Class Properties Ajax.Request = Class.create(); Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; Ajax.Request.prototype = Object.extend(new Ajax.Base(), { initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setoptions(options); this.request(url); }, //...snip... }

6 Extend Another Class Ajax.Request = Class.create(); Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; Ajax.Request.prototype = Object.extend(new Ajax.Base(), { initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setoptions(options); this.request(url); }, //...snip... }

7 Constructor Ajax.Request = Class.create(); Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; Ajax.Request.prototype = Object.extend(new Ajax.Base(), { initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setoptions(options); this.request(url); }, //...snip... }

8 Instance Properties Ajax.Request = Class.create(); Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; Ajax.Request.prototype = Object.extend(new Ajax.Base(), { initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setoptions(options); this.request(url); }, //...snip... }

9 Beware the Comma Ajax.Request = Class.create(); Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; Ajax.Request.prototype = Object.extend(new Ajax.Base(), { initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setoptions(options); this.request(url); }, //...snip... }

10 OO in Prototype Classes are language library features Inheritance is a language library feature Classes and inheritance are flexible ideas

11 Augmenting Built-in Classes

12 Augmenting String Object.extend(String.prototype, { striptags: function() { return this.replace(/<\/?[^>]+>/gi, ''); }, } stripscripts: function() { return this.replace(new RegExp(Prototype.ScriptFragment, 'img'), ''); }, //... snip...

13 Enumeration: each $A(element.childNodes).each(function(node){ element.removechild(node) });

14 Enumeration: map toquerystring: function() { return this.map(function(pair) { return pair.map(encodeuricomponent).join('='); }).join('&'); },

15 Enumeration: select compact: function() { return this.select(function(value) { return value!= undefined value!= null; }); },

16 Augmenting Classes functions have sensible homes collection traversal is trivial

17 xhr Support

18 URL to Invoke new Ajax.Request(this.validateAction, { method: 'get', parameters: e.name + "=" + e.value, onsuccess: (function(req) { this.reportvalidation(e, req.responsetext); }).bind(this), onfailure: function(req) {alert(req.responsetext)}, onexception: function(t,e) {alert(e);} });

19 HTTP Verb new Ajax.Request(this.validateAction, { method: 'get', parameters: e.name + "=" + e.value, onsuccess: (function(req) { this.reportvalidation(e, req.responsetext); }).bind(this), onfailure: function(req) {alert(req.responsetext)}, onexception: function(t,e) {alert(e);} });

20 Query String new Ajax.Request(this.validateAction, { method: 'get', parameters: e.name + "=" + e.value, onsuccess: (function(req) { this.reportvalidation(e, req.responsetext); }).bind(this), onfailure: function(req) {alert(req.responsetext)}, onexception: function(t,e) {alert(e);} });

21 Success Callback new Ajax.Request(this.validateAction, { method: 'get', parameters: e.name + "=" + e.value, onsuccess: (function(req) { this.reportvalidation(e, req.responsetext); }).bind(this), onfailure: function(req) {alert(req.responsetext)}, onexception: function(t,e) {alert(e);} });

22 Bind To this new Ajax.Request(this.validateAction, { method: 'get', parameters: e.name + "=" + e.value, onsuccess: (function(req) { this.reportvalidation(e, req.responsetext); }).bind(this), onfailure: function(req) {alert(req.responsetext)}, onexception: function(t,e) {alert(e);} });

23 Failure Callback new Ajax.Request(this.validateAction, { method: 'get', parameters: e.name + "=" + e.value, onsuccess: (function(req) { this.reportvalidation(e, req.responsetext); }).bind(this), onfailure: function(req) {alert(req.responsetext)}, onexception: function(t,e) {alert(e);} });

24 Exception Callback new Ajax.Request(this.validateAction, { method: 'get', parameters: e.name + "=" + e.value, onsuccess: (function(req) { this.reportvalidation(e, req.responsetext); }).bind(this), onfailure: function(req) {alert(req.responsetext)}, onexception: function(t,e) {alert(e);} });

25 Ajax.Request hides browser oddities takes a slew of options performs callbacks asynchronously

26 xhr Example: Polling and Updating

27 Call Periodically new PeriodicalExecuter(function() { new Ajax.Updater('items', ' {evalscripts:true}); }, 10);

28 Update Page Element new PeriodicalExecuter(function() { new Ajax.Updater('items', ' {evalscripts:true}); }, 10);

29 URL new PeriodicalExecuter(function() { new Ajax.Updater('items', ' {evalscripts:true}); }, 10);

30 Evaluate Scripts new PeriodicalExecuter(function() { new Ajax.Updater('items', ' {evalscripts:true}); }, 10);

31 Interval (Seconds) new PeriodicalExecuter(function() { new Ajax.Updater('items', ' {evalscripts:true}); }, 10);

32 xhr a method for every season Ajax.Request, Ajax.Updater methods share common options

33 DOM Support

34 $ Example clear: function() { for (var i = 0; i < arguments.length; i++) $(arguments[i]).value = ''; },

35 $ Implementation function $() { var results = [], element; for (var i = 0; i < arguments.length; i++) { element = arguments[i]; if (typeof element == 'string') element = document.getelementbyid(element); results.push(element.extend(element)); } return results.length < 2? results[0] : results; }

36 $$ Example $$("h1").each(function(e) { Element.addClassName(e, "blueborder"); }); $$("li.showme").each(function(e) { Effect.Pulsate(e); });

37 Original Insertion Syntax

38 New Insertion Syntax Event.observe(window, "load", function() { $("submit").observe("click", function(evt) { $("log").insert({ top: $("message").value + "<br/>"; }); $("message").clear(); evt.stop(); }); });

39 Observing a Form Element //from pragforms sample app new Form.Element.Observer( 'search', 0.5, function(element, value) { Element.show('spinner'); new Ajax.Updater( 'ajaxwrapper', ' { asynchronous:true, evalscripts:true, oncomplete:function(request) { Element.hide('spinner') }, parameters:'search=' + encodeuricomponent(value) } ) } )

40 Interval (Seconds) //from pragforms sample app new Form.Element.Observer( 'search', 0.5, function(element, value) { Element.show('spinner'); new Ajax.Updater( 'ajaxwrapper', ' { asynchronous:true, evalscripts:true, oncomplete:function(request) { Element.hide('spinner') }, parameters:'search=' + encodeuricomponent(value) } ) } )

41 Handler //from pragforms sample app new Form.Element.Observer( 'search', 0.5, function(element, value) { Element.show('spinner'); new Ajax.Updater( 'ajaxwrapper', ' { asynchronous:true, evalscripts:true, oncomplete:function(request) { Element.hide('spinner') }, parameters:'search=' + encodeuricomponent(value) } ) } )

42 Rails API <%= observe_field :search, :frequency => 0.5, :update => 'ajaxwrapper', :complete=>"element.hide('spinner')", :before=>"element.show('spinner')", :with=>"'search=' + encodeuricomponent(value)", :url=>{:action=>'search'} %>

43 DOM Support find elements by id with $ find by class with $$ update elements with insertions grab user input with observers

44 Resources and Samples Prototype: prototypejs.org About Relevance: thinkrelevance.com Sample Code: thinkrelevance.com Rails Book Samples:

Web Programming Step by Step

Web Programming Step by Step Lecture 19 Ajax Reading: 10.1-10.2 Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller. Synchronous web communication