Skip to Content

Changes for page ERPrototaculous

Last modified by Ravi Mendis on 2010/11/18 05:07
From version 313.1
edited by Ravi Mendis
on 2010/05/03 20:12
Change comment: There is no comment for this version
To version 312.1
edited by Ravi Mendis
on 2009/07/17 01:48
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -6,10 +6,10 @@
6 6  
7 7  Features include:
8 8  
9 -* 'Organic' support for [[Prototype>>http://www.prototypejs.org/]] and [[Scriptaculous>>http://script.aculo.us/]] in WebObjects.
9 +* 'Organic' support for Prototype and Scriptaculous in WebObjects.
10 10  ** Light-weight dynamic elements to support Prototype
11 -** Transparent API that doesn't hide or abstract Prototype and Scriptaculous
12 -** Sans patches or extensions to Prototype
11 +** No custom patches to Prototype
12 +** Sans the need to extend Prototype
13 13  * Use of [[Unobtrusive Javascript>>http://en.wikipedia.org/wiki/Unobtrusive_JavaScript]].
14 14  * Pseudo-stateless ajax responses
15 15  * A set of widgets in the Prototype + Scriptaculous family.
... ... @@ -18,30 +18,24 @@
18 18  
19 19  Unobtrusive javascript is used in contrast to on-demand style of ajax programming.
20 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 simple.
21 +This keeps the ajax responses compact and granular.
22 22  
23 23  The result is **faster** and more **reliable** ajax in WebObjects.
24 24  
25 25  ==== Prototype WebObjects Elements ====
26 26  
27 -##Ajax.Updater## and ##Ajax.Request## have been implemented as WebObjects elements.
27 +##Ajax.Updater## and ##Ajax.Request## have been implemented as WebObjects dynamic elements.
28 28  
29 29  ===== Ajax.Updater =====
30 30  
31 -Support for Prototype's [[Ajax.Updater>>http://www.prototypejs.org/api/ajax/updater]] is in the form of three elements:
31 +Support for Prototype's [[Ajax.Updater>>http://www.prototypejs.org/api/ajax/updater]] is in the form of three components:
32 32  
33 33  * AjaxUpdaterLink
34 34  * AjaxUpdaterButton
35 35  * AjaxUpdaterForm (with ##onsubmit## for ajax form submission)
36 36  
37 -These components will update //any// **container** on the page:
37 +These components will update a **container** on the page.
38 38  
39 -{{code value="javascript"}}
40 -
41 -new Ajax.Updater('container', url, {options});
42 -
43 -{{/code}}
44 -
45 45  ===== Ajax.Request =====
46 46  
47 47  Prototype's [[Ajax.Request>>http://www.prototypejs.org/api/ajax/request]] is in the form of:
... ... @@ -49,14 +49,8 @@
49 49  * AjaxRequestLink
50 50  * AjaxRequestButton
51 51  
52 -These are used for strictly **background** ajax communication:
46 +These are used for strictly **background** ajax communication.
53 53  
54 -{{code value="javascript"}}
55 -
56 -new Ajax.Request(url, {options});
57 -
58 -{{/code}}
59 -
60 60  ==== Prototype + Scriptaculous Widgets ====
61 61  
62 62  * Accordion
... ... @@ -63,88 +63,43 @@
63 63  * LightWindow
64 64  * ModalBox
65 65  * CalendarDateSelect
66 -* [[FileUpload>>http://valums.com/ajax-upload/]]
54 +* FileUpload
67 67  
68 -Support for these widgets have been similarly implemented as **button** and **link** variants, depending whether it is used inside a form or not.
56 +== Forms in ERPrototaculous ==
69 69  
70 -== Ajax Forms in ERPrototaculous ==
71 -
72 72  Differences from using forms in WebObjects. i.e ##WOForm##:
73 73  
74 -1. All ajax form controls must be named. This includes text fields, selects and buttons.
60 +1. All form controls must be named. This includes text fields, selects and buttons.
75 75  (WebObjects dynamically assigned names are not compatible with ERPrototaculous).
76 -1. All ajax forms in an ERPrototaculous app need to be instances of ##AjaxUpdaterForm##.
77 -1. Ajax form submit buttons can be a:
78 -1*. Static ##<button>##.
79 -1*. WOSubmitButton (if the result is to update whole page/app).
80 -1*. AjaxUpdaterButton (to update a **container**). Or
81 -1*. AjaxRequestButton (for a **background** ajax request).
62 +1. All forms in an ERPrototaculous app are instances of ##AjaxUpdaterForm##.
63 +1. Form submit buttons can be the form of a:
82 82  
83 -So forms are different in Ajax.framework and ERPrototaculous.
65 +*
66 +** Static ##<button>##.
67 +** WOSubmitButton (if the result is to update whole page/app).
68 +** AjaxUpdaterButton (to update a **container**). Or
69 +** AjaxRequestButton (for a **background** ajax request).
84 84  
85 -In ERPrototaculous you may still have typical WebObjects forms (i.e WOForm) as well as use ajax forms (i.e **AjaxUpdaterForm**).
86 -They behave differently in that an AjaxUpdaterForm will update the contents of a container as opposed to the entire page.
71 +== Ajax Page Caching in ERPrototaculous ==
87 87  
88 -{{warning title="Warning"}}
73 +One notable difference in the ERPrototaculous and Ajax.framework is in the ajax responses.
74 +In ERPrototaculous, updates and actions break with "The WebObjects Way" by being pseudo-stateless.
89 89  
90 -You must *name your form controls*, otherwise under certain circumstances Prototype (ajax) form submission will break.
76 +Instead of returning a fresh response, an ajax update just returns the same (instance of the) page fragment.
91 91  
92 -{{/warning}}
78 +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.
79 +Here the current state of the page fragment is all that is necessary.
93 93  
94 -= Embrace Statelessness! =
81 +== Actions in ERPrototaculous ==
95 95  
96 -{{include value="WO:Embrace Statelessness"}}{{/include}}
97 -
98 -ERPrototaculous embraces the stateless model Ajax offers in exchange for simplifying the work WebObjects has to do -- it's a win--win!
99 -
100 -So you may observe one notable difference between the ERPrototaculous and Ajax frameworks is in the way they handle ajax responses.
101 -In ERPrototaculous, updates and actions break with typical WebObjects behavior by being pseudo-stateless.
102 -
103 -=== Ajax Response Handling in ERPrototaculous ===
104 -
105 -In a typical WebObjects application, when a user navigates to the previous page using the browser back button and subsequently clicks on a link in on that page, WebObjects needs to remember how to handle that action and to return the correct page. This is no longer necessary for ajax.
106 -
107 -A user never travels backwards or forwards through the ajax application history.
108 -(i.e there is no forward/back buttons for ajax requests - just as there aren't forward/back buttons on desktop apps).
109 -
110 -So for ajax, the current state of the page fragment component is all that is necessary.
111 -
112 -{{info title="No More"}}
113 -
114 -A 100% ajax WO-app (like an [ERDivaLook|ERDivaLook] app) is no longer plagued by the well known _limitation_ of WebObjects - the browser *backtrack problem*.
115 -
116 -{{/info}}
117 -
118 -== Ajax Actions in ERPrototaculous ==
119 -
120 120  Typically, in a WebObjects application, an action would return the contents of the entire page.
121 121  
122 -Ajax responses are mostly page fragments or just part of a page.
123 -So you should make sure the actions in ERPrototaculous (or AjaxUpdaterButton and AjaxRequestButton) return the proper page fragment as opposed to the entire page.
124 -This is different to how WebObjects normally works, so this is where you need to be careful.
85 +Ajax responses are typically page fragments or part of a page.
86 +So you should make sure the actions in ERPrototaculous (or AjaxUpdaterButton and AjaxRequestButton) return the proper page fragment as opposed to the entire page.
87 +This breaks with WO-tradition, so this is where you need to be careful.
125 125  
126 -{{note title="Note"}}
89 +{{note title="Actions"}}
127 127  
128 128  ERPrototaculous actions *differ* from Ajax.framework actions - _They must return only the page fragment_.
129 129  
130 130  {{/note}}
131 -
132 -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).
133 -
134 -== Update Containers in ERPrototaculous ==
135 -
136 -Perhaps the only real similarity to Ajax.framework is the ajax update container.
137 -**WXGenericContainer** is the ERPrototaculous update container.
138 -It is similar to an AjaxUpdateContainer when it has the binding ##ajax = true##, otherwise it's pretty much like **WOGenericContainer**.
139 -
140 -It has been implemented as a utility or //convenience// for Prototype's ##Ajax.Updater##.
141 -That is it can be used to update from a DOM //event// like popup //onchange//, or from a Prototype //callback// like //onComplete//, etc.
142 -
143 -== Compatibility ==
144 -
145 -ERPrototaculous can not be used with WebObjects 5.3 as it is dependent on the hooks for ajax added to WebObjects with version 5.4.
146 -
147 -{{warning title="ERPrototaculous is WebObjects *5.4* compatible only"}}
148 -
149 -
150 -{{/warning}}