Scribd
Upload
49 views34 pages

Webwork + Ajax: A Winning Combination

This document discusses how WebWork and AJAX form a winning combination for web applications. It provides examples of how to use AJAX techniques like tabbed panes, validation, and polling within WebWork applications. Key WebWork tags for building AJAX features are the @ww.div, @ww.a, and @ww.submit tags. The document cautions that AJAX can be overused and notes browser compatibility challenges. It concludes that WebWork offers built-in features to simplify common AJAX tasks.

Uploaded by

NACHO
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
49 views34 pages

Webwork + Ajax: A Winning Combination

This document discusses how WebWork and AJAX form a winning combination for web applications. It provides examples of how to use AJAX techniques like tabbed panes, validation, and polling within WebWork applications. Key WebWork tags for building AJAX features are the @ww.div, @ww.a, and @ww.submit tags. The document cautions that AJAX can be overused and notes browser compatibility challenges. It concludes that WebWork offers built-in features to simplify common AJAX tasks.

Uploaded by

NACHO
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 34

WebWork + AJAX

A winning combination
Patrick A. Lightbody
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"/>
</@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
Building blocks (cont)
• 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>
Stock quote example (cont.)
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
• Warning: Intelligent fallback can be difficult
and sometimes impossible!
Compatibility

<@ww.div href="%{#url}"
updateFreq="900000">
<@ww.action name="quote"
symbol="${symbol}"
executeResult="true"/>
</@ww.div>
Compatibility (cont.)

<div dojoType="BindDiv"
href="quote.action?symbol=GOOG"
refresh="900000">
<div class="quote">
GOOG: $82,000.00
</div>
</div>
Tabbed pane
• Two tags:
 @ww.tabbedPanel
 @ww.panel
• The panel tag extends the div tag
 tabName
 remote
• Usage:
<@ww.tabbedPanel …>
<@ww.panel …/>
<@ww.panel …/>
</@ww.tabbedPanel>
Tabbed Pane
Example
<@ww.tabbedPanel>
<@ww.panel tabName="Details">
<h1>Stock details</h1>
...
</@ww.panel>
<@ww.panel remote="true"
tabName="Price"
href="%{#url}"/>
<@ww.tabbedPanel>
Topic-based events
• Dojo supports an event system, donated by the
WebWork developers
• Any element, such as a div, may listen on multiple
topics
• Any element, such as an href or tab header, may
notify a topic
• What happens when the topic is notified is up to
the receiving element
• Important: topics get you away from
document.getElementXxx()
Tree widget: events in action

• A tree widget is actually one of the


simplest AJAX techniques to build
• Assume a model that provides a
getChildren() call, such as
Category.getChildren()
• Utilizes two building blocks: divs and links.
Tree widget
Tree widget example
• Requirements:
 An action that gets a list of children when given a
category ID
 A template to render the tree
 A template to kick off the initial tree display
 An action that returns JavaScript as the result
• Initial display can be done with the action tag:
<@ww.action name="listCategories.action"
executeResult="true"/>
Tree widget example
<#list categories as cat>
<#if cat.children.size > 0>
<#assign icon="plus"/>
<#else>
<#assign icon="square"/>
</#if>
<@ww.a notifyTopics="children_${cat.id}"
href="toggle.action?id=${cat.id}">
<img src="${icon}.gif"/>
</@ww.a>
[EXAMPLE CONTINUED]
</#list>
Tree widget example
<@ww.url id="url"
value="listCategories.action"
id="${cat.id}"/>
<@ww.div id="children_${cat.id}"
cssStyle="display: none"
href="%{#url}"
listenTopic =
"children_${cat.id}"/>
Tree widget example
if (${childCount} > 0 {
var div = $("children_${id}");
var style = div.style;
if (style.display == "none") {
style.display = "";
} else {
style.display = "none";
}
}
Validation
• Uses DWR; requires the DWR servlet installed
• Note: remote calls return serialized objects (not
HTML "partials")
• Is a very different style of AJAX
• Uses onBlur events
• Example:
<@ww.form action="createPerson"
validate="true">
...
</@ww.form>
Validation
Pitfalls
• Remember: there is no silver bullet
• At the end of the day, your application is still a
web site - don’t forget that
• Excessive polling can lead to extreme load and/or
thread starvation
• Common functionality, such as the back button
and printing, can become difficult or confusing for
the user
• Browser incompatibility can lead to two versions
of the same application (see gmail)
Wrap up

• Built in WebWork features:


 Tabbed pane
 Validation
 Polling
 More coming soon!
• A mix of AJAX technologies - the space is
very fragmented (much like Java web
frameworks!)
Questions?

You might also like