The Script.aculo.us JavaScript Library Part I: Ajax-Specific Features

Transcription

1 2009 Marty Hall The Script.aculo.us JavaScript Library Part I: Ajax-Specific Features Originals of Slides and Source Code for Examples: Customized Java EE Training: 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 Marty Hall For live Ajax & GWT training, see training courses at t / Taught by the author of Core Servlets and JSP, More Servlets and JSP, and this tutorial. Available at public venues, or customized versions can be held on-site at your organization. Courses developed d and taught 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 Customized can concentrate Java on EE one library Training: (jquery, Prototype/Scriptaculous, Ext-JS, Dojo) or survey several Courses developed and taught by coreservlets.com experts (edited by Marty) Servlets, JSP, Spring, JSF Hibernate/JPA, 1.x & JSF 2.0, EJB3, Struts Ruby/Rails Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known Contact author hall@coreservlets.com and developer. At public for details venues or onsite at your location.

2 Topics in This Section Overview of Scriptaculous Installation and documentation Autocomplete textfields Local version Ajax version In-place Editor Free-text values Values from combo box Marty Hall Introduction Customized Java EE Training: 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 Overview Foundation Built on top of fprototype Ajax-specific features Autocompleting textfields Textfields with dropdown list of matching choices Covered in first half of this section In-place editors Clickable text that you can edit and send to server Covered in second half of this section General features Visual effects (fade in, fade out, highlighting) Covered in next section Drag and drop Covered in later section 7 Downloading and Installation 8 Download Unzip and grab.js files out of src folder Usually put in subdirectory of scripts since there are many files This tutorial corresponds to Scriptaculous Online documentation Online forum / / i Prerequisite Scriptaculous requires Prototype. I am using 1.6. So your HTML page needs to load both libraries See separate lectures on Prototype

4 2009 Marty Hall Autocompleter.Local Customized Java EE Training: 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. Autocompleter.Local Idea Specify JavaScript array that has choices for textfield. Dropdown box shown with choices that start with what has been typed so far Steps Make an instance of Autocompleter.Local new Autocompleter.Local(textFieldID, divid, array) Enable it when page loads window.onload onload = function() { new Autocompleter.Local(...); ; Prototype gurus might use document.observe("dom:loaded",...) instead of window.onload Make an empty div with a designated CSS name <div id="divid" class="somecssname"></div> "></di > Attach style sheet that makes div absolutely positioned, puts border on div, turns off bullets for ul lists, and makes a different background color for li.selected 10

5 Autocompleter.Local Example: JavaScript var langstring = "Java,C,C++,PHP,Visual Basic,..."; var langarray = languagestring.split( split(","); window.onload = function() { new Autocompleter.Local( Local("langField1", langfield1 "langmenu1", langarray); ; function googlesearch(id) { var language = getvalue(id); window.location.href = " + language; 11 function getvalue(id) { return(escape(document.getelementbyid(id).value)); Autocompleter.Local Example: HTML Header <!DOCTYPE...> <html xmlns=" / <head><title>scriptaculous and Autocomplete</title> <link rel="stylesheet" href="./css/styles.css" type="text/css"/> <script src="./scripts/prototype.js" type="text/javascript"></script> <script src= "./scripts/scriptaculous/scriptaculous.js?load=effects,controls" type="text/javascript"></script> <script src="./scripts/autocomplete.js" type="text/javascript"></script> </head> 12 If you know you will only use certain parts of scriptaculous library, you can save download time by loading only some of it. To load all of it, just omit the "load=" part. I.e., <script src=".../scriptaculous.js"...></script>. Autocomplete is in controls, but relies on effects internally.

6 Autocompleter.Local Example: Main HTML <body>... <fieldset> <legend>autocomplete.local</legend> <form action="#"> <label for="langfield1">programming language:</label> <input type="text" id="langfield1"/> <input type="button" value="search on Language" onclick="googlesearch('langfield1')"/><br/> <div id="langmenu1" class="autocomplete"></div> </form> </fieldset>... </body></html> 13 Autocompleter.Local Example: CSS.autocomplete { position: absolute; color: #333333; background-color: #ffffff; border: 1px solid #666666; font-family: Arial, sans-serif; overflow: hidden;.autocomplete ul { padding: 0; margin: 0; list-style: none; overflow: auto; 14

7 Autocompleter.Local Example: CSS (Continued).autocomplete li { display: block; white-space: nowrap; cursor: pointer; margin: 0px; padding-left: 5px; padding-right: 5px; border: 0px solid #ffffff;.autocomplete li.selected { background-color: co o #cceeff; border-top: 1px solid #99bbcc; border-bottom: 1px solid #99bbcc; 15 Autocompleter.Local Example: Results 16

8 2009 Marty Hall Ajax.Autocompleter Customized Java EE Training: 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. Ajax.Autocompleter 18 Idea Specify URL that computes list of choices. Dropdown box shown with choices that start with what has been typed so far Steps: summary Same steps as with Autocompleter.Local except Specify url instead of array (url should return <ul> list) Steps Use class Ajax.Autocompleter instead of Autocompleter.Local Make an instance of Ajax.Autocompleter new Ajax.Autocompleter(textFieldID, divid, url) Enable it when page loads window.onload = function() { new Ajax.Autocompleter(...); ; Make an empty div with a designated CSS name <div id="divid" class="somecssname"></div> Attach same style sheet as with Autocompleter.Local

9 Ajax.Autocompleter Example: JavaScript var langstring = "Java,C,C++,PHP,Visual Basic,..."; var langarray = languagestring.split( split(","); window.onload = function() { new Autocompleter.Local("langField1", "langmenu1", langarray); new Ajax.Autocompleter("langField2", "langmenu2", "languages"); ; This is the relative URL. By default it will be passed POST data of name-of-langfield2=value-of-langfield2 19 Ajax.Autocompleter Example: HTML <fieldset> <legend>ajax.autocomplete</legend> Autocomplete</legend> <form action="#"> <label for="langfield2">programming language:</label> <input type="text" id="langfield2" name="langprefix"/> <input type="button" value="search on Language" onclick="googlesearch('langfield2')"/><br/> <div id="langmenu2" class="autocomplete"></div> </form> </fieldset> By default, name of field is parameter name 20

10 Ajax.Autocompleter Example: Servlet public class LanguageCompleter extends HttpServlet { private static final String languagestring = "Java,C,C++,..."; private static final String[] languagearray = languagestring.split(","); 21 public void doget(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { response.setheader("cache-control", "no-cache"); response.setheader("pragma", "no-cache"); String languageprefix = request.getparameter("langprefix"); List<String> languages = findlanguages(languageprefix); request.setattribute("languages", languages); String outputpage = "/WEB-INF/results/language-list.jsp"; RequestDispatcher dispatcher = request.getrequestdispatcher(outputpage); dispatcher.include(request, response); The name (not id!) of textfield was "langprefix". Ajax.Autocompleter Example: Servlet (Continued) public void dopost(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { doget(request, response); private List<String> findlanguages(string languageprefix) { languageprefix = languageprefix.touppercase(); List<String> languages = new ArrayList<String>(); for(string language: languagearray) { if(language.touppercase().startswith(languageprefix)) { languages.add(language); return(languages); 22

11 Ajax.Autocompleter Example: JSP taglib uri=" prefix="c" %> <ul> <c:foreach var="language" items="${languages"> <li>${language</li> </c:foreach> </ul> 23 Return value of URL should be <ul> <li>...</li>... <li>...</li> </ul> Style sheet on client will suppress the bullets. Ajax.Autocompleter Example: web.xml <servlet> <servlet-name>languagecompleter</servlet-name> <servlet-class> coreservlets.languagecompleter </servlet-class> </servlet> <servlet-mapping> <servlet-name>languagecompleter</servlet-name> <url-pattern>/languages</url-pattern> </servlet-mapping> 24

12 Ajax.Autocompleter Example: Results Marty Hall Autocompleter Options Customized Java EE Training: 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.

13 Autocompleter Options Idea Autocompleter.Local and Ajax.Autocompleter accept an options array as the fourth argument new Ajax.Autocompleter(fieldID, Autocompleter(fieldID divid, url, { opt1:..., opt2:...,... ); Legal properties for both classes autoselect (default: false) Should value automatically be inserted into textfield if there is only one matching choice? frequency (default: 0.4) Interval in seconds between attempts to autocomplete minchars (default: 1) The number of characters before autocompletion kicks in 27 Autocompleter Options (Continued) 28 Options for Autocompleter.Local choices (default 10) Maximum number of entries to display partialsearch (default true) Should match be made at beginning of any word? False means to match beginning of first word only. partialchars (default 2) Number of characters before partial search kicks in. When number of chars is greater or equal to minchars but less than partialchars, you get a non-partial search (first word). fullsearch (default false) Should match be anywhere? False means to match only at the beginning of each candidate. selector (default: function that searches array) Function that does real work of doing match and building ul list.

14 Autocompleter Options (Continued) Options for Ajax.Autocompleter indicator (default: none) Id of element that should be shown while waiting for server result, then hidden again paramname (default: name of textfield) tfi parameter name sent to server (parameter value is textfield value, of course) parameters (default: empty) Extra string sent to server (fixed parameters) tokens (default: empty) Array of delimeters: each entry outside delimeters is autocompleted separately afterupdateelement (default: none) Function to run when user makes choice. Lets you respond automatically to selections. 29 Autocompleter Options Example: JavaScript var langstring = "Java,C,C++,PHP,Visual Basic,..."; var langarray = languagestring.split( split(","); window.onload = function() { new Autocompleter.Local( Local("langField1", langfield1 "langmenu1", langarray); new Ajax.Autocompleter("langField2", "langmenu2", "languages"); new Ajax.Autocompleter("langField3", "langmenu3", "languages-slow", { indicator: "indicatorregion", paramname: "langprefix"); ; 30

15 Autocompleter Options Example: HTML <fieldset> <legend>ajax.autocomplete Autocomplete with Indicator</legend> <form action="#"> <span id="indicatorregion" style="display:none;"> <img src="images/busy-indicator.gif"/> g Loading... </span><br/> <label for="langfield3">programming language:</label> <input type="text" id="langfield3" name="bad-name"/> <input type="button" value="search on Language" onclick="googlesearch('langfield3')"/><br/> <div id="langmenu3" class="autocomplete"></div> </form> </fieldset> 31 Autocompleter Options Example: Java public class SlowLanguageCompleter extends LanguageCompleter { public void doget(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { try { Thread.sleep(2000); catch(interruptedexception ie) { super.doget(request, response); 32

16 Autocompleter Options Example: web.xml <servlet> <servlet-name>slowlanguagecompleter</servlet-name> <servlet-class> coreservlets.slowlanguagecompleter </servlet-class> </servlet> <servlet-mapping> <servlet-name>slowlanguagecompleter</servlet-name> <url-pattern>/languages-slow</url-pattern> </servlet-mapping> 33 Autocompleter Options Example: Results 34

17 2009 Marty Hall In-Place Editors Customized Java EE Training: 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. In-Place Editors Idea Text that you can click on, edit, and send to server Text is highlighted when mouse over it Text passed to server as value request parameter Text shown as Saving Saving... while waiting for server Value returned from server is new textual value Might not be exactly what user entered Basics new Ajax.InPlaceEditor("id-of-element", "url"); Click on text to get editable textfield new Ajax.InPlaceCollectionEditor ("id-of-element", "url" { collection: ["Option1",... "OptionN"]); Click on text to get select box of options Documentation 36

18 InPlaceEditor Example JavaScript window.onload = function() { new Ajax.InPlaceEditor("element-to-edit", "show-value.jsp"); ; HTML <h2 id="element-to-edit">here is Some Text</h2> JSP <% try { Thread.sleep(2000); catch(interruptedexception t t ti ie) { %>You sent "${param.value" 37 InPlaceEditor Example: Results 38

19 InPlaceCollectionEditor Example JavaScript window.onload d = function() { new Ajax.InPlaceEditor("element-to-edit", "show-value.jsp"); new Ajax.InPlaceCollectionEditor ("flyer-status", "show-value.jsp", { collection: ["Silver", "Gold", "Platinum", "Wood", "Hay", "Stubble"]); ; HTML <h2>frequent Flyer Status: <span id="flyer-status">silver</span></h2> JSP <% try { Thread.sleep(2000); catch(interruptedexception ie) { %>You sent "${param.value" 39 InPlaceCollectionEditor Example: Results 40

20 In-Place Editor Options: Basic Options 41 okbutton (default: true) Should you use "ok" button? Often set to false. oktext (default: "ok") Text of confirmation i button cancellink (default: true) Should you have "cancel" link? savingtext (default "Saving...") Text to show while waiting for server response clicktoedittext (default: "Click to edit") Text to show in tooltip when mouse hovers over text paramname (default: "value") Request parameter name In-Place Editor Options: Ajax.Request Options 42 Idea You can use ajaxoptions to specify an options object that gets passed to the underlying Ajax.Request object new Ajax.InPlaceEditor( InPlaceEditor("id" id, "url", { ajaxoptions: { blah ); For {blah above, you can use all of the same options as discussed in the earlier section on the Prototype Ajax libraries Most important usage: extra parameters You are editing a first name, but what customer id does that first name go with? var params = { param1: $("div-id").innerhtml, param2: $F("textfield-id"); var options = { parameters: params new Ajax.InPlaceEditor("id", "url", { ajaxoptions: options );

21 In-Place Editor Options: Collection Options collection Array of choices loadcollectionurl URL that returns JavaScript array of choices loadcollectiontext Text to show while waiting for server to send array of choices 43 In-Place Editor Options: Styling Options highlightcolor (default: pale yellow) Color to show when mouse is over and when result first comes back from server highlightendcolor (default: white) Color to show temporarily when hightlighting finishes hoverclassname, formclassname, loadingclassname, savingclassname (defaults: none, "inplaceeditor-form", "inplaceeditor- loading", "inplaceeditor-saving") i ") CSS name of elements at different stages formid id of form that is created when you click 44

22 In-Place Editor Options: Callback Options 45 onenterhover Defaults to setting background color onleavehover Df Defaults to fading fdi out background color onentereditmode onfailure Defaults to showing error message oncomplete This is often used when you are doing server-side validation of values. You can check a custom header from the server and show error message if needed. onleaveeditmode Advanced Example: JavaScript 46 window.onload = function() { var options = { okbutton: false, clicktoedittext: "Click to update your info" ; new Ajax.InPlaceEditor("firstName", "update-firstname", options); new Ajax.InPlaceEditor( InPlaceEditor("lastName" lastname, "update-lastname", options); new Ajax.InPlaceEditor(" ", "update- ", options); new Ajax.InPlaceEditor("flyerNum", "update-flyernum", options); ;

23 Advanced Example: Servlet for Initial Page 47 public class ShowTraveler extends HttpServlet { public void doget(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { response.setheader("cache-control", "no-cache"); response.setheader("pragma", "no-cache"); HttpSession session = request.getsession(); Traveler traveler = (Traveler)session.getAttribute("traveler"); if (traveler == null) { traveler = new Traveler(); session.setattribute("traveler", traveler); String outputpage = "/WEB-INF/results/show-traveler.jsp"; RequestDispatcher dispatcher = request.getrequestdispatcher(outputpage); dispatcher.include(request, response); Advanced Example: JSP for Initial Page... <ul style="font-size: size: 18px"> <li>first name: <span id="firstname">${traveler.firstname</span> </li> <li>last name: <span id="lastname">${traveler.lastname</span> </li> <li> address: <span id=" ">${traveler. </span> </li> <li>frequent Flyer Number: <span id="flyernum">${traveler.flyernum</span> </li> </ul>... 48

24 Advanced Example: Helper Class for Initial Page public class Traveler implements Serializable { private String firstname = "Joe"; private String lastname = "Traveler"; private String = "joe@gmail.com"; private String flyernum = "a1234"; public Traveler(String firstname, String lastname, String , String flyernum) { setfirstname(firstname); setlastname(lastname); set ( ); setflyernum(flyernum); public Traveler () { // Standard getters and setters 49 Advanced Example: Initial Page: Results 50

25 Advanced Example: Servlets for Updating Purpose These are the servlets specified earlier in the Ajax.InPlaceEditor constructors update-firstname firstname, update-lastname lastname, update- , update-flyernum Behavior They look up the session, get a Traveler object from the session, then store first name, last name, etc. in that object They also have a delay to simulate use on a loaded network This lets you see "Saving..." message while waiting for server update 51 Advanced Example: Servlets for Updating (Parent) public abstract class UpdateTraveler extends HttpServlet { public void dopost(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { response.setheader("cache-control", "no-cache"); response.setheader("pragma", "no-cache"); HttpSession session = request.getsession(); Traveler traveler = (Traveler)session.getAttribute("traveler"); if (traveler == null) { traveler = new Traveler(); session.setattribute("traveler", traveler); 52

26 Advanced Example: Servlets for Updating (Parent, Cont.) String newval = request.getparameter("value"); if ((newval!= null) &&!(newval.trim().equals( equals(""))) { doupdate(traveler, newval); PrintWriter out = response.getwriter(); try { Thread.sleep(2000); catch(interruptedexception ie) { out.print(getresult(traveler)); public abstract void doupdate(traveler traveler, String newval); public abstract String getresult(traveler traveler); 53 Advanced Example: Servlets for Updating (First Name) public class UpdateFirstName extends UpdateTraveler { public void doupdate(traveler traveler, String newval) { traveler.setfirstname(newval); public String getresult(traveler traveler) { return(traveler.getfirstname()); 54

27 Advanced Example: Results Marty Hall Wrap-up Customized Java EE Training: 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.

28 Recommended Books Prototype and script.aculo.us: You Never Knew JavaScript Could Do This! By Christophe Porteneuve Prototype and Scriptaculous in Action By Dave Crane, Bear Bebeault, Tom Locke 57 Summary window.onload = function() { new Autocompleter.Local( Local("fieldID1", "divid1", arrayofchoices); new Ajax.Autocompleter( Autocompleter("fieldID2", "divid2", "urlthatreturnslist"); new Ajax.Autocompleter("fieldID3", Autocompleter("fieldID3" "divid3", "urlthatreturnslist" { indicator: "ind-id", id" paramname: "p-name", more-options...); ; 58

29 Summary (Continued) window.onload = function() { new Ajax.InPlaceEditor("id-to-edit-1", "url-to-send-value"); new Ajax.InPlaceCollectionEditor ("id-to-edit-2", "url-to-send-value", { collection: ["Option1",...,"OptionN"]); ; Marty Hall Questions? Customized Java EE Training: 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.