Share:
Share

No Duplicate Content Allowed, No Re-posting of copyrighted materials allowed. Only Unique Content is Allowed.

 

JAVASERVER FACES AND AJAX  

  

2

In this book,  I have alone looked at the client side, including how to define a layout of a page using styles, and how to use JavaScript to modify the individual elements of the DOM tree.  It takes place in the browser and without the server’s involvement.  In this chapter,  I will again look at the server side where the code is executed on the basis of a request from the browser and where the server then answers back with a response, which means that the browser should render the document again.  With the help of Java online training, it is possible to execute that form of a request/response in such a way that the user does not observes the page being updated and that the application essentially behaves in the same way as a standard desktop application.  This technique is called Ajax. 

Ajax is a family of technologies that enable JavaScript to perform tasks asynchronously when the browser sends requests to the server in the background, which then sends responses back to the client that can be used to update the  DOM  tree.  The technology is widely used in all modern web applications.  

You can basically associate ajax facilities with a JSF input component with the element of Ajax, which means an interaction between client and server, based on a particular event, an interaction performed asynchronously and parallel with the user using the application. A  number  of  attributes  are  attached  to an f: ajax  element,  where  all, if not specified, has  a default  value:  

  • delay, which is a value specified in milliseconds and indicates the maximum size of a delay between request and response (none disables this feature).

which is a boolean indicating that the function is disabled (false is the default).

  • the event, which specifies the event for the component that triggers the Ajax request. 
  • execute, that specifies a list of components to be performed on the server.  
  • immediate, which is a boolean that indicates that the input value should be processed immediately. 

which specifies the name of a listener method to be performed.

  • the event, that specifies the name of a JavaScript function to be performed.
  •  on error, that specifies the name of a JavaScript function for error handling.
  •  render, which is a list of components to be rendered after the ajax function. 

For  the  execute  and  render  attributes,  the  following  terms  are  available  for  specifying 

components: 

  •  @all,  that  means  all  components  
  •  @form,  that  means  all  components  in  the  form,  that  contains  the  component  for       the  ajax  function  

 that  means  none  components  and  is the default  for  render  

  •  @this,  that  means  the  ajax  functions  parent  component  
  •  The  components  ID  separated  by  spaces 
  •  A  JSF  expression  

To illustrate how ajax works, I want to show a number of examples that extend an existing 

application  with  ajax  functions,  and  it  will  be  based  on  the  application  ChangeAddress3 

from the book  Java  11.

VALIDATION OF FIELDS 
I have started with a copy of the project ChangeAddress3  from  Java  11,  and  I have called the
copy for ChangeAddress1.  If you open the application in the browser, you get them.

It works fine, but it would be more appropriate to validate each field immediately after the text is entered.  As it is the server that validates the fields,  a request must be made to the server for each field and Ajax can help,  such that it happens completely transparent to the user. In fact, it is extremely simple and consists of changing the index.xhtml document as shown  below:  

It works fine, but it would be more appropriate to validate each field immediately after the text is entered.  As it is the server that validates the fields,  a request must be made to the server for each field, and Ajax can help, such that it happens completely transparent to the user. In fact, it is extremely simple and consists of changing the index.xhtml  document  as shown  below:

<?xml   version='1.0'   encoding='UTF-8'   ?>  

<!DOCTYPE  html  PUBLIC  …  >

<html  xmlns="http://www.w3.org/1999/xhtml"  

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core">

  <h:head>

    <meta  http-equiv="Content-Type"  content="text/html;  charset=UTF-8"/>  

    <title>Change   address</title>  

    <h:outputStylesheet   library="css"   name="styles.css"/>  

  </h:head>

  <h:body>

    <h1>Change   address</h1>  

    <h:form>

            <h:panelGrid   columns="3" columnClasses="rightalign,leftalign,leftalign">

            <h:outputLabel  value="First  name:"  for="frstname"/>  
        
            <h:inputText  id="frstname"  label="First  name"    
          
  value="#{indexController.frstname}"  >  
        
            <f:validateRequired/>  
          
           <f:ajax  event="blur"  render="frstnameError"/>  

           </h:inputText>

         <h:message  for="frstname"  class="error-message"  id="frstnameError"  />  

         <h:outputLabel   value="Last   name:"   for="lastname"/>  

         <h:inputText   id="lastname"   label="Lastname"     

value="#{indexController.lastname}"   >  

            <f:validateRequired/>  

<f:ajax   event="blur"   render="lastnameError"/>  

</h:inputText>

         <h:message   for="lastname"   class="error-message"   id="lastnameError"/>  

         <h:outputLabel   value="Address:"   for="address"/>  

         <h:inputText   id="address"   label="Address"     

value="#{indexController.address}"   >  

            <f:validateRequired/>  

<f:ajax   event="blur"   render="addressError"/>  

</h:inputText>

         <h:message   for="address"   class="error-message"   id="addressError"/>  

         <h:outputLabel   value="Zip   code:"   for="code"   />  

         <h:inputText   id="code"   label="Zipcode"     

value="#{indexController.code}">

            <f:validateLength  minimum="4"  maximum="4"/>  

<f:ajax   event="blur"   render="codeError"/>  

</h:inputText>

         <h:message   for="code"   class="error-message"   id="codeError"/>  

         <h:outputLabel   value="City:"   for="city"/>  

         <h:inputText   id="city"   label="City"     

value="#{indexController.city}"   >  

            <f:validateRequired/>  

<f:ajax   event="blur"   render="cityError"/>  

</h:inputText>

         <h:message   for="city"   class="error-message"   id="cityError"/>  

         <h:outputLabel  value="Email  address:"  for="email"/>

         <h:inputText  id="email"  label="Email  address"  

value="#{indexController.email}">

<f:validator  validatorId="emailValidator"/>

<f:ajax  event="blur"  render="emailError"/>

</h:inputText>

         <h:message  for="email"  class="error-message"  id="emailError"/>

         <h:outputLabel  value="Change  date:"  for="date"/>

         <h:inputText  id="date"  label="Change  date"  required="true"  

  value="#{indexController.date}">

<f:validator  validatorId="dateValidator"/>

<f:ajax  event="blur"  render="dateError"/>

</h:inputText>

         <h:message  for="date"  class="error-message"  id="dateError"/>

<h:outputLabel  value="Job  titel:  "  for="title"/>

         <h:inputText  id="title"  required="false"    

value="#{indexController.title}"  />

<h:panelGroup/>

         <h:commandButton  value="Send"  action="#{indexController.add()}"  />

       </h:panelGrid>

       <a  href="list.xhtml">Show  addresses</a>

    </h:form>

  </h:body>

</html>

For example, if you consider the first field for entering the first name, you must specify which

validator  to  perform  and  then  the  element:

<f:ajax  event="blur"  render="frstnameError"/> 

Here you indicate that the ajax function must be executed after the input field has lost focus, as well as which element may be rendered in case of an error that is the element of the error message. When that event occurs, a request is made to the server, but asynchronously and only for the current input component. As a result, the felds are validated as the form is completed and the user will experience the form as filling out a form in a conventional desktop application. 

You should note that as an alternative, all validation functions could be written as javascript functions in this case, but in other cases, validation functions require a request to the server. 

EXERCISE

In this exercise, you should make a change to the above example. start by creating a copy of the project change address1. you must now change the program so the field for entering the city name is readonly. The database data has a table zipcode, which is a list of Danish zip codes. You must change the validation of the field to zip code, so a zip code is only legal if there is an existing zip code in the table zipcode. If this is the case, the city name must be updated with the corresponding city name, and otherwise, the city name must be blank. The validation of the zip code field must still be done using ajax. 

SUBMIT FIELDS WITHOUT RELOAD
As next, I want to show how you with a submit a send all fields to the server, but without reloading the page. The benefits are not so big, but it gives a quieter window, as it all happens asynchronously, and the user thus, to a lesser extent, notes that data being sent to the server, and since the entire document does not be rendered again. I will use the same examples above, and I have started with a copy that I have calledChangeAddress2. In index.xhtml, I’ve changed in two places. Te Submit button now has an ajax function:

<h:commandButton   value="Send"   action="#{indexController.add()}"   > 

 <f:ajax   event="action"   execute="@form"   render="@all"/> 

</h:commandButton>  

and you should note that the function is triggered by an action event that the function should relate to all form felds and that all felds must be rendered. In addition, the last the link must be changed to an 

h:commandLink:

<h:commandLink   value="Show   addresses"   action="list.

xhtml"   immediate="true"   />

and here you should especially note the last attribute that is required because of the command should

not validate the form felds. Finally, the link on the page list.xhtml is changed to a commandLink  

(what it should have been all the time).
In this case, all form felds are sent to the server by a submit, and it is all form felds that are updated after the ajax function is completed. It is not always you are interested in that and in fact, there could be only a few felds. In this case, I assume the date field should always be today, and in an index.xhtml I have defned the component readonly: 

<h:outputLabel   value="Current   date:"   for="date"/>   

<h:inputText   id="date"   label="Change   date"   readonly="true"   tabindex="-1"   

     value="#{indexController.date}"   />

You should note that there is no longer any ajax function associated with the component, and  I have also changed the text in the corresponding label.

In  order  to  initialize the field  date I have in the class Person changed the constructor so it initializes the date field to the current date:
public   Person()   

{  
  Calendar  cal  =  Calendar.getInstance();  
  date  =  String.format("%02d-%02d-%04d",  cal.get(Calendar.DATE),          

  cal.get(Calendar.MONTH)  +  1,  cal.get(Calendar.YEAR));  

Finally,  the  ajax  function  of  the  submit  button  in  index.xhtml  is  changed:

<h:commandButton   value="Send"   action="#{indexController.add()}"   >

<f:ajax  event="action"  execute="frstname  lastname  address  code  city  email  title"

render="frstname  lastname  address  code  city  email  title"/>

</h:commandButton>

That  is,  I  have  now  explicitly  specifed  which  form  felds  are  to  be  sent  to  the  server,  and which form felds must be rendered after the function has been completed.

In this case, the advantage is, of Java online course limited, but in other contexts, it may matter, and remember that the whole idea of ajax is only to update that part of a page that is necessary. 
I will make another change of the application, and I have started creating a copy that I have called ChangeAddress3. In index.xhtml the felds are validated with each their ajax function. You can actually achieve the same by encapsulating the felds to be validated in an f: ajax element:
The new elements have an in with the value weekend as well as a style attribute, where you should primarily note that the value of color is determined by the return value from the method isWeekend(), which is either red or dark green. As a result, the text appears either as red or green. Finally, the element defines an event of the type preRenderComonent. That is, the event handler (the element’s listener) is performed before the element is rendered and the handler is the method check for the weekend() in the controller class. It is executed each time the element is rendered, which naturally occurs when the page is rendered, but it also happens when the input component to date is changed, as the ajax function indicates that the element with id weekend must be rendered.

Share:
Share
  •  
  •  
  •  
  •  
  •  
  •  
  
Working

Please Login or Register