Changes for page ERPrototaculous

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -6,10 +6,10 @@
6	6
7	7	Features include:
8	8
9		-* 'Organic' support for Prototype and Scriptaculous in WebObjects.
	9	+* 'Organic' support for [[Prototype>>http://www.prototypejs.org/]] and [[Scriptaculous>>http://script.aculo.us/]] in WebObjects.
10	10	** Light-weight dynamic elements to support Prototype
11		-** No custom patches to Prototype
12		-** Sans the need to extend Prototype
	11	+** Transparent API that doesn't hide or abstract Prototype and Scriptaculous
	12	+** Sans patches or extensions to 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.
...	...	@@ -16,26 +16,34 @@
16	16
17	17	==== Unobtrusive Javascript in ERPrototaculous ====
18	18
19		-Unobtrusive javascript is used in contrast to on-demand style of ajax programming.
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	+{{include value="WO:Using Unobtrusive JavaScript"}}{{/include}}
22	22
23		-The result is **faster** and more **reliable** ajax in WebObjects.
	21	+{{code}}
24	24
	23	+er.prototaculous.useUnobtrusively = true
	24	+
	25	+{{/code}}
	26	+
25	25	==== Prototype WebObjects Elements ====
26	26
27		-##Ajax.Updater## and ##Ajax.Request## have been implemented as WebObjects dynamic elements.
	29	+##Ajax.Updater## and ##Ajax.Request## have been implemented as WebObjects 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 components:
	33	+Support for Prototype's [[Ajax.Updater>>http://www.prototypejs.org/api/ajax/updater]] is in the form of three elements:
32	32
33	33	* AjaxUpdaterLink
34	34	* AjaxUpdaterButton
35	35	* AjaxUpdaterForm (with ##onsubmit## for ajax form submission)
36	36
37		-These components will update a **container** on the page.
	39	+These components will update //any// **container** on the page:
38	38
	41	+{{code value="javascript"}}
	42	+
	43	+new Ajax.Updater('container', url, {options});
	44	+
	45	+{{/code}}
	46	+
39	39	===== Ajax.Request =====
40	40
41	41	Prototype's [[Ajax.Request>>http://www.prototypejs.org/api/ajax/request]] is in the form of:
...	...	@@ -43,8 +43,14 @@
43	43	* AjaxRequestLink
44	44	* AjaxRequestButton
45	45
46		-These are used for strictly **background** ajax communication.
	54	+These are used for strictly **background** ajax communication:
47	47
	56	+{{code value="javascript"}}
	57	+
	58	+new Ajax.Request(url, {options});
	59	+
	60	+{{/code}}
	61	+
48	48	==== Prototype + Scriptaculous Widgets ====
49	49
50	50	* Accordion
...	...	@@ -51,43 +51,92 @@
51	51	* LightWindow
52	52	* ModalBox
53	53	* CalendarDateSelect
54		-* FileUpload
	68	+* [[FileUpload>>http://valums.com/ajax-upload/]]
55	55
56		-== Forms in ERPrototaculous ==
	70	+Support for these widgets have been similarly implemented as **button** and **link** variants, depending whether it is used inside a form or not.
57	57
	72	+== Ajax Forms in ERPrototaculous ==
	73	+
58	58	Differences from using forms in WebObjects. i.e ##WOForm##:
59	59
60		-1. All form controls must be named. This includes text fields, selects and buttons.
	76	+1. All ajax form controls must be named. This includes text fields, selects and buttons.
61	61	(WebObjects dynamically assigned names are not compatible with ERPrototaculous).
62		-1. All forms in an ERPrototaculous app are instances of ##AjaxUpdaterForm##.
63		-1. Form submit buttons can be the form of a:
	78	+1. All ajax forms in an ERPrototaculous app need to be instances of ##AjaxUpdaterForm##.
	79	+1. Ajax form submit buttons can be a:
	80	+1*. Static ##<button>##.
	81	+1*. WOSubmitButton (if the result is to update whole page/app).
	82	+1*. AjaxUpdaterButton (to update a **container**). Or
	83	+1*. AjaxRequestButton (for a **background** ajax request).
64	64
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).
	85	+So forms are different in Ajax.framework and ERPrototaculous.
70	70
71		-== Ajax Page Caching in ERPrototaculous ==
	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.
72	72
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.
	90	+{{warning title="Warning"}}
75	75
76		-Instead of returning a fresh response, an ajax update just returns the same (instance of the) page fragment.
	92	+You must *name your form controls*, otherwise under certain circumstances Prototype (ajax) form submission will break.
77	77
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.
	94	+{{/warning}}
80	80
81		-== Actions in ERPrototaculous ==
	96	+= Embrace Statelessness =
82	82
	98	+{{include value="WO:Embrace Statelessness"}}{{/include}}
	99	+
	100	+ERPrototaculous embraces the stateless model Ajax offers in exchange for simplifying the work WebObjects has to do -- it's a win--win
	101	+
	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.
	104	+
	105	+=== Ajax Response Handling in ERPrototaculous ===
	106	+
	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	+
	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).
	111	+
	112	+So for ajax, the current state of the page fragment component is all that is necessary.
	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	+
	118	+{{/info}}
	119	+
	120	+== Ajax Actions in ERPrototaculous ==
	121	+
83	83	Typically, in a WebObjects application, an action would return the contents of the entire page.
84	84
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.
	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.
88	88
89		-{{note title="Actions"}}
	128	+{{note title="Note"}}
90	90
91	91	ERPrototaculous actions *differ* from Ajax.framework actions - _They must return only the page fragment_.
92	92
93	93	{{/note}}
	133	+
	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).
	135	+
	136	+== Update Containers in ERPrototaculous ==
	137	+
	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**.
	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.
	144	+
	145	+== Compatibility ==
	146	+
	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	+
	149	+{{warning title="ERPrototaculous is WebObjects *5.4* compatible only"}}
	150	+
	151	+
	152	+{{/warning}}
	153	+
	154	+== External Links ==
	155	+
	156	+WOWODC '10 (Slides) - [[DirectToWeb 2.0>>http://www.wocommunity.org/wowodc10/slides/D2W2.pdf]]