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

29 Pages·2009·2.84 MB·English

© 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
• <<ddiiv iidd=""ddiivIIDD"" cllass=""someCCSSSSNName"">><<//ddiiv>>
– 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
<!DOCTYPE ...>
<html xmlns="httpp:////www.w3.orgg//1999//xhtml">
<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>
<ssccripptt ssrcc=
"./scripts/scriptaculous/scriptaculous.js?load=effects,controls"
type="text/javascript"></script>
<script src="./scripts/autocomplete.js"
type="text//javascript"><//script>
</head>
IIff yyoouu kknnooww yyoouu wwiillll oonnllyy uussee cceerrttaaiinn ppaarrttss ooff ssccrriippttaaccuulloouuss lliibbrraarryy, yyoouu ccaann ssaavvee
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.
12
Autocompleter.Local Example:
MMaaiinn HHTTMMLL
<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>
<<//ffiiellddsett>>
...
</body></html>
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 <ul> list)
• Use class Ajax.Autocompleter instead of
AAuuttooccoommpplleetteerr..LLooccaall
• Steps
– Make an instance of Ajax.Autocompleter
• new Ajjax.Autocomppleter((textFieldID, divID, url))
– Enable it when page loads
• window.onload = function() { new Ajax.Autocompleter(...);
};
–– MMaakkee aann eemmppttyy ddiivv wwiitthh aa ddeessiiggnnaatteedd CCSSSS nnaammee
• <div id="divID" class="someCSSName"></div>
– Attach same style sheet as with Autocompleter.Local
18
Ajax.Autocompleter Example:
JJaavvaaSSccrriipptt
var langString = "Java,C,C++,PHP,Visual Basic,...";
vvaarr llaannggAArrrraayy == llaanngguuaaggeeSSttrriinngg.sspplliitt((","));;
window.onload = function() {
nneeww AAuuttooccoommpplleetteerr.LLooccaall((""llaannggFFiieelldd11"", ""llaannggMMeennuu11"",
langArray);
new Ajax.Autocompleter("langField2", "langMenu2",
""llanguages""));
};
TThhiiss iiss tthhee rreellaattiivvee UURRLL. BByy ddeeffaauulltt iitt wwiillll bbee ppaasssseedd PPOOSSTT
data of name-of-langField2=value-of-langField2
19
Ajax.Autocompleter Example:
HHTTMMLL
<fieldset>
<<lleeggeenndd>>AAjjaaxx.AAuuttooccoommpplleettee<<//lleeggeenndd>>
<form action="#">
<label for="langField2">Programming language:</label>
<inpput tyyppe="text" id="langgField2" name="langgPrefix"/>
<input type="button" value="Search on Language"
onclick="googleSearch('langField2')"/><br/>
<div id="langMenu2" class="autocomplete"></div>
</form>
</fieldset>
BByy ddeeffaauulltt, nnaammee ooff ffiieelldd iiss
parameter name
20
Ajax.Autocompleter Example:
SSeerrvvlleett
public class LanguageCompleter extends HttpServlet {
private static final String languageString =
"Java,C,C++,...";
private static final String[] languageArray =
languageString.split(",");
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
The name (not id!) of textfield
String languagePrefix = was "langPrefix".
request.getParameter("langPrefix");
List<Stringg> 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<String> findLanguages(String languagePrefix) {
languagePrefix = languagePrefix.toUpperCase();
LLiisstt<<SSttrriinngg>> llaanngguuaaggeess == nneeww AArrrraayyLLiisstt<<SSttrriinngg>>(());;
for(String language: languageArray) {
if(language.toUpperCase().startsWith(languagePrefix)) {
languages.add(language);
}
}
return(languages);
}}
}
22