5. Basic Idea
• Approach
– indicator attribute designates section (usually div or span)
that will be enabled while results are being loaded
• It is disabled to start with and disabled again when results
with,
come back
• Often contains animated GIF showing progress
• Main use
– Gives user feedback when server-side resource takes a
long time
g
• Note
– You can reproduce indicator region in other places by
using Effect.Show from Scriptaculous
• See later lectures on Scriptaculous
10
JSP Example
<fieldset>
<legend>ajax:autocomplete with indicator</legend>
g j p / g
<form>
<label for="language">Programming language:</label>
<input type="text" name="language" id="language"/>
<span id "indicatorRegion" style "display:none;">
id="indicatorRegion" style="display:none;">
<img src="${contextPath}/images/busy-indicator.gif"/>
Loading...
</span>
</form>
<ajax:autocomplete
source="language"
target= language
target="language"
baseUrl="${contextPath}/slow-language-completer.ajax"
className="autocomplete"
minimumCharacters="1"
indicator="indicatorRegion"/>
</fieldset>
11
6. Server-Side Code
public class SlowLanguageCompleter LanguageCompleter
shown in previous
extends LanguageCompleter { section
@Override
public String getXmlContent(HttpServletRequest request,
HttpServletResponse
response)
throws Exception {
try { Thread.sleep(5000); } catch(Exception e) {}
y p( ) ( p )
return(super.getXmlContent(request, response));
}
}
12
Results
13
8. JSP Example
<fieldset>
<legend>ajax:autocomplete with linked fields</legend>
<form>
<label for="englishAnimal">English animal:</label>
<input type="text" id="englishAnimal"/>
type text id englishAnimal />
<label for="spanishAnimal">Spanish animal:</label>
<input type="text" id="spanishAnimal"/>
</form>
/
<ajax:autocomplete
source="englishAnimal"
target="spanishAnimal"
baseUrl="${contextPath}/animal-completer.ajax"
parameters="englishAnimal={englishAnimal}"
className="autocomplete"
minimumCharacters="1"/>
</fieldset>
16
Server-Side Code
import javax.servlet.http.*;
import org ajaxtags helpers *;
org.ajaxtags.helpers. ;
import org.ajaxtags.servlets.*;
p
public class AnimalCompleter extends BaseAjaxServlet {
p j
@Override
public String getXmlContent(HttpServletRequest request,
HttpServletResponse response)
throws Exception {
String animalPrefix =
request.getParameter("englishAnimal");
String animalList = makeAnimalList(animalPrefix);
St i i lLi t k A i lLi t( i lP fi )
return(animalList);
}
17
11. Script
• scripts/postFunction.js
– N that i i using scriptaculous calls
Note h it is i i l ll
function showConversionSuccess() {
// Temporarily highlight Celsius and Kelvin fields
p y g g
new Effect.Highlight('c');
new Effect.Highlight('k');
// Turn on successMessage div, then fade it out.
Element.show('successMessage');
( g );
setTimeout("Effect.DropOut('successMessage');", 2000);
}
• advanced.jsp Loads scriptaculous and Prototype.
Defines contextPath variable.
<head>
...
<jsp:include page="/WEB-INF/includes/header.jsp"/>
<script src="${contextPath}/scripts/postFunction.js"
p ${ }/ p /p j
type="text/javascript"></script>
<title>Advanced AjaxTags Examples</title>
</head>
22
JSP Example
<fieldset>
<legend>ajax:updateField with p
g j p postFunction</legend>
/ g
<form>
<label for="f">Enter temperature in Fahrenheit:</label>
<input type="text" id="f"/>
<input type "button" id "convertButton" value "Convert"/>
type="button" id="convertButton" value="Convert"/>
<hr width="500" align="left"/>
<label for="c">Temperature in Celsius:</label>
<input type="text" id="c"/>
<label for="k">Temperature in Kelvin:</label>
<input type="text" id="k"/><p/>
<div id="successMessage" style="display:none"
class= temporaryMessage >
class="temporaryMessage">
Calculation complete</div>
</form>
23
12. JSP Example (Continued)
<ajax:updateField
source= f
source="f"
target="c,k"
baseUrl="${contextPath}/temperature-converter.ajax"
action= convertButton
action="convertButton"
parameters="f={f}"
parser="new ResponseXmlParser()"
postFunction showConversionSuccess />
postFunction="showConversionSuccess"/>
</fieldset>
24
Server-Side Code
• Same TemperatureConverter as in previous
section
i
– Given a temperature in Fahrenheit, returns a list of
corresponding temperatures in Celsius and Kelvin
– Use of postFunction does not change how server-side
resource works
25
13. Style Sheet Entries
.temporaryMessage {
border:2px solid blue;
background-color:#eeffee;
color:#009900;
font-weight:
font weight: bold;
}
26
Results
Immediately after
pressing button.
Two seconds later.
27
15. Script
• scripts/errorFunction.js
function warn() {
alert("Server error!nn" +
"Did you forget to specifyn" +
"a default tab?");
" d f lt t b?")
}
• error.jsp
<head>
...
<jsp:include page="/WEB-INF/includes/header.jsp"/>
<script src="${contextPath}/scripts/errorFunction.js"
type="text/javascript"></script>
<title>Advanced AjaxTags Examples</title>
</head>
30
JSP Example
<fieldset>
<legend>ajax:tabPanel</legend>
<h2>Largest Cities in Selected Northeast States</h2>
<div class="tabPanelWrapper">
<ajax:tabPanel
panelStyleId="panel"
contentStyleId="content"
panelStyleClass="tabPanel" Should say defaultTab="true".
contentStyleClass="tabContent" Without a default tab, tabPanel tries
currentStyleClass="currentTab" to load contextPath/null.
errorFunction="warn">
<ajax:tab
caption="Maryland"
baseUrl="${contextPath}/population-finder.ajax"
parameters="state=Maryland,city=Baltimore"/>
<ajax:tab
caption="Virginia"
baseUrl="${contextPath}/population-finder.ajax"
parameters="state=Virginia,city=Virginia Beach"/>
...
</ajax:tabPanel>
31 </div></fieldset>
16. Server-Side Code
• Same PopulationFinder as in previous
section
i
– Given a state and a city, returns the population
– Use of errorFunction does not change how server-side
server side
resource works
32
Results
33
19. Server-Side Code
• Same PopulationFinder as in previous
examples
l
– Given a state and a city, returns the population
– Type of trigger does not change how server-side resource
server side
works
38
Results
39