Monday, May 7, 2007

Dynamic Pages adds AJAX to your JSF pages

I was going through the "Adding Ajax to JavaServer Faces Technology With Dynamic Faces" tutorial, and it occurred to me that it would have been a much more AJAXy solution to have the check on the existence of the User ID to occur when the user moved to the next field (without the need to click on a button - which is so Web 1.0 !)

That is easily done, by removing the "Check for user ID availability" button altogether, and adding the Dynamic Faces action on the 'onblur' method for the user ID text field:


                
<!-- Dynamic Faces usage follows: -->
<h:inputText required="true" id="userid" autocomplete="off"
binding="#{Register_Backing.userid}"
valueChangeListener="#{Register_Backing.userIdChanged}"
onblur="DynaFaces.fireAjaxTransaction(this, {
execute: 'userid',
render: 'userIDAvailableMessage',
immediate: true});
return true;" />
<h:message for="userid" errorClass="ValidateError"/>
<br />
<!-- this is the element rendered by the AJAX request -->
<h:outputText style="{color: red}" id="userIDAvailableMessage"
value="#{requestScope.userIDAvailableMessage}" />
<br />


The userIdChanged method in the Register.java class simply calls the original checkUserIDAvailable method:

public void userIdChanged(ValueChangeEvent e) {
ActionEvent aev = new ActionEvent(e.getComponent());
checkUserIDAvailable(aev);
}

It is also worth noting that the installation instructions at the beginning of the article are particularly uninformative - in fact, it is NOT necessary to download and install the Sun Developer Web Pack (I found the idea particularly frightening, as apart from the installation process being particularly cumbersome, it also seemed like the shortest path to messing up my carefully crafted NetBeans / Tomcat / Sun App Server (GlassFish) settings).

In fact, jsf-extensions (Dynamic Faces) is likely to already be in your NetBeans installation (if you have installed the Visual Web component) or, equally simply, can be installed by downloading it from the Dynamic Faces Project page.

No comments:

Post a Comment