JSF Mini Book – Tips, concepts and good practices

Ajax with  JSF 2.0

Ajax is a technology capable of rendering an area of a web page without the needing of refreshing all the page. Sometimes we got a web page full of information and the developer wants update just one field; to update all page components through a navigation could make the user uncomfortable.

In JSF 1.2 the developer needs to use some framework that implements Ajax. With JSF 2.0 the Ajax is native and to use it just the “f:ajax” tag is needed.

If a developer add the f:ajax tag in a inputText component the developer will be adding an event that will be handled by the browser/container. The easiest Ajax sample possible would be: an inputText that for each pressed key it would update other component.

Add the import of ajax tag to the page:

xmlns:f="http://java.sun.com/jsf/core"

The code below show how to do it (myBean would have a get/set to the String userName):

<h:inputText value="#{myBean.userName}">
	<f:ajax event="keyup" render="showName" execute="@this" />
</h:inputText>

<h:outputText id="showName" value="#{myBean.userName}" />

In the code above, for each time that the user types a value in the keyboard a call will be done to the ManagedBean, the attribute value will be updated and will have its value refreshed in the outputText component.

What makes the behavior of the Ajax different of the regular Request (Get/Post) is the fact that it can send or not all form, and render or not the components in the user page. When a regular HTTP Request is fired all the data in the page form is sent, it is not possible to select a specific value to send; when the container receives the request it will need to process/validate all values from all components. One of the Ajax advantages is the fact that we can select which value will go inside the request and which component will be updated in the response.

In the code above, it was indicated that the component to be processed/executed is the inputText and the outputText is the component to be rendered. It is possible to have a form with 15 inputTexts and to select which inputText would be processed/executed. We could choose which input to render separately.

For every Ajax request we can indicate a component to be processed. In the code above the component was indicate by the “@this”. This value indicates that the component that has the “f:ajax” tag should be processed/executed in the request; the component that had the “@this” was an inputText so the ManagedBean has access to its value. All the allowed values are: “@this”, “@form”,“@all”,“@none”. With Ajax the default value to the execute is @this and to the render is “@none”.

Values execute render
@this Will send the component with the request. This is de default value. Will render the attribute that started the request.
@form All the components found in the form of the f:ajax tag will be sent in the request. Will render all the components present in form of the f:ajax tag that started the request.
@all All the components in the view will be sent with the request. Will render all components found in the view.
@none No component will be sent. No component will be rendered after the Ajax request. This is the default value.

It is needed to pay attention to the event name. The “on” word should not be put in front of the event name. We do not use the “onchange” as the event name but we use the “change”.

Other advantage of using Ajax with JSF 2.0 is the possibility of rendering any kind of component. Components like message displayers, alerts, that execute validations in the field, etc.

Some developers use the Javascript in a field validation but they do not know that with Ajax it is also possible to use this validation. In the code below we want the inputText to have a valid number value and an error message displayed if any error is found; notice that there is no Javascript code.

<h:inputText id="number" value="#{myBean.number}" >
	<f:convertNumber />
	<f:ajax event="keyup" render="@this numberMessage" />			
</h:inputText>

<h:message for=" number " id="numberMessage" />

If the user types a value that is not a valid number, an error message will be displayed through the “h:message” component. Notice is also possible to send more than one component to be rendered; it is also allowed to send more than one component in the “executed” attribute.

The validation in the code above has the following advantages:

  • Complex validation can be done – if a complex validation that requires database search, math calculation, etc. It is not viable to write complex validations or business rule in the Javascript.
  • Reduce de Javascript code – one of the major Javascript problems is that it might work in one browser but do not work in another; with the Ajax validation using with the JSF components this kind of problem will not happen.
  • Some warning/informative messages can be displayed before the page submit – with Ajax validation the user can know before the form submit if there is a bad value. A zip code could pass the Javascript validation but it could not be found at the database.
  • There is no way to cheat this kind of validation – validation with Javascript can be turned off or cheated. A user can manipulate some browser configuration and turn off the Javascript validation. Plugins, like Firebug,  allows an user to edit the Javascript code of the page. After an user turn off or edit the Javascript, the prior validation will not have the desired behavior. The Ajax validation is executed by the container.

It must be said that this approach has as disadvantage that for every validation a Ajax request will be fired to the server. The heavily Ajax validation utilization may cause the server performance to decrease. In this situation it is worth of use both validations. Javascript and Ajax validation; if pass by the Javascript validation the Ajax validation would be used.

18 thoughts on “JSF Mini Book – Tips, concepts and good practices

  1. Really cool material! I agree with Tim. If this could be distributed in pdf format, you will become a little more famous. :) Thanks, good job!

  2. I’m not able to see this library applied in my program.
    Output is: Real Madrid, Champion!!! (No image and style)

    Please let me know what I’m missing.

  3. I was trying to learn Spring MVC for last 2 months, Every time i try to start, i get stuck somewhere. 2 Months passed, and i did not learn anything. I purchased two books for spring. Finally i quit Java web programming. One day I thought to give a try to JSF. and found some tutorials online, worked on them and I loved it. Your tutorials are going to help me a lot.
    Thank you so much.
    I would like to tell people here, don’t go near spring, It’s a piece of crap.

    • Arslan,

      Thanks for the feedback.

      My next post will be a full web application with Spring MVC.

      Maybe this application will help you understanding better the Spring, it is a good tool! =D

      See you later.

  4. With your code lines

    and

    eclipse was giving error that:

    Multiple annotations found at this line:
    – Invalid location of text (“) in tag ().
    – Invalid location of text (=”) in tag ().
    – Element type “h:outputStylesheetlibrary” must be followed by either attribute specifications, “>”
    or “/>”.

    So I’ve corrected it by changing lines to

    But I think as you mentioned in case of versions of resources, it will automatically picks up latest version. but the code I’m using will not control the version. It looks like hard-coded.

    What you say about it?

    Moreover, You wrote:
    “To use a mapped library by the ResourceHandler let us create a folder named “index.xhtml” inside the folder “/WebContent”.”

    I think you have not created a folder name “index.xhtml” but you have created a file named “index.xhtml”. If I’m right then you need to correct it. :)

    • Hello Arslan, how are you?

      Unfortunately the xml are not displayed here. =/

      Could you send me an email with the code and the texts that you wrote?

      Thanks for your support and passing by.

      My email is contato (at] uaihebert (d0T) com

      Thanks

Leave a Comment