No Duplicate Content Allowed, No Re-posting of copyrighted materials allowed. Only Unique Content is Allowed.
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.
