Date post: | 02-Jun-2018 |
Category: |
Documents |
Upload: | kishore-reddy |
View: | 219 times |
Download: | 0 times |
of 20
8/11/2019 AjaxTags Advanced
1/20
2009 Marty Hall
Advanced FeaturesOriginals of Slides and Source Code for Examples:
http://courses.coreservlets.com/Course-Materials/ajax.html
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
2009 Marty Hall
For live Ajax & GWT training, see trainingcourses a p: courses.coreserv e s.com .Taught by the author of Core Servlets and JSP, More
, .venues, or customized versions can be held on-site at
your organization.
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
ourses eve ope an aug y ar y a Java 6, intermediate/beginning servlets/JSP, advanced servlets/JSP, Struts, JSF 1.x & 2.0, Ajax, GWT, custom mix of topics
Ajax courses can concentrate on one library (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo) or survey several
Courses developed and taught by coreservlets.com experts (edited by Marty) Spring, Hibernate/JPA, EJB3, Ruby/Rails
Contact [email protected] for details
8/11/2019 AjaxTags Advanced
2/20
Topics in This Section
Regions that display temporarily whileserver-side resource runs
Autocomplete textboxes with associated
Prefunctions and postfunctions -
resource
Functions that run when server has error
Multiple triggers for server-side resources
4
2009 Marty Hall
Setup/Review
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
8/11/2019 AjaxTags Advanced
3/20
Installation
Several required JAR files In Eclipse: WebContent/WEB-INF/lib
In deployed app: WEB-INF/lib . .
Prototype and Scriptaculous JS files
In deployed app: scripts
Download from http://script.aculo.us/
Simple installation
Download prebuilt starting-point project:a ax ags- an .z p
Download fromhttp://courses.coreservlets.com/Course-Materials/ajax.html
6
Basic Setup: advanced.jsp
=" " .
prefix="ajax" %>
head>
8/11/2019 AjaxTags Advanced
4/20
Basic Setup: header.jsp
script src="${contextPath}/scripts/ajaxtags-1.2-beta2.js"
type="text/javascript">
8
2009 Marty Hall
indicator
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
8/11/2019 AjaxTags Advanced
5/20
Basic Idea
Approach indicator attribute designates section (usually div or span)
that will be enabled while results are being loaded ,
come back
Often contains animated GIF showing progress
Gives user feedback when server-side resource takes a
lon time
Note
You can reproduce indicator region in other places byusing Effect.Show from Scriptaculous
See later lectures on Scriptaculous10
JSP Example
a ax:autocom lete with indicator
Programming language:
= =
Loading...
11
8/11/2019 AjaxTags Advanced
6/20
Server-Side Code
public class SlowLanguageCompleter LanguageCompletershown in previous
@Override
public String getXmlContent(HttpServletRequest request,
section
response)
throws Exception {
try { Thread.sleep(5000); } catch(Exception e) {}
return(super.getXmlContent(request, response));
}
}
12
Results
13
8/11/2019 AjaxTags Advanced
7/20
2009 Marty Hall
Linked Fields
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Basic Idea
Approach erver-s e resource returns a st w t names t at are
different from values xmlBuilder.addItem("name1", "value1"); n as sec on, names an va ues were e same
When name selected from dropdown, that name (value) put intothe textfield that has the dropdown
When a value is selected from dropdown, secondary
value placed into a different textfield
a n usesWhen you have auxiliary information to display to user
E. ., show descri tion when catalo ID selected
When you have associated values E.g., word in another language
15
8/11/2019 AjaxTags Advanced
8/20
JSP Example
English animal:
Spanish animal:
/form>
16
Server-Side Codeimport javax.servlet.http.*;
*. . .
import org.ajaxtags.servlets.*;
public class AnimalCompleter extends BaseAjaxServlet {
@Override
public String getXmlContent(HttpServletRequest request,
HttpServletResponse response)throws Exception {
String animalPrefix =
request.getParameter("englishAnimal");
r ng an ma s = ma e n ma s an ma re x ;
return(animalList);
}
17
8/11/2019 AjaxTags Advanced
9/20
Server-Side Code (Continued)
private static final String[][] animals =
"aardvark" "aardvark" "alli ator" "cocodrilo"
{"antelope", "antlopo"}, {"baboon", "babuino"},
{"bat", "murcilago"}, {"bear", "oso"}, {"cat", "gato"},{"camel", "camello"}, {"conch", "concha"}
};
private String makeAnimalList(String animalPrefix) {
animalPrefix = animalPrefix.toUpperCase();
=
for(String[] animalPair: animals) {
String englishAnimal = animalPair[0];
String spanishAnimal = animalPair[1];
if(englishAnimal.toUpperCase().startsWith(animalPrefix)) {
builder.addItem(englishAnimal, spanishAnimal);
}
return(builder.toString());
}
}18
Results
19
8/11/2019 AjaxTags Advanced
10/20
2009 Marty Hall
postFunction
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Basic Idea
Approach ou st a regu ar ava cr pt unct on as t e va ue o t e
postFunction or preFunction attribute Almost all tags support postFunction and preFunction
The postFunction fires after the server-side resource isfinished
The preFunction fires just before the server-side resourceis called
Main uses
To make an I am working message or image Form field validation
To highlight results or show a success message
21
8/11/2019 AjaxTags Advanced
11/20
Script
scripts/postFunction.js ote t at t s us ng scr ptacu ous ca s
function showConversionSuccess() {// Temporarily highlight Celsius and Kelvin fieldsnew Effect.Highlight('c');new Effect.Highlight('k');// Turn on successMessage div, then fade it out.Element.show('successMessa e');setTimeout("Effect.DropOut('successMessage');", 2000);
}
advanced.jsp Loads scriptaculous and Prototype.Defines contextPath variable.
...
Advanced AjaxTags Examples
22
JSP Example
a ax:u dateField with ostFunction
Enter temperature in Fahrenheit:
= = =
Temperature in Celsius:
Temperature in Kelvin:
8/11/2019 AjaxTags Advanced
12/20
JSP Example (Continued)
8/11/2019 AjaxTags Advanced
13/20
Style Sheet Entries
.temporaryMessage {
background-color:#eeffee;
color:#009900;
-
}
26
Results
Immediately after
pressing button.
Two seconds later.
27
8/11/2019 AjaxTags Advanced
14/20
2009 Marty Hall
errorFunction
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Basic Idea
ApproachYou list a regular JavaScript function as the value of the
errorFunction attribute
If server-side resource returns an HTTP status code other
than 200, the errorFunction is triggered Main uses
Error messages
-
29
8/11/2019 AjaxTags Advanced
15/20
Script
scripts/errorFunction.jsfunction warn() {
alert("Server error!\n\n" +
"Did you forget to specify\n" +
a e au a ;
}
error.jsp
...
Advanced AjaxTags Examples
30
JSP Example
ajax:tabPanel
Largest Cities in Selected Northeast States
...
31
8/11/2019 AjaxTags Advanced
16/20
Server-Side Code
Same PopulationFinder as in previoussection
Given a state and a city, returns the population -
resource works
32
Results
33
8/11/2019 AjaxTags Advanced
17/20
2009 Marty Hall
Multiple Triggers
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Basic Idea
Approach In previous section, we used source to designate button
Gives the ID of the element that will trigger the action
,has that CSS classname can be a trigger
The element must support onclick (push buttons, links,, , .
Main useMulti le wa s of tri erin an action
35
8/11/2019 AjaxTags Advanced
18/20
JSP Example
ajax:htmlContent with Multiple Triggers
State:
Select State
Maryland
...
New York
City:
Select City
Show Population
Show Population
36
JSP Example (Continued)
baseUrl="${contextPath}/population-finder.ajax"
sourceClass="trigger"
target="population"parameters="state={state2},city={city2}"/>
37
8/11/2019 AjaxTags Advanced
19/20
Server-Side Code
Same PopulationFinder as in previousexamples
Given a state and a city, returns the population -
works
38
Results
39
8/11/2019 AjaxTags Advanced
20/20
Summary
indicator attribute -
runs
Returning a list for ajax:autocomplete with names
Names get shown in the dropdown listName gets inserted in source textfield
. .,
Value gets inserted in target textfield
preFunction and postFunctions attributes -
errorFunction attribute
Function that runs when server has error
Designates elements that trigger server-side resources
40
2009 Marty Hall
Questions?
Customized Java EE Training: http://courses.coreservlets.com/Servlets JSP JSF 1 x & JSF 2 0 Struts Classic & Struts 2 Ajax GWT Spring Hibernate/JPA Java 5 & 6