![Server-Side Code (Continued)
private static final String[][] animals =
{ {"aardvark", "aardvark"},{"alligator", "cocodrilo"},
{ aardvark , aardvark },{ alligator , cocodrilo },
{"antelope", "antílopo"}, {"baboon", "babuino"},
{"bat", "murciélago"}, {"bear", "oso"}, {"cat", "gato"},
{"camel", "camello"}, {"conch", "concha"}
};
private String makeAnimalList(String animalPrefix) {
animalPrefix = animalPrefix.toUpperCase();
AjaxXmlBuilder builder = new AjaxXmlBuilder();
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](https://image.slidesharecdn.com/ajaxtagsadvanced-13486619853895-phpapp02-120926072215-phpapp02/85/Ajax-Tags-Advanced-9-320.jpg)
Ajax Tags Advanced
- 1. © 2009 Marty Hall The AjaxTags Library: Advanced Features Originals 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 training courses at http://courses.coreservlets.com/. t htt // l t / Taught by the author of Core Servlets and JSP, More Servlets and JSP and this tutorial. Available at public JSP, tutorial venues, or customized versions can be held on-site at your organization. •C Courses d developed and t l d d taught b M t H ll ht by Marty Hall – 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 EElibrary (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo) or survey several Customized Java one Training: http://courses.coreservlets.com/ • Courses developed and taught by coreservlets.com experts (edited by Marty) Servlets, – Spring, Hibernate/JPA, 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. JSP, JSF 1.x & JSF EJB3, Ruby/Rails Developed and taught by well-known author and developer. At public venues or onsite at your location. Contact hall@coreservlets.com for details
- 2. Topics in This Section • Regions that display temporarily while server-side resource runs id • Autocomplete textboxes with associated values displayed in other textboxes • Prefunctions and postfunctions – Arbitrary JavaScript that runs before or after server-side server side 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.
- 3. Installation • Several required JAR files – In Eclipse: WebContent/WEB-INF/lib – In deployed app: WEB-INF/lib – Download from http://ajaxtags sourceforge net/ http://ajaxtags.sourceforge.net/ • Prototype and Scriptaculous JS files – In Eclipse: WebContent/scripts – In deployed app: scripts – Download from http://script.aculo.us/ • Simple installation – Download prebuilt starting-point project: ajaxtags-blank.zip j t bl k i • Download from 6 http://courses.coreservlets.com/Course-Materials/ajax.html Basic Setup: advanced.jsp (Covered in Previous Lecture) <!DOCTYPE ...> <%@ taglib uri="http://ajaxtags org/tags/ajax" uri http://ajaxtags.org/tags/ajax prefix="ajax" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"" /> <jsp:include page="/WEB-INF/includes/header.jsp"/> ... <title>Advanced AjaxTags Examples</title> </head> <body> <b d > ... </body></html> 7
- 4. Basic Setup: header.jsp (Covered in Previous Lecture) <% request.setAttribute("contextPath", request.getContextPath()); request getContextPath()); %> <script src="${contextPath}/scripts/prototype-1.4.0.js" type="text/javascript"></script> <script src="${contextPath}/scripts/scriptaculous.js" p { } p p j type="text/javascript"></script> <script src="${contextPath}/scripts/overlibmws.js" type="text/javascript"></script> <script src="${contextPath}/scripts/ajaxtags-1.2-beta2.js" type="text/javascript"></script> <link rel="stylesheet" href="${contextPath}/css/styles.css" h f "${ t tP th}/ / t l " type="text/css"/> 8 © 2009 Marty Hall ajax:autocomplete with 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.
- 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
- 7. © 2009 Marty Hall ajax:autocomplete with 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 –S Server-side resource returns a list with names that are id li ih h different from values • xmlBuilder.addItem("name1", "value1"); • I last section, names and values were th same In l t ti d l the – When name selected from dropdown, that name (value) put into the textfield that has the dropdown – Names shown in dropdown box under main textfield – When a value is selected from dropdown, secondary value placed into a different textfield • M i uses Main – When you have auxiliary information to display to user • E.g., show description when catalog ID selected g, p g – When you have associated values • E.g., word in another language 15
- 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
- 9. Server-Side Code (Continued) private static final String[][] animals = { {"aardvark", "aardvark"},{"alligator", "cocodrilo"}, { aardvark , aardvark },{ alligator , cocodrilo }, {"antelope", "antílopo"}, {"baboon", "babuino"}, {"bat", "murciélago"}, {"bear", "oso"}, {"cat", "gato"}, {"camel", "camello"}, {"conch", "concha"} }; private String makeAnimalList(String animalPrefix) { animalPrefix = animalPrefix.toUpperCase(); AjaxXmlBuilder builder = new AjaxXmlBuilder(); 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
- 10. © 2009 Marty Hall ajax:updateField with p 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 – Y li a regular JavaScript function as the value of the You list l J S i f i h l f h postFunction or preFunction attribute • Almost all tags support postFunction and preFunction – The postFunction fires after the server-side resource is finished – The preFunction fires just before the server-side resource p j is called • Main uses – preFunction • To make an “I am working” message or image • Form field validation – postFunction • To highlight results or show a success message 21
- 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
- 14. © 2009 Marty Hall ajax:tabPanel with 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 • Approach – You list a regular JavaScript function as the value of the errorFunction attribute • Almost all AjaxTags tags support errorFunction – If server-side resource returns an HTTP status code other than 200, the errorFunction is triggered • Main uses – Error messages – Default values when server-side resource is unavailable server side 29
- 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
- 17. © 2009 Marty Hall ajax:htmlContent with 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 – If you use sourceClass instead then any element that instead, has that CSS classname can be a trigger • The element must support onclick (push buttons, links, radio buttons checkboxes, etc ) buttons, checkboxes etc.) • Main use – Multiple ways of triggering an action 35
- 18. JSP Example <fieldset> <legend>ajax:htmlContent with Multiple Triggers</legend> <form> <label for="state2">State:</label> <select id="state2"> <option value="">Select State</option> <option value="Maryland">Maryland</option> ... <option value="New York">New York</option> </select> <label for="city2">City:</label> <select id="city2" disabled="disabled"> <option value="">Select City</option> </select> <br/><hr align="left" width="500"/> <input type="button" value="Show Population" class="trigger"/> <a href="javascript://no-op" class="trigger">Show Population</a> <input type="radio" class="trigger"/>Show Population <br/><hr align="left" width="500"/> <span id="population"></span> </form> 36 JSP Example (Continued) <ajax:select baseUrl="${contextPath}/city-finder.ajax" ${ }/ y j source="state2" target="city2" parameters="state={state2}"/> <ajax:htmlContent baseUrl="${contextPath}/population-finder.ajax" sourceClass="trigger" target="population" parameters="state={state2},city={city2}"/> </fieldset> 37
- 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
- 20. Summary • indicator attribute – Specifies region that displays temporarily while server-side resource server side runs • Returning a list for ajax:autocomplete with names different from values – Names get shown in the dropdown list – Name gets inserted in source textfield • I e the textfield that actually had dropdown list I.e., – Value gets inserted in target textfield • preFunction and postFunctions attributes – Arbitrary JavaScript that runs before or after server-side resource • errorFunction attribute – Function that runs when server has error • sourceClass attribute – 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. Developed and taught by well-known author and developer. At public venues or onsite at your location.