Scriptaculous and Autocomplete

© 2009 Marty Hall The Script.aculo.us JavaScript Library Part I: Ajjax-Sppecific Features Originals of Slides and Source Code for Examples: httpp://courses.coreservlets.com/Course-Materials/ajjax.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 yourlocation. © 2009 Marty Hall For live Ajax & GWT training, see training courses att hhttttp:////courses.coreservlletts.com//. Taught by the author of Core Servlets and JSP, More SSeerrvvlleettss aanndd JJSSPP, aanndd tthhiiss ttuuttoorriiaall. AAvvaaiillaabbllee aatt ppuubblliicc venues, or customized versions can be held on-site at your organization. •CCourses ddevellopedd andd ttaughhtt bby MMartty HHallll –Java 6, intermediate/beginning servlets/JSP, advanced servlets/JSP, Struts, JSF 1.x& 2.0, Ajax, GWT, custom mix of topics –Ajax cCouurssetso cman iczonecden Jtraatev oan EonEe l iTbrarray i(jnQiunergy,: P hrottottpyp:e///Sccoriuptarcsuelosu.sc, oExrte-JsSe, rDvojloe) tosr .scurovmey /several •Courses developed and taught by coreservlets.com experts (edited by Marty) Servlets, JSP, JSF 1.x& JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. –Spring, Hibernate/JPA, EJB3, Ruby/Rails Developed and taught by well-knCoownnta acut thhaolrl @ancdo rdeesveerlvolpeetsr.. cAotm p ufobrli dc evteaniluses or onsite at yourlocation. Topics in This Section • Overview of Scriptaculous • Installation and documentation • Autocomplete textfields – Local version – Ajax version •• IInn-ppllaaccee EEddiittoorr – Free-text values – VVaalluueess ffrroomm ccoommbboo bbooxx 5 © 2009 Marty Hall Introduction 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 yourlocation. Overview • Foundation – BBuiillt on top off PPrototype • Ajax-specific features – AAuuttooccoommpplleettiinngg tteexxttffiieellddss • Textfields with dropdown list of matching choices • Covered in first half of this section – IInn--ppllaaccee eeddiittoorrss • Clickable text that you can edit and send to server • Covered in second half of this section •• GGeenneerraall ffeeaattuurreess – Visual effects (fade in, fade out, highlighting) • Covered in next section – Drag and drop • Covered in later section 7 Downloading and Installation • Download – http://script.aculo.us/downloads • Unzip and grab .js files out of “src” folder – UUssuuaallllyy ppuutt iinn ssuubbddiirreeccttoorryy ooff ssccrriippttss ssiinnccee tthheerree aarree mmaannyy ffiilleess • This tutorial corresponds to Scriptaculous 1.8.1 • Online documentation – http://wiki.script.aculo.us/ • Online forum – hhttttp:////groups.googlle.com//group//rubbyonraiills-spiinoffffs • Prerequisite – SSccrriippttaaccuulloouuss rreeqquuiirreess PPrroottoottyyppee. II aamm uussiinngg 11.66. • So your HTML page needs to load both libraries • See separate lectures on Prototype 8 © 2009 Marty Hall Autocompleter.Local 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 yourlocation. Autocompleter.Local • Idea – SSppeecciiffyy JJaavvaaSSccrriipptt aarrrraayy tthhaatt hhaass cchhooiicceess ffoorr tteexxttffiieelldd. DDrrooppddoowwnn box shown with choices that start with what has been typed so far • http://wiki.script.aculo.us/scriptaculous/show/Autocompletion • Steps – Make an instance of Autocompleter.Local • new Autocompleter.Local(textFieldID, divID, array) – Enable it when page loads •• wwiinnddooww.oonnllooaadd == ffuunnccttiioonn(()) {{ nneeww AAuuttooccoommpplleetteerr.LLooccaall((...));; }};; • Prototype gurus might use document.observe("dom:loaded", ...) instead of window.onload – Make an empty div with a designated CSS name • <><> – 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 Autocompleter.Local Example: JJaavvaaSSccrriipptt var langString = "Java,C,C++,PHP,Visual Basic,..."; vvaarr llaannggAArrrraayy == llaanngguuaaggeeSSttrriinngg.sspplliitt((","));; window.onload = function() { nneeww AAuuttooccoommpplleetteerr.LLooccaall(("llaannggFFiieelldd11",, "llaannggMMeennuu11",, langArray); }; function googleSearch(id) { var language = getValue(id); window.location.href = "http://www.google.com/search?q=" + language; } function getValue(id) { return(escape(document.getElementById(id).value)); } 11 Autocompleter.Local Example: HHTTMMLL HHeeaaddeerr Scriptaculous and Autocomplete . Autocomplete is in controls, but relies on effects internally. 12 Autocompleter.Local Example: MMaaiinn HHTTMMLL ...

Autocomplete.Local <> ... 13 Autocompleter.Local Example: CSS .autocomplete { ppoossiittiioonn:: aabbssoolluuttee;; color: #333333; background-color: #ffffff; bboorrddeerr:: 11ppxx ssoolliidd ##666666666666;; font-family: Arial, sans-serif; overflow: hidden; }} .autocomplete ul { padding: 0; maarggin:: 00;; list-style: none; overflow: auto; }} 14 Autocompleter.Local Example: CSS ((CCoonnttiinnuueedd)) .autocomplete li { ddiissppllaayy:: bblloocckk;; white-space: nowrap; cursor: pointer; mmaarrggiinn:: 00ppxx;; padding-left: 5px; padding-right: 5px; bboorrddeerr:: 00ppxx ssoolliidd ##ffffffffffff;; } .autocomplete li.selected { bbaacckggroouundd-ccooloor:: ##cccceeeeff;; border-top: 1px solid #99bbcc; border-bottom: 1px solid #99bbcc; }} 15 Autocompleter.Local Example: RReessuullttss 16 © 2009 Marty Hall Ajax.Autocompleter 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 yourlocation. Ajax.Autocompleter • Idea – SSppeecciiffyy UURRLL tthhaatt ccoommppuutteess lliisstt ooff cchhooiicceess. DDrrooppddoowwnn bbooxx sshhoowwnn with choices that start with what has been typed so far • http://wiki.script.aculo.us/scriptaculous/show/Autocompletion • Steps: summary – Same steps as with Autocompleter.Local except • Specify url instead of array (url should return

<>AAjjaaxx.AAuuttooccoommpplleettee<>

langguagges = findLangguagges(langguaggePrefix); request.setAttribute("languages", languages); String outputPage = "/WEB-INF/results/language-list.jsp"; ReqquestDisppatcher disppatcher = request.getRequestDispatcher(outputPage); dispatcher.include(request, response); } 21 Ajax.Autocompleter Example: SSeerrvvlleett ((CCoonnttiinnuueedd)) public void doPost(HttpServletRequest request, HHttttppSSeerrvvlleettRReessppoonnssee rreessppoonnssee)) throws ServletException, IOException { doGet(request, response); } private List findLanguages(String languagePrefix) { languagePrefix = languagePrefix.toUpperCase(); LLiisstt<> llaanngguuaaggeess == nneeww AArrrraayyLLiisstt<>(());; for(String language: languageArray) { if(language.toUpperCase().startsWith(languagePrefix)) { languages.add(language); } } return(languages); }} } 22

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

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