Last modified by Pascal Robert on 2007/09/03 20:53

From version 9.1
edited by Marc Guenther
on 2007/08/28 08:59
Change comment: small reformat to make more readable
To version 11.1
edited by smmccraw
on 2007/07/08 09:43
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.marc
1 +XWiki.smmccraw
Content
... ... @@ -10,7 +10,7 @@
10 10  
11 11  Additionally, the WO documentation has always pushed people erroneously towards component actions and away from direct actions. If you use 90% direct actions like I do in my application, (See my "WebObjects on Rails" post), you'll find that direct actions are simple to code in reality, and very much like Rails which basically doesn't have component actions at all.
12 12  
13 -//Which is to say, if you avoid much of the power of WO, and don't use component actions, ajax will be easier. If you do use component actions - and I have yet to work on a project that doesn't - then ajax use seems like it will blow your page cache, as described below. So it really is easy to use AJAX in WO. Really easy. It's just that it doesn't work.//
13 +//[[Which is to say, if you avoid much of the power of WO, and don't use component actions, ajax will be easier. If you do use component actions - and I have yet to work on a project that doesn't - then ajax use seems like it will blow your page cache, as described below. So it really is easy to use AJAX in WO. Really easy. It's just that it doesn't work]]//
14 14  
15 15  //[[mschrag: While I agree with the above commenter that component actions provide a huge amount of power in WO, it is NOT true that Ajax and component actions are incompatible. ~[Project Wonder's Ajax components>>Programming__WebObjects-Project_WONDER-Frameworks-Ajax]] directly addresses the use of component actions with Ajax in a way that does NOT blow the page cache. While it is true that the implementation of these capabilities inside of Wonder was non-trivial, it demonstrates that it is, in fact, possible, and if you use the PW components along with ERXSession, you will get this capability for free.]//
16 16  
... ... @@ -20,7 +20,7 @@
20 20  
21 21  Reality: Actually, what really happens is that if you DON'T have a name=value or id=value line for your TextArea in WebObjects, it will generate a unique one for you. But you're more than welcome to specify one in your .wod file, and WO will use that. It's then up to //you// to make sure its unique, so that you don't have multiple text area tags with the same name. In other words if you only have one textarea you wish to attach a Javascript WYSIWYG editor to, just add:
22 22  
23 -{{code}}
23 +{{panel}}
24 24  
25 25   textarea: WOText
26 26   {
... ... @@ -29,7 +29,7 @@
29 29   value=textValue;
30 30   }
31 31  
32 -{{/code}}
32 +{{/panel}}
33 33  
34 34  in your .wod file and you can use id with your Javascript just fine.
35 35  
... ... @@ -53,24 +53,23 @@
53 53  
54 54  It's not that Rails rocks with Ajax, its that the Prototype Javascript library rocks. The documentation makes a big deal about doing Ajax with one line of code.
55 55  
56 -{{code}}
56 +{{panel}}
57 57  
58 58   <div id='<= posting.id'>
59 59   <%= link_to_remote [div to update] [link options] -> %>
60 60   </div>
61 61  
62 -{{/code}}
62 +{{/panel}}
63 63  
64 64  The reality is that all Rails is doing is writing one line of JavaScript. From the Ajaxy "rating" code I've been adding to my app, look at the following:
65 65  
66 -{{code}}
66 +{{panel}}
67 67  
68 68   <div id='<WEBOBJECT name=postingID></WEBBOBJECT>'>
69 - <a href="#" onclick="new Ajax.Updater('<WEBOBJECT name=postingID></WEBBOBJECT>',
70 - '<WEBOBJECT name=ratePosting></WEBOBJECT>', {asynchronous:true, evalScripts:true}); return false;">1</a>
69 + <a href="#" onclick="new Ajax.Updater('<WEBOBJECT name=postingID></WEBBOBJECT>', '<WEBOBJECT name=ratePosting></WEBOBJECT>', {asynchronous:true, evalScripts:true}); return false;">1</a>
71 71   </div>
72 72  
73 -{{/code}}
72 +{{/panel}}
74 74  
75 75  Ok, so lets break it down. The way Ajax.Updater works from the Prototype library is you give it the id of a DOM object and a URL, and it replaces the DOM object with that id with the contents of the URL. Usually, you specify the area to update with a div tag which I've shown for completeness. For ratings I would need 1 div tag to enclose all 5 rating stars: <div><a></a><a></a><a></a><a></a><a></a></div>. I would also use a WOGenericContainer to generate the div tag with the right id rather than using the id='<WEBOBJECT name=postingID></WEBBOBJECT>' line, but I wanted it to be obvious it was div tag.
76 76  
... ... @@ -78,26 +78,26 @@
78 78  
79 79  Here I have a manually built <a> tag with an onclick bit of javascript. That makes a single call out to the Prototype library, which has this cool call:
80 80  
81 -{{code}}
80 +{{panel}}
82 82  
83 83   new Ajax.Updater( elementid, url, options)
84 84  
85 -{{/code}}
84 +{{/panel}}
86 86  
87 87  It does something very simple: It pulls the HTML from the specified URL, and replaces the element with the specified id with the downloaded HTML.
88 88  
89 89  The two WebObjects tags specify the element ID and the link, they're just a WOString and a WOActionURL:
90 90  
91 -{{code}}
90 +{{panel}}
92 92  
93 93   postingID: WOString { currentPosting.primaryKeyString; }
94 94   ratePosting: WOActionURL { see discussion }
95 95  
96 -{{/code}}
95 +{{/panel}}
97 97  
98 98  Now in my case, I'm a direct action snob. So my WOActionURL would look like the following:
99 99  
100 -{{code}}
99 +{{panel}}
101 101  
102 102   ratePosting :WOActionURL
103 103   {
... ... @@ -107,27 +107,27 @@
107 107   ?wosid=NO;
108 108   }
109 109  
110 -{{/code}}
109 +{{/panel}}
111 111  
112 112  This produces a result similar to Rails, because in rails you have to define an action for each class of link. In my case I tie directactions to pages/components, so my "PostingRater" page would return component-level HTML (minus any HEAD/BODY tags) that matched the existing <div> definition. Since we're using WebObjects, that turns out to be trivially easy if we build the enclosing <div> tag with a component PostingRater can just look like:
113 113  
114 -{{code}}
113 +{{panel}}
115 115  
116 116   <WEBOBJECT name=RatingDiv></WEBOBJECT>
117 117  
118 -{{/code}}
117 +{{/panel}}
119 119  
120 120  Using component actions, it could be even simpler:
121 121  
122 -{{code}}
121 +{{panel}}
123 123  
124 124   ratePosting: WOActionURL { action=ratePosting;}
125 125  
126 -{{/code}}
125 +{{/panel}}
127 127  
128 128  Because WebObjects, unlike Rails can have stateful components, the RatingDiv component could actually have all the logic and return self as the result of the action:
129 129  
130 -{{code}}
129 +{{panel}}
131 131  
132 132   public WOReponse ratePosting
133 133   {
... ... @@ -138,7 +138,7 @@
138 138   // this as a result.
139 139   }
140 140  
141 -{{/code}}
140 +{{/panel}}
142 142  
143 143  That is, the link for the javascript would go into the RatingDiv component with everything already setup: the current posting, the current rating. Returning self then causes the div to regenerate.
144 144