0
WebWork + AJAX A winning combination Patrick A. Lightbody
Introduction <ul><li>What is WebWork? </li></ul><ul><li>What is OpenSymphony? </li></ul><ul><li>The state of web applicati...
<ul><li>eBook now available </li></ul><ul><li>Print version ready “any day now” </li></ul><ul><li>A free copy will be give...
AJAX <ul><li>AJAX = Asyncronous JavaScript and XML </li></ul><ul><li>Examples </li></ul><ul><ul><li>Gmail </li></ul></ul><...
A simple action <ul><li>A look at the general flow of WebWork actions </li></ul><ul><li>A simple example of the template l...
Clean code… <ul><li><@ww.form action=&quot;createPerson&quot;  </li></ul><ul><li>method=&quot;post&quot;> </li></ul><ul><l...
… is still really a train wreck <ul><li><form id=&quot;updatePerson&quot; </li></ul><ul><li>action=&quot;updatePerson.acti...
Uses of AJAX <ul><li>What exactly does it mean to “ajaxify” your web application? </li></ul><ul><li>AJAX is a technique; n...
Building blocks <ul><li>Three core building blocks/tags: </li></ul><ul><ul><li>@ww.div </li></ul></ul><ul><ul><li>@ww.a </...
Building blocks (cont) <ul><li>Two frameworks used: </li></ul><ul><ul><li>DWR: Remote invocation service for Java <-> Java...
Div tag <ul><li>Attributes: </li></ul><ul><ul><li>href </li></ul></ul><ul><ul><li>updateFreq </li></ul></ul><ul><ul><li>de...
Polling <ul><li>Simple use of the @ww.div tag! </li></ul><ul><ul><li>Just set the href and the frequency </li></ul></ul><u...
Stock quote example <ul><li><#list symbols as symbol> </li></ul><ul><li><@ww.url id=&quot;url&quot; </li></ul><ul><li>valu...
Stock quote example (cont.) <ul><li>public class Quote { </li></ul><ul><li>String symbol; </li></ul><ul><li>Stock stock; <...
Stock quote example (cont.) <ul><li><div class=&quot;quote&quot;> </li></ul><ul><li>${stock.symbol}: ${stock.price} </li><...
Stock quote example (cont.) <ul><li><div dojoType=&quot;BindDiv&quot; </li></ul><ul><li>href=&quot;quote.action?symbol=GOO...
Compatibility <ul><li>That's great, but what about older browsers? </li></ul><ul><li>With the stock quote example, they wo...
Compatibility <ul><li><@ww.div href=&quot;%{#url}&quot; </li></ul><ul><li>updateFreq=&quot;900000&quot;> </li></ul><ul><li...
Compatibility (cont.) <ul><li><div dojoType=&quot;BindDiv&quot; </li></ul><ul><li>href=&quot;quote.action?symbol=GOOG&quot...
Tabbed pane <ul><li>Two tags: </li></ul><ul><ul><li>@ww.tabbedPanel </li></ul></ul><ul><ul><li>@ww.panel </li></ul></ul><u...
Tabbed Pane
Example <ul><li><@ww.tabbedPanel> </li></ul><ul><li><@ww.panel tabName=&quot;Details&quot;> </li></ul><ul><li><h1>Stock de...
Topic-based events <ul><li>Dojo supports an event system, donated by the WebWork developers </li></ul><ul><li>Any element,...
Tree widget: events in action <ul><li>A tree widget is actually one of the simplest AJAX techniques to build </li></ul><ul...
Tree widget
Tree widget example <ul><li>Requirements: </li></ul><ul><ul><li>An action that gets a list of children when given a catego...
Tree widget example <ul><li><#list categories as cat> </li></ul><ul><li><#if cat.children.size > 0> </li></ul><ul><li><#as...
Tree widget example <ul><li><@ww.url id=&quot;url&quot; </li></ul><ul><li>value=&quot;listCategories.action&quot; </li></u...
Tree widget example <ul><li>if (${childCount} > 0 {  </li></ul><ul><li>var div = $(&quot;children_${id}&quot;); </li></ul>...
Validation <ul><li>Uses DWR; requires the DWR servlet installed </li></ul><ul><li>Note: remote calls return serialized obj...
Validation
Pitfalls <ul><li>Remember: there is no silver bullet </li></ul><ul><li>At the end of the day, your application is still a ...
Wrap up <ul><li>Built in WebWork features: </li></ul><ul><ul><li>Tabbed pane </li></ul></ul><ul><ul><li>Validation </li></...
Questions?
Upcoming SlideShare
Loading in...5
×

Ajax

872

Published on

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
872
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
66
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax"

  1. 1. WebWork + AJAX A winning combination Patrick A. Lightbody
  2. 2. Introduction <ul><li>What is WebWork? </li></ul><ul><li>What is OpenSymphony? </li></ul><ul><li>The state of web applications </li></ul><ul><ul><li>Yesterday, today, and tomorrow </li></ul></ul><ul><li>Who is Patrick? </li></ul><ul><li>Is AJAX here to stay? </li></ul>
  3. 3. <ul><li>eBook now available </li></ul><ul><li>Print version ready “any day now” </li></ul><ul><li>A free copy will be given away at the end of the session </li></ul>
  4. 4. AJAX <ul><li>AJAX = Asyncronous JavaScript and XML </li></ul><ul><li>Examples </li></ul><ul><ul><li>Gmail </li></ul></ul><ul><ul><li>Google maps </li></ul></ul><ul><ul><li>Jive group chat </li></ul></ul><ul><ul><li>Microsoft Outlook Web Access </li></ul></ul><ul><li>All use XmlHttpRequest </li></ul><ul><ul><li>Platform compatibility? </li></ul></ul>
  5. 5. A simple action <ul><li>A look at the general flow of WebWork actions </li></ul><ul><li>A simple example of the template library’s power </li></ul><ul><li>Remember: all the AJAX features of WebWork are built using the template library </li></ul><ul><li>AJAX is really just a bunch of JavaScript, HTML, and sloppy logic smashed together in a big train wreck! </li></ul>
  6. 6. Clean code… <ul><li><@ww.form action=&quot;createPerson&quot; </li></ul><ul><li>method=&quot;post&quot;> </li></ul><ul><li><@ww.textfield label=&quot;Name&quot; </li></ul><ul><li>name=&quot;person.name&quot;/> </li></ul><ul><li><@ww.textfield label=&quot;Email&quot; </li></ul><ul><li>name=&quot;person.email&quot;/> </li></ul><ul><li><@ww.submit value=&quot;Create person&quot;/> </li></ul><ul><li></@ww.form> </li></ul>
  7. 7. … is still really a train wreck <ul><li><form id=&quot;updatePerson&quot; </li></ul><ul><li>action=&quot;updatePerson.action&quot; </li></ul><ul><li>method=&quot;post&quot;> </li></ul><ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td>Name:</td> </li></ul><ul><li><td><input id=&quot;updatePerson_person.name&quot; </li></ul><ul><li>name=&quot;person.name&quot;/></td> </li></ul><ul><li></tr> </li></ul><ul><li>... </li></ul><ul><li></table> </li></ul><ul><li></form> </li></ul>
  8. 8. Uses of AJAX <ul><li>What exactly does it mean to “ajaxify” your web application? </li></ul><ul><li>AJAX is a technique; not a technology. </li></ul><ul><li>Caution: AJAX can be overused! </li></ul><ul><li>Common AJAX techniques: </li></ul><ul><ul><li>Tabbed pane </li></ul></ul><ul><ul><li>Validation </li></ul></ul><ul><ul><li>Polling </li></ul></ul><ul><ul><li>Tree widget </li></ul></ul>
  9. 9. Building blocks <ul><li>Three core building blocks/tags: </li></ul><ul><ul><li>@ww.div </li></ul></ul><ul><ul><li>@ww.a </li></ul></ul><ul><ul><li>@ww.submit </li></ul></ul><ul><li>divs are where things “happen” </li></ul><ul><li>Links and submit buttons can trigger events </li></ul>
  10. 10. Building blocks (cont) <ul><li>Two frameworks used: </li></ul><ul><ul><li>DWR: Remote invocation service for Java <-> JavaScript </li></ul></ul><ul><ul><li>Dojo: Language/server-agnostic JavaScript framework </li></ul></ul><ul><li>Two styles of AJAX: </li></ul><ul><ul><li>DOM manipulation (DWR) </li></ul></ul><ul><ul><li>&quot;Partial pages&quot; (Dojo) </li></ul></ul><ul><li>WebWork provides three Dojo widgets: </li></ul><ul><ul><li>BindDiv </li></ul></ul><ul><ul><li>BindAnchor </li></ul></ul><ul><ul><li>BindButton </li></ul></ul>
  11. 11. Div tag <ul><li>Attributes: </li></ul><ul><ul><li>href </li></ul></ul><ul><ul><li>updateFreq </li></ul></ul><ul><ul><li>delay </li></ul></ul><ul><ul><li>loadingText </li></ul></ul><ul><ul><li>errorText </li></ul></ul><ul><ul><li>showErrorTransportText </li></ul></ul><ul><ul><li>listenTopics </li></ul></ul><ul><ul><li>afterLoading </li></ul></ul><ul><li>Usage: </li></ul><ul><ul><li><@ww.div …/> </li></ul></ul>
  12. 12. Polling <ul><li>Simple use of the @ww.div tag! </li></ul><ul><ul><li>Just set the href and the frequency </li></ul></ul><ul><li>Note: remote action returns HTML </li></ul><ul><li>Example: </li></ul><ul><ul><li><@ww.url id=“url” value=“mailbox.action” </li></ul></ul><ul><ul><li>mailboxId=“${mailboxId}”/> </li></ul></ul><ul><ul><li><@ww.div href=“%{#url}” updateFreq=“2000”/> </li></ul></ul>
  13. 13. Stock quote example <ul><li><#list symbols as symbol> </li></ul><ul><li><@ww.url id=&quot;url&quot; </li></ul><ul><li>value=&quot;quote.action&quot; </li></ul><ul><li>symbol=&quot;${symbol}&quot;/> </li></ul><ul><li><@ww.div href=&quot;%{#url}&quot; </li></ul><ul><li>updateFreq=&quot;900000&quot;/> </li></ul><ul><li></#list> </li></ul>
  14. 14. Stock quote example (cont.) <ul><li>public class Quote { </li></ul><ul><li>String symbol; </li></ul><ul><li>Stock stock; </li></ul><ul><li>public String execute() { </li></ul><ul><li>stock = StockMgr.lookup(symbol); </li></ul><ul><li>return SUCCESS; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  15. 15. Stock quote example (cont.) <ul><li><div class=&quot;quote&quot;> </li></ul><ul><li>${stock.symbol}: ${stock.price} </li></ul><ul><li></div> </li></ul>
  16. 16. Stock quote example (cont.) <ul><li><div dojoType=&quot;BindDiv&quot; </li></ul><ul><li>href=&quot;quote.action?symbol=GOOG&quot; </li></ul><ul><li>refresh=&quot;900000&quot;/> </li></ul>
  17. 17. Compatibility <ul><li>That's great, but what about older browsers? </li></ul><ul><li>With the stock quote example, they would see nothing! </li></ul><ul><li>WebWork and Dojo address this as much as possible </li></ul><ul><li>Warning: Intelligent fallback can be difficult and sometimes impossible! </li></ul>
  18. 18. Compatibility <ul><li><@ww.div href=&quot;%{#url}&quot; </li></ul><ul><li>updateFreq=&quot;900000&quot;> </li></ul><ul><li><@ww.action name=&quot;quote&quot; </li></ul><ul><li>symbol=&quot;${symbol}&quot; </li></ul><ul><li>executeResult=&quot;true&quot;/> </li></ul><ul><li></@ww.div> </li></ul>
  19. 19. Compatibility (cont.) <ul><li><div dojoType=&quot;BindDiv&quot; </li></ul><ul><li>href=&quot;quote.action?symbol=GOOG&quot; </li></ul><ul><li>refresh=&quot;900000&quot;> </li></ul><ul><li><div class=&quot;quote&quot;> </li></ul><ul><li>GOOG: $82,000.00 </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>
  20. 20. Tabbed pane <ul><li>Two tags: </li></ul><ul><ul><li>@ww.tabbedPanel </li></ul></ul><ul><ul><li>@ww.panel </li></ul></ul><ul><li>The panel tag extends the div tag </li></ul><ul><ul><li>tabName </li></ul></ul><ul><ul><li>remote </li></ul></ul><ul><li>Usage: </li></ul><ul><ul><li><@ww.tabbedPanel …> </li></ul></ul><ul><ul><li><@ww.panel …/> </li></ul></ul><ul><ul><li><@ww.panel …/> </li></ul></ul><ul><ul><li></@ww.tabbedPanel> </li></ul></ul>
  21. 21. Tabbed Pane
  22. 22. Example <ul><li><@ww.tabbedPanel> </li></ul><ul><li><@ww.panel tabName=&quot;Details&quot;> </li></ul><ul><li><h1>Stock details</h1> </li></ul><ul><li>... </li></ul><ul><li></@ww.panel> </li></ul><ul><li><@ww.panel remote=&quot;true&quot; </li></ul><ul><li>tabName=&quot;Price&quot; </li></ul><ul><li>href=&quot;%{#url}&quot;/> </li></ul><ul><li><@ww.tabbedPanel> </li></ul>
  23. 23. Topic-based events <ul><li>Dojo supports an event system, donated by the WebWork developers </li></ul><ul><li>Any element, such as a div, may listen on multiple topics </li></ul><ul><li>Any element, such as an href or tab header, may notify a topic </li></ul><ul><li>What happens when the topic is notified is up to the receiving element </li></ul><ul><li>Important: topics get you away from document.getElementXxx() </li></ul>
  24. 24. Tree widget: events in action <ul><li>A tree widget is actually one of the simplest AJAX techniques to build </li></ul><ul><li>Assume a model that provides a getChildren() call, such as Category.getChildren() </li></ul><ul><li>Utilizes two building blocks: divs and links. </li></ul>
  25. 25. Tree widget
  26. 26. Tree widget example <ul><li>Requirements: </li></ul><ul><ul><li>An action that gets a list of children when given a category ID </li></ul></ul><ul><ul><li>A template to render the tree </li></ul></ul><ul><ul><li>A template to kick off the initial tree display </li></ul></ul><ul><ul><li>An action that returns JavaScript as the result </li></ul></ul><ul><li>Initial display can be done with the action tag: </li></ul><ul><ul><li><@ww.action name=&quot;listCategories.action&quot; </li></ul></ul><ul><ul><li>executeResult=&quot;true&quot;/> </li></ul></ul>
  27. 27. Tree widget example <ul><li><#list categories as cat> </li></ul><ul><li><#if cat.children.size > 0> </li></ul><ul><li><#assign icon=&quot;plus&quot;/> </li></ul><ul><li><#else> </li></ul><ul><li><#assign icon=&quot;square&quot;/> </li></ul><ul><li></#if> </li></ul><ul><li><@ww.a notifyTopics=&quot;children_${cat.id}&quot; </li></ul><ul><li>href=&quot;toggle.action?id=${cat.id}&quot;> </li></ul><ul><li><img src=&quot;${icon}.gif&quot;/> </li></ul><ul><li></@ww.a> </li></ul><ul><li>[EXAMPLE CONTINUED] </li></ul><ul><li></#list> </li></ul>
  28. 28. Tree widget example <ul><li><@ww.url id=&quot;url&quot; </li></ul><ul><li>value=&quot;listCategories.action&quot; </li></ul><ul><li>id=&quot;${cat.id}&quot;/> </li></ul><ul><li><@ww.div id=&quot;children_${cat.id}&quot; </li></ul><ul><li>cssStyle=&quot;display: none&quot; </li></ul><ul><li>href=&quot;%{#url}&quot; </li></ul><ul><li>listenTopic = </li></ul><ul><li>&quot;children_${cat.id}&quot;/> </li></ul>
  29. 29. Tree widget example <ul><li>if (${childCount} > 0 { </li></ul><ul><li>var div = $(&quot;children_${id}&quot;); </li></ul><ul><li>var style = div.style; </li></ul><ul><li>if (style.display == &quot;none&quot;) { </li></ul><ul><li>style.display = &quot;&quot;; </li></ul><ul><li>} else { </li></ul><ul><li>style.display = &quot;none&quot;; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  30. 30. Validation <ul><li>Uses DWR; requires the DWR servlet installed </li></ul><ul><li>Note: remote calls return serialized objects (not HTML &quot;partials&quot;) </li></ul><ul><li>Is a very different style of AJAX </li></ul><ul><li>Uses onBlur events </li></ul><ul><li>Example: </li></ul><ul><ul><li><@ww.form action=&quot;createPerson&quot; </li></ul></ul><ul><ul><li>validate=&quot;true&quot;> </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li></@ww.form> </li></ul></ul>
  31. 31. Validation
  32. 32. Pitfalls <ul><li>Remember: there is no silver bullet </li></ul><ul><li>At the end of the day, your application is still a web site - don’t forget that </li></ul><ul><li>Excessive polling can lead to extreme load and/or thread starvation </li></ul><ul><li>Common functionality, such as the back button and printing, can become difficult or confusing for the user </li></ul><ul><li>Browser incompatibility can lead to two versions of the same application (see gmail) </li></ul>
  33. 33. Wrap up <ul><li>Built in WebWork features: </li></ul><ul><ul><li>Tabbed pane </li></ul></ul><ul><ul><li>Validation </li></ul></ul><ul><ul><li>Polling </li></ul></ul><ul><ul><li>More coming soon! </li></ul></ul><ul><li>A mix of AJAX technologies - the space is very fragmented (much like Java web frameworks!) </li></ul>
  34. 34. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×