Sunday, June 11, 2006

JSF and AJAX together got easier

With ajax4jsf it is possible to embedd ajax capabilities in JSF relatively easy without a single javascript line!

Here is how we do it (example):

<%@ page language="java" contentType="text/html;charset=UTF-8"%>

<%@ taglib uri="" prefix="a4j"%>
<%@ taglib uri="" prefix="h"%>
<%@ taglib uri="" prefix="f"%>
<%@ taglib uri="" prefix="s" %>
<%@ taglib uri="" prefix="t" %>



<a4j:region selfRendered="true">

<h:form id="selectCityForm">

<h:selectOneMenu id="selectCityMenu" value="#{}" converter="CityBeanConverter">
<a4j:support event="onchange" reRender="editCityPanel" />
<f:selectItems value="#{cityHandler.allCities}" />

<a4j:commandButton id="loadButton"
reRender="editCityPanel" value="Load"/>

<a4j:status startText=" Requesting..." startStyle="color:red" stopText=" Done" stopStyle="color:blue"/>

<h:selectBooleanCheckbox id="selectFilter" value="#{cityHandler.hideAlreadySetLatLng}">
<a4j:support event="onchange" reRender="selectCityForm"/>



The form (can be other elements) which gets updated:


<h:form id="editCityPanel" style="padding-top: 0.5cm;">
<h:outputLabel id="cityNameLbl" value="Name" for="cityName"/>
<h:inputText id="cityName" value="#{}" required="true" />

Notice there is <a4j:status/> for better feedback. reRender attributes of <a4j:support /> and <a4j:commandButton /> specify id's of elements that need to be rerendered after the actions got triggered.