Advanced Web Technologies 13) Java Server Faces - Ajax ...
Transcript of Advanced Web Technologies 13) Java Server Faces - Ajax ...
![Page 1: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/1.jpg)
Advanced Web Technologies13) Java Server Faces - Ajaxlibrary(ajax4jsf)
Emmanuel BenoistFall Term 2016-17
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 1
![Page 2: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/2.jpg)
Table of Contents
� Motivation
� Installation and Setup
� Main Ajax4jsf Tagsa4j:commandButton and a4j:commandLinka4j:polla4j:support
� Other Ajax Tools
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 2
![Page 3: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/3.jpg)
Motivation
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 3
![Page 4: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/4.jpg)
Motivation: Why Ajax?
HTML and HTTP are weakNon-interactiveCoarse-grained updates
Everyone wants to use a browserNot a custom application
Real browser-based active contentFailed: Java Applets(not universally supported)Serious alternative: Flash (and Flex)Not universally supported; limited power
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 4
![Page 5: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/5.jpg)
Installation and Setup
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 5
![Page 6: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/6.jpg)
Installation and Setup
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 6
![Page 7: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/7.jpg)
Installing Ajax4jsf
Download the latest binary versionhttp://labs.jboss.com/jbossajax4jsf/downloads/
UnzipInto any location
Install ajax4jsf.jarCopy /lib/ajax4jsf.jar into WEB-INF/lib directory
Add filter to web.xml
See next page
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 7
![Page 8: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/8.jpg)
Filter Settings for web.xml<?xml version=”1.0”?><web−app ...>
...<filter><display−name>Ajax4jsf Filter</display−name><filter−name>ajax4jsf</filter−name><filter−class>org.ajax4jsf.Filter</filter−class>
</filter><filter−mapping><filter−name>ajax4jsf</filter−name><servlet−name>Faces Servlet</servlet−name><dispatcher>REQUEST</dispatcher><dispatcher>FORWARD</dispatcher><dispatcher>INCLUDE</dispatcher>
</filter−mapping></web−app>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 8
![Page 9: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/9.jpg)
Using Ajax4jsf
Use xhtmlMost Ajax applications use xhtml, not HTML 4
Add taglib for ajax4jsf
<%@ taglib uri=”https://ajax4jsf.dev.java.net/ajax”prefix=”a4j”%>
Give ids to sections that you want to update
<h:outputText ... id=”someName”/>
Note: ids within a page must be unique
Use a4j: tagsAlmost all must go inside h:formEven the ones that don’t use form elements (e.g., a4j:poll)
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 9
![Page 10: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/10.jpg)
Basic Template<?xml version=”1.0” encoding=”UTF−8”?><%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %><%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %><%@ taglib uri=”https://ajax4jsf.dev.java.net/ajax”
prefix=”a4j”%><f:view><!DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1.0 ↘
→Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1−transitional.↘→dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”><meta http−equiv=”content−type”
content=”text/html; charset=UTF−8” /><head><title>Some Title</title></head><body>...</body></html></f:view>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 10
![Page 11: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/11.jpg)
XHTML: Case
In HTML 4, case does not matter for tag names andattribute names
<BODY>, <Body>, and <body> are equivalent<H1 ALIGN="..."> is equivalent to <H1 aLiGn="...">
In xhtml, tag names and attribute names must be inlower case
<body>, <h1 align="...">
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 11
![Page 12: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/12.jpg)
XHTML: Quotes
In HTML 4, quotes are optional if attribute valuecontains only alphanumeric values
<H1 ALIGN="LEFT"> or <H1 ALIGN=LEFT>
In xhtml, you must always use single or double quotes<h1 align="left"> or <h1 align=’left’>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 12
![Page 13: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/13.jpg)
XHTML: End Tags
HTML 4Some tags are containers<H1>...</H1>, <A HREF...>...</A>
Some tags are standalone<BR>, <HR>Some tags have optional end tags<P>, <LI>, <TR>, <TD>, <TH>
XHTMLAll tags are containers. End tags always required.<p>...</p>, <li>...</li>If there is no body content, start/end tags can be merged<br></br> or just <br/>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 13
![Page 14: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/14.jpg)
Ajax and the Firefox JavaScriptConsole
Invoke with Control-Shift-J
Also see Venkman JavaScript debuggerhttp://www.mozilla.org/projects/venkman/
https://addons.mozilla.org/firefox/216/
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 14
![Page 15: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/15.jpg)
Main Ajax4jsf Tags
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 15
![Page 16: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/16.jpg)
Main Ajax4jsf Tags
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 16
![Page 17: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/17.jpg)
Tag Summarya4j:commandButton and a4j:commandLink
Run code on the server, then update specified JSF element (orcomma separated element list) after.
<a4j:commandButton action=”#{bean.method}”value=”Button label” reRender=”some−id”↘
→/>... <h:outputText value=”#{bean.prop}” id=”some−id”↘
→/>
a4j:pollRun code periodically on server, then update specified JSFelement(s)
a4j:supportCapture JavaScript event in any existing JSF control andinvoke server-side code, then update specified element(s)
<h:inputText ...><a4j:support event=”onkeyup” reRender=”some−id”/>
</h:inputText>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 17
![Page 18: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/18.jpg)
a4j:commandButton anda4j:commandLink
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 18
![Page 19: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/19.jpg)
a4j:commandButton: Basic Syntax
<a4j:commandButtonaction=”#{bean.method}”value=”Button label”reRender=”some−id”/>
When you press the button, send a behind-the-scenes,asynchronous HTTP call to server, and run this method. Thismethod should look like a normal action controller (i.e., noarguments and returns a String), but the return value isignored (i.e., is not used to match a navigation rule in facesconfig).
After action method is executed, re-evaluate and re-displaythe JSF element that has this id. The point is that this JSFelement should output something that changed as a result ofthe call to the action controller.
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 19
![Page 20: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/20.jpg)
Reminder: Template<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %><%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %><%@ taglib uri=”https://ajax4jsf.dev.java.net/ajax” prefix=”a4j↘→”%><f:view><!DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1.0 ↘
→Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1−transitional.↘→dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http−equiv=”Content−Type” content=”text/html;↘→charset=UTF−8”” /><link rel=”stylesheet”
href=”./css/styles.css”type=”text/css”/>
<title>Ajax4JSF Examples</title></head><body> ...
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 20
![Page 21: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/21.jpg)
h:commandButton: Example
<tr><td width=”100”><h:form><a4j:commandButton
action=”#{numBean.makeResult}”value=”Show Random Number”reRender=”region1”/>
</h:form></td><td width=”100”><h:outputText value=”#{numBean.result}”
id=”region1”/></td>
</tr>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 21
![Page 22: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/22.jpg)
h:commandLink: Example
<tr><td width=”100”><h:form><a4j:commandLink
action=”#{numBean.makeResult}”value=”Show Random Number”reRender=”region2”/>
</h:form></td><td width=”100”><h:outputText value=”#{numBean.result}”
id=”region2”/></td>
</tr>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 22
![Page 23: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/23.jpg)
a4j:commandButton anda4j:commandLink: Beanpublic class RandomNumberBean {
private int range = 1;private double result;public int getRange() {
return(range);}public void setRange(int range) {
this.range = range;}public String makeResult() {
result = Math.random() ∗ range;return(null);}public double getResult() {
return(result);}}
Action controllers must have String return type to satisfy JSFAPI.However, return values are ignored, since navigation rules donot apply.
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 23
![Page 24: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/24.jpg)
a4j:commandButton anda4j:commandLink: faces-config
<managed−bean><managed−bean−name>
numBean</managed−bean−name><managed−bean−class>
coreservlets.RandomNumberBean</managed−bean−class><managed−bean−scope>
request</managed−bean−scope>
</managed−bean>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 24
![Page 25: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/25.jpg)
a4j:commandButton: Example 2
a4j:commandButton results in normal JSF requestprocessing cycle
So, form is still submittedBean setter methods still executeAction controller runs after setter methods, so controller hasaccess to results of all form fields
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 25
![Page 26: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/26.jpg)
a4j:commandButton: Example 2<tr><td width=”100”>
<h:form>Range:<h:inputText value=”#{numBean.range}”
size=”5”/><br/><a4j:commandButton
action=”#{numBean.makeResult}”value=”Show Random Number”reRender=”region3”/>
</h:form></td><td width=”100”><h:outputText value=”#{numBean.result}”
id=”region3”/></td>
</tr>Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 26
![Page 27: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/27.jpg)
a4j:commandButton anda4j:commandLink: Beanpublic class RandomNumberBean {
private int range = 1;private double result;public int getRange() {
return(range);}public void setRange(int range) {
this.range = range;}public String makeResult() {
result = Math.random() ∗ range;return(null);}public double getResult() {
return(result);}}
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 27
![Page 28: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/28.jpg)
Example
http://localhost:
8080/ajax4jsf-coreservlets/welcome.faces
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 28
![Page 29: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/29.jpg)
Limitations on Use of h:outputTextwith Ajax4jsf
In JSF, the following is perfectly legal
<body bgcolor=”<h:outputText #{myBean.fgColor}”/>”↘
→>
result is
<body bgcolor=”red”>
But the following is illegal
<body bgcolor=”<h:outputText #{myBean.fgColor}” id=”foo”/>↘
→”>
Results in
<body bgcolor=”<span id=”foo”>red</span>”>
In regular JSF, this is no problem since there is no needfor idsBut with Ajax, you need a DOM-accessible region to
updateSo, you are limited in the places that you can updateasynchronouslyYou can only update separate xhtml elements, not just sections
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 29
![Page 30: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/30.jpg)
a4j:poll
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 30
![Page 31: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/31.jpg)
a4j:poll: Basic Syntax
<a4j:pollinterval=”x”reRender=”some−id”/>
InterpretationEvery x milliseconds, send off an asynchronous HTTP requestto the server.Re-evaluate and re-display the JSF element with the idsome-id.Key point: this element should result from code that givesdifferent values at different timesUnlike with a4j:commandButton, there is no explicitadditional server-side method to run
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 31
![Page 32: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/32.jpg)
a4j:poll: Example
<h:form><a4j:poll interval=”5000”
reRender=”timeDisplay”/><h2><h:outputText value=”#{timeBean.time}”
id=”timeDisplay”/></h2>
</h:form>
The getTime method returns different results atdifferent times.
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 32
![Page 33: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/33.jpg)
a4j:poll: Bean
public class TimeBean {public Date getTime() {
return(new Date());}}
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 33
![Page 34: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/34.jpg)
a4j:poll: faces-config.xml
<managed−bean><managed−bean−name>
timeBean</managed−bean−name><managed−bean−class>
coreservlets.TimeBean</managed−bean−class><managed−bean−scope>
application</managed−bean−scope>
</managed−bean>
TimeBean has no state, so for efficiency, reuse the sameinstance.
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 34
![Page 35: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/35.jpg)
a4j:poll: Results
http://localhost:
8080/ajax4jsf-coreservlets/welcome.faces
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 35
![Page 36: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/36.jpg)
a4j:support
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 36
![Page 37: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/37.jpg)
a4j:support: Basic Syntax
<h:someTag ...><a4j:support event=”javascript−event”
reRender=”some−id”></h:someTag>
InterpretationDo whatever someTag normally does, but if the specifiedJavaScript event (onclick, onchange, onkeypress, etc.) occurs,send a behind-the-scenes asynchronous HTTP request to theserver that results in the specified JSF element beingre-evaluated and re-displayedNote: form values are sent and setter methods are run
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 37
![Page 38: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/38.jpg)
JavaScript Event Handlers used witha4j:support
onchange User changes element (IE: and element loses focus)
onclick/ondblclick User single/double clicks form elementor link
onfocus/onblur Element receives/loses focus
onkeydown/onkeypress/onkeyup Userpresses/presses-or-holds/releases a key
onmousedown/onmouseup User presses/releases mouse
onmousemove User moves mouse
onmouseover/onmouseout User moves mouse onto/off areaor link
onselect User selects text within a textfield or textarea
onsubmit User submits form
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 38
![Page 39: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/39.jpg)
a4j:support: Example 1
IdeaUse h:inputText to make a textfieldAs the user types into the textfield, copy the value into regulartext
ApproachTextfieldStores result in myBean.message
<a4j:support event="onkeyup"
reRender="output-region"/>
Separate output field
<h:outputText value=”#{myBean.message}”id=”output−region”/>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 39
![Page 40: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/40.jpg)
a4j:support: Example<h:form>
<table border=”1”><tr><th>Textfield</th>
<th>Ajax Value</th></tr><tr><td width=”100”>
<h:inputText value=”#{myBean.message}”><a4j:support event=”onkeyup”
reRender=”output−region”/></h:inputText></td><td width=”100”><h:outputText value=”#{myBean.message}”
id=”output−region”/></td></tr>
</table></h:form>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 40
![Page 41: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/41.jpg)
a4j:support: Bean
public class MessageBean {private String message;public String getMessage() {
return(message);}public void setMessage(String message) {
this.message = message;}}
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 41
![Page 42: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/42.jpg)
a4j:support: faces-config.xml
<managed−bean><managed−bean−name>
myBean</managed−bean−name><managed−bean−class>
coreservlets.MessageBean</managed−bean−class><managed−bean−scope>
request</managed−bean−scope>
</managed−bean>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 42
![Page 43: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/43.jpg)
a4j:support: Example 2
IdeaUse h:selectOneMenu to make a list of US statesWhen the user selects a state, a list of corresponding cities isshown (again, using h:selectOneMenu)When city selected, population of that city is displayed
ApproachState list: <a4j:support event="onchange"
reRender="city-list"/>
City List: <a4j:support event="onchange"
reRender="pop-field"/>
Bean: Make it session scoped so values persist across acrossmultiple submissions (since there are at least two)
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 43
![Page 44: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/44.jpg)
a4j:support: Example<h:form>
State:<h:selectOneMenu value=”#{locationBean.state}”><f:selectItems value=”#{locationBean.states}”/><a4j:support event=”onchange” reRender=”cityList”/>
</h:selectOneMenu><br/>City:<h:selectOneMenu value=”#{locationBean.city}”
disabled=”#{locationBean.cityListDisabled}”id=”cityList”>
<f:selectItems value=”#{locationBean.cities}”/><a4j:support event=”onchange” reRender=”population”/>
</h:selectOneMenu><br/>Population:<h:outputText value=”#{locationBean.city}”
escape=”false”id=”population”/></h:form>Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 44
![Page 45: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/45.jpg)
a4j:support: Bean
public class LocationBean implements Serializable {private String state;private String city;// Make city list disabled initially.private boolean isCityListDisabled = true;public String getState() { return (state); }public void setState(String state) {
this.state = state;isCityListDisabled = false;}public String getCity() { return(city); }public void setCity(String city) { this.city = city; }public boolean isCityListDisabled() {
return(isCityListDisabled);}
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 45
![Page 46: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/46.jpg)
a4j:support: Bean (Continued)
...public List<SelectItem> getStates() {
List<SelectItem> states =new ArrayList<SelectItem>();
states.add(new SelectItem(”−−− Select State −−−”));
for(StateInfo stateData:StateInfo.getNearbyStates()) {
states.add(new SelectItem(stateData.getStateName()));
}return(states);}
Put dummy value at the top of the list so that any realuser selection is considered a change
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 46
![Page 47: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/47.jpg)
a4j:support: Bean (Continued)public SelectItem[] getCities() {
SelectItem[] cities ={ new SelectItem(”−−− Choose City −−−”)};
if(!isCityListDisabled && (state != null)) {for(StateInfo stateData:
StateInfo.getNearbyStates()) {if(state.equals(stateData.getStateName())) {
cities = stateData.getCities();break;}}}return(cities);}
state = Result of form submission (i.e., value form the statelist)cities = Value is a SelectItem array
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 47
![Page 48: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/48.jpg)
a4j:support: Supporting Class(StateInfo)public class StateInfo {
private String stateName;private SelectItem[] cities;public StateInfo(String stateName,
SelectItem[] cities) {this.stateName = stateName;this.cities = cities;}public String getStateName() {
return(stateName);}public SelectItem[] getCities() {
return(cities);}
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 48
![Page 49: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/49.jpg)
a4j:support: Supporting Class(StateInfo) Continued
private static StateInfo[] nearbyStates ={ new StateInfo(”Maryland”,
new SelectItem(”<i>unknown</i>”,”−−− Choose City −−−”),
new SelectItem(”635815”, ”Baltimore”),new SelectItem(”57907”, ”Frederick”),new SelectItem(”57698”, ”Gaithersburg”),new SelectItem(”57402”, ”Rockville”)),
...
Number = Values that are used when an entry is selectedand form is submitted. These are the values displayed in thetext when the city field changes
Name = Values that are displayed in the list
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 49
![Page 50: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/50.jpg)
a4j:support: faces-config.xml
<managed−bean><managed−bean−name>
locationBean</managed−bean−name><managed−bean−class>
coreservlets.LocationBean</managed−bean−class><managed−bean−scope>
session</managed−bean−scope>
</managed−bean>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 50
![Page 51: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/51.jpg)
a4j:support: Results
http://localhost:
8080/ajax4jsf-coreservlets/welcome.faces
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 51
![Page 52: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/52.jpg)
Other Ajax Tools
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 52
![Page 53: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/53.jpg)
Other Ajax Tools
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 53
![Page 54: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/54.jpg)
JavaServer Faces (JSF) componentlibraries
Trinidad (formerly Oracle ADF)http://www.oracle.com/technology/products/jdev/
htdocs/partners/addins/exchange/jsf/ (alsomyfaces.apache.org)
Tomahawkhttp://myfaces.apache.org/tomahawk/
Ajax4jsfhttp://labs.jboss.com/jbossajax4jsf/
IceFaceshttp://www.icefaces.org/
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 54
![Page 55: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/55.jpg)
Summarya4j:commandButton / a4j:commandLink
<a4j:commandButton action=”#{bean.method}”value=”Button label”reRender=”some−id”/>
<a4j:commandLink action=”#{bean.method}”value=”Link text”reRender=”some−id”/>
a4j:poll
<a4j:poll interval=”x−milliseconds”reRender=”some−id”/>
a4j:support
<h:someTag ...><a4j:support event=”javascript−event”
reRender=”some−id”></h:someTag>
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 55
![Page 56: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/56.jpg)
Conclusion
Ajax4jsf can be installed without modifying the existingpages
Download a jarmodify your web.xml to install filtersInsert new tags (or properties) in existing pages
Ajax4Jsf provides 4 tagsa4j:commandButton, a4j:commandLink, a4j:poll,a4j:support.
Uses the Event handling procedures of JSFEvents are fired even when no action is done.Components can be modified without action and navigation
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 56
![Page 57: Advanced Web Technologies 13) Java Server Faces - Ajax ...](https://reader035.fdocuments.net/reader035/viewer/2022062603/62b4e1c1f2c40966c13f73b3/html5/thumbnails/57.jpg)
References
http://www.coreservlets.com/JSF-Tutorial/
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 57