Presented by:
Patrick A. Lightbody

---

[attachment=11163]
WebWork + AJAX
• A winning combination
Introduction
What is WebWork?
• What is OpenSymphony?
• The state of web applications
 Yesterday, today, and tomorrow
Who is Patrick?
Is AJAX here to stay?
• eBook now available
• Print version ready “any day now”
• A free copy will be given away at the end of the session
• AJAX
• AJAX = Asyncronous JavaScript and XML
• Examples
 Gmail
 Google maps
 Jive group chat
 Microsoft Outlook Web Access
• All use XmlHttpRequest
 Platform compatibility?
• A simple action
• A look at the general flow of WebWork actions
• A simple example of the template library’s power
• Remember: all the AJAX features of WebWork are built using the template library
• AJAX is really just a bunch of JavaScript, HTML, and sloppy logic smashed together in a big train wreck!
Clean code…
<@ww.form action="createPerson"
method="post">
<@ww.textfield label="Name"
name="person.name"/>
<@ww.textfield label="Email"
name="person.email"/>
<@ww.submit value="Create person"/>
</[at]ww.form>
• … is still really a train wreck
<form id="updatePerson"
action="updatePerson.action"
method="post">
<table>
<tr>
<td>Name:</td>
<td><input id="updatePerson_person.name"
name="person.name"/></td>
</tr>
...
</table>
</form>
Uses of AJAX
• What exactly does it mean to “ajaxify” your web application?
• AJAX is a technique; not a technology.
• Caution: AJAX can be overused!
• Common AJAX techniques:
 Tabbed pane
 Validation
 Polling
 Tree widget
Building blocks
• Three core building blocks/tags:
 @ww.div
 @ww.a
 @ww.submit
• divs are where things “happen”
• Links and submit buttons can trigger events
• Two frameworks used:
 DWR: Remote invocation service for Java <-> JavaScript
 Dojo: Language/server-agnostic JavaScript framework
• Two styles of AJAX:
 DOM manipulation (DWR)
 "Partial pages" (Dojo)
• WebWork provides three Dojo widgets:
 BindDiv
 BindAnchor
 BindButton
Div tag
• Attributes:
 href
 updateFreq
 delay
 loadingText
 errorText
 showErrorTransportText
 listenTopics
 afterLoading
• Usage:
<@ww.div …/>
• Polling
• Simple use of the @ww.div tag!
 Just set the href and the frequency
• Note: remote action returns HTML
• Example:
<@ww.url id=“url” value=“mailbox.action”
mailboxId=“${mailboxId}”/>
<@ww.div href=“%{#url}” updateFreq=“2000”/>
Stock quote example
<#list symbols as symbol>
<@ww.url id="url"
value="quote.action"
symbol="${symbol}"/>
<@ww.div href="%{#url}"
updateFreq="900000"/>
</#list>
public class Quote {
String symbol;
Stock stock;
public String execute() {
stock = StockMgr.lookup(symbol);
return SUCCESS;
}
}
• Stock quote example (cont.)
<div class="quote">
${stock.symbol}: ${stock.price}
</div>
• Stock quote example (cont.)
<div dojoType="BindDiv"
href="quote.action?symbol=GOOG"
refresh="900000"/>
Compatibility
• That's great, but what about older browsers?
• With the stock quote example, they would see nothing!
• WebWork and Dojo address this as much as possible