Skip to Content

Changes for page ERPrototaculous

Last modified by Ravi Mendis on 2010/11/18 05:07
From version 318.1
edited by Ravi Mendis
on 2010/11/18 05:07
Change comment: There is no comment for this version
To version 319.1
edited by Ravi Mendis
on 2010/11/18 05:07
Change comment: There is no comment for this version

Summary

Details

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