Changes for page ERPrototaculous
Last modified by Ravi Mendis on 2010/11/18 05:07
From version 282.1
edited by Ravi Mendis
on 2009/07/17 01:16
on 2009/07/17 01:16
Change comment:
There is no comment for this version
To version 283.1
edited by Ravi Mendis
on 2009/07/17 02:03
on 2009/07/17 02:03
Change comment:
Add code snippet for Javascript
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -7,17 +7,20 @@ 7 7 Features include: 8 8 9 9 * 'Organic' support for Prototype and Scriptaculous in WebObjects. 10 +** Light-weight dynamic elements to support Prototype 11 +** No custom patches to Prototype 12 +** Sans the need to extend Prototype 10 10 * Use of [[Unobtrusive Javascript>>http://en.wikipedia.org/wiki/Unobtrusive_JavaScript]]. 11 11 * Pseudo-stateless ajax responses 12 -* No custom extension or patches to Prototype 13 13 * A set of widgets in the Prototype + Scriptaculous family. 14 14 15 15 ==== Unobtrusive Javascript in ERPrototaculous ==== 16 16 17 17 Unobtrusive javascript is used in contrast to on-demand style of ajax programming. 18 -By including Javascript as well as CSS globally in the page wrapper, CSS and/or Javascript doesn't have to load inside ajax requests. 20 +By including Javascript as well as CSS globally in the page wrapper, CSS and Javascript don't have to load inside each and every ajax requests. 21 +This keeps the ajax responses compact and granular. 19 19 20 -The result is **faster** and more **reliable** ajax in WebObjects applications.23 +The result is **faster** and more **reliable** ajax in WebObjects. 21 21 22 22 ==== Prototype WebObjects Elements ==== 23 23 ... ... @@ -31,8 +31,14 @@ 31 31 * AjaxUpdaterButton 32 32 * AjaxUpdaterForm (with ##onsubmit## for ajax form submission) 33 33 34 -These components will update a **container** on the page .37 +These components will update a **container** on the page: 35 35 39 +{{code value="javascript"}} 40 + 41 + new Ajax.Updater('container', url, {options}); 42 + 43 +{{/code}} 44 + 36 36 ===== Ajax.Request ===== 37 37 38 38 Prototype's [[Ajax.Request>>http://www.prototypejs.org/api/ajax/request]] is in the form of: ... ... @@ -40,8 +40,14 @@ 40 40 * AjaxRequestLink 41 41 * AjaxRequestButton 42 42 43 -These are used for strictly **background** ajax communication .52 +These are used for strictly **background** ajax communication: 44 44 54 +{{code value="javascript"}} 55 + 56 + new Ajax.Request(url, {options}); 57 + 58 +{{/code}} 59 + 45 45 ==== Prototype + Scriptaculous Widgets ==== 46 46 47 47 * Accordion ... ... @@ -57,20 +57,36 @@ 57 57 1. All form controls must be named. This includes text fields, selects and buttons. 58 58 (WebObjects dynamically assigned names are not compatible with ERPrototaculous). 59 59 1. All forms in an ERPrototaculous app are instances of ##AjaxUpdaterForm##. 60 -1. Form submits can be the form of a: 75 +1. Form submit buttons can be the form of a: 61 61 62 62 * 63 -** Static ##<button>## 64 -** WOSubmitButton (if the result is to update whole page/app. 78 +** Static ##<button>##. 79 +** WOSubmitButton (if the result is to update whole page/app). 65 65 ** AjaxUpdaterButton (to update a **container**). Or 66 -** AjaxRequestButton (for a background ajax request) 81 +** AjaxRequestButton (for a **background** ajax request). 67 67 68 68 == Ajax Page Caching in ERPrototaculous == 69 69 70 70 One notable difference in the ERPrototaculous and Ajax.framework is in the ajax responses. 71 -ERPrototaculous updates and actions break with "The WebObjects Way" by being pseudo-stateless. 86 +In ERPrototaculous, updates and actions break with "The WebObjects Way" by being pseudo-stateless. 72 72 73 -Instead of returning a fresh response, an ajax update oractionisin factthe same instance.88 +Instead of returning a fresh response, an ajax update just returns the same (instance of the) page fragment. 74 74 75 -The reason returning a fresh response is not necessary is because a client never travels back or forwards through an ajax application unlike in a typical WebObjects app. 76 -Here the current state of the update or action is all that is necessary. 90 +The reason returning a fresh response is not necessary is because a client never travels back or forwards through the ajax application history - unlike in a typical WebObjects app. 91 +Here the current state of the page fragment is all that is necessary. 92 + 93 +== Actions in ERPrototaculous == 94 + 95 +Typically, in a WebObjects application, an action would return the contents of the entire page. 96 + 97 +Ajax responses are typically page fragments or part of a page. 98 +So you should make sure the actions in ERPrototaculous (or AjaxUpdaterButton and AjaxRequestButton) return the proper page fragment as opposed to the entire page. 99 +This breaks with WO-tradition, so this is where you need to be careful. 100 + 101 +{{note title="Actions"}} 102 + 103 +ERPrototaculous actions *differ* from Ajax.framework actions - _They must return only the page fragment_. 104 + 105 +{{/note}} 106 + 107 +To assist with page fragments inside **forms**, you can make your ajax action responses a subclass of **WXPageFragment** (a utility to handle the forms processing between Prototype and WebObjects).