I will change
only the original “ajax-examples.xhtml”
page and create “arsAjaxExamples.xhtml” which can be used to make a
comparison. My PrimeFaces version of
each function follows the original coreservlets AJAX functions. Here is the code:
arsAjaxExamples.xhtml
-------------------------------
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>JSF 2.0: Ajax
Support</title>
<link href="./css/styles.css"
rel="stylesheet" type="text/css" />
<script src="./scripts/utils.js"
type="text/javascript"></script>
</h:head>
<h:body>
<div align="center">
<table border="5">
<tr>
<th class="title">JSF 2.0: Ajax
Support</th>
</tr>
</table>
<p />
<h:form>
<fieldset>
<legend>Random Number: No Ajax</legend>
<h:commandButton value="Show
Number"
action="#{numberGenerator.randomize}" />
<h2>
<h:outputText value="#{numberGenerator.number}"
id="numField1" />
</h2>
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>Random Number: Ajax</legend>
<h:commandButton value="Show
Number"
action="#{numberGenerator.randomize}">
<f:ajax render="numField1"
/>
<!-- Putting
this inside h:commandButton is only difference from previous example! -->
</h:commandButton>
<h2>
<h:outputText value="#{numberGenerator.number}"
id="numField1" />
</h2>
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>Random Number: ARS
PrimeFaces Ajax</legend>
<h:commandButton value="Show
Number"
action="#{numberGenerator.randomize}">
<p:ajax update="numField1"
/>
</h:commandButton>
<h2>
<h:outputText value="#{numberGenerator.number}"
id="numField1" />
</h2>
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>Random Number (with
execute="someId")</legend>
Range:
<h:inputText value="#{numberGenerator.range}"
id="rangeField" />
<br />
<h:commandButton value="Show
Number"
action="#{numberGenerator.randomize}">
<f:ajax execute="rangeField"
render="numField3" />
</h:commandButton>
<br />
<h2>
<h:outputText value="#{numberGenerator.number}"
id="numField3" />
</h2>
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>ARS PrimeFaces Random
Number (withOUT
execute="someId")</legend>
Range:
<h:inputText value="#{numberGenerator.range}"
id="rangeField" />
<br />
<h:commandButton value="Show
Number"
action="#{numberGenerator.randomize}">
<p:ajax update="numField3"
/>
</h:commandButton>
<br />
<h2>
<h:outputText value="#{numberGenerator.number}"
id="numField3" />
</h2>
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>Bank Customer Lookup
(with execute="@form")</legend>
For
this simple test, legal id's are id001, id002, and id003. The
password
is "secret".<br />
<br /> Customer ID:
<h:inputText value="#{bankingBeanAjax.customerId}"
/>
<br /> Password:
<h:inputSecret value="#{bankingBeanAjax.password}"
/>
<br />
<h:commandButton value="Show Current
Balance"
action="#{bankingBeanAjax.showBalance}">
<f:ajax execute="@form"
render="ajaxMessage1" />
</h:commandButton>
<br />
<h2>
<h:outputText value="#{bankingBeanAjax.message}"
id="ajaxMessage1" />
</h2>
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>ARS Bank Customer
Lookup (with update="@form")</legend>
For
this simple test, legal id's are id001, id002, and id003. The
password
is "secret".<br />
<br /> Customer ID:
<h:inputText value="#{bankingBeanAjax.customerId}"
/>
<br /> Password:
<h:inputSecret value="#{bankingBeanAjax.password}"
/>
<br />
<p:commandButton update="@form"
value="Show Current Balance"
action="#{bankingBeanAjax.showBalance}">
</p:commandButton>
<br />
<h2>
<h:outputText value="#{bankingBeanAjax.message}"
id="ajaxMessage1" />
</h2>
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>Population Lookup
(with chained comboboxes)</legend>
State:
<h:selectOneMenu value="#{locationBean.state}">
<f:selectItems value="#{locationBean.states}"
/>
<f:ajax render="cityList"
/>
</h:selectOneMenu>
<br />City:
<h:selectOneMenu value="#{locationBean.city}"
disabled="#{locationBean.cityListDisabled}" id="cityList">
<f:selectItems value="#{locationBean.cities}"
/>
<f:ajax render="population"
/>
</h:selectOneMenu>
<br />Population:
<h:outputText value="#{locationBean.city}"
id="population" />
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>ARS PrimeFaces
Population Lookup (with chained
comboboxes)</legend>
State:
<p:selectOneMenu value="#{locationBean.state}">
<p:ajax update="cityList"
/>
<f:selectItem itemLabel="Select
State" itemValue=""
/>
<f:selectItems value="#{locationBean.states}"
/>
</p:selectOneMenu>
<br />City:
<p:selectOneMenu id="cityList"
value="#{locationBean.city}"
disabled="#{locationBean.cityListDisabled}">
<p:ajax update="population"
/>
<f:selectItem itemLabel="Select
City" itemValue=""
/>
<f:selectItems value="#{locationBean.cities}"
/>
</p:selectOneMenu>
<br />Population:
<h:outputText value="#{locationBean.city}"
id="population" />
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>On-the-Fly
Temperature Converter (with
event="keyup")</legend>
Temperature
in Fahrenheit:
<h:inputText value="#{temperatureConverter.fTemp}">
<f:ajax event="keyup"
render="cField kField" />
</h:inputText>
<br />
<h2>
Temperature
in Celsius:
<h:outputText value="#{temperatureConverter.cTemp}"
id="cField" />
<br /> Temperature in Kelvin:
<h:outputText value="#{temperatureConverter.kTemp}"
id="kField" />
<br />
</h2>
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>ARS PrimeFaces
On-the-Fly Temperature Converter
(with
event="keyup")</legend>
Temperature
in Fahrenheit:
<p:inputText id="counter"
value="#{temperatureConverter.fTemp}">
<p:ajax event="keyup"
update="cField kField" />
</p:inputText>
<br />
<h2>
Temperature
in Celsius:
<h:outputText value="#{temperatureConverter.cTemp}"
id="cField" />
<br /> Temperature in Kelvin:
<h:outputText value="#{temperatureConverter.kTemp}"
id="kField" />
<br />
</h2>
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>Bank Customer Lookup
(with onevent)</legend>
Customer
ID:
<h:inputText value="#{bankingBeanSlow.customerId}"
/>
<br /> Password:
<h:inputSecret value="#{bankingBeanSlow.password}"
/>
<br />
<h:commandButton value="Show Current
Balance"
action="#{bankingBeanSlow.showBalance}">
<f:ajax execute="@form"
render="ajaxMessage2"
onevent="showWorkingIndicator" />
</h:commandButton>
<br />
<h2>
<span id="workingIndicator"
style="display: none; font-size: 60%">
<img src="./images/ajax-loader.gif"
/> Loading
data from server...
</span>
<h:outputText value="#{bankingBeanSlow.message}"
id="ajaxMessage2" />
</h2>
</fieldset>
</h:form>
<br />
<h:form>
<fieldset>
<legend>ARS PrimeFaces Bank
Customer Lookup (with onevent)</legend>
<p:panel id="panel"
header="Ajax Status">
<h:panelGrid columns="2"
cellpadding="5">
<h:inputText value="#{bankingBeanSlow.customerId}"
label="Customer ID" />
<br />
<h:inputSecret value="#{bankingBeanSlow.password}"
label="Password" />
<br />
</h:panelGrid>
<p:commandButton value="Show Current
Balance" update="@(form)"
actionListener="#{bankingBeanSlow.showBalance}" id="btnCurBalance">
</p:commandButton>
<h2>
<h:outputText value="#{bankingBeanSlow.message}"
id="ajaxMessage2" />
</h2>
</p:panel>
<br />
<p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel">
<f:facet name="start">
<h:graphicImage value="/design/ajaxloading.gif"
/>
</f:facet>
<f:facet name="complete">
<h:outputText value=""
/>
</f:facet>
</p:ajaxStatus>
</fieldset>
</h:form>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<font size="-3"> References:<br /> <a
href="http://www.coreservlets.com/JSF-Tutorial/jsf2/">the
coreservlets.com
JSF 2.0 tutorial</a>. <br />
<a href="http://www.primefaces.org/showcase/ui/home.jsf/">primefaces
showcase</a>.
</font>
</div>
</h:body>
</html>
