Wednesday 3 April 2013

PrimeFaces vs JSF2 AJAX comparison

This is a comparison work between PrimeFaces and JSF2’s some AJAX functions.  I will take the CoreServlets JSF2 tutorial’s AJAX examples and convert them to PrimeFaces and present them side by side the original JSF2 AJAX examples.  The PrimeFaces examples that I produce use the same beans that the original coreservlets AJAX examples.  You can get them from:


 


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>