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="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/sandbox" prefix="s" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>

...


<body>
<f:view>

<a4j:region selfRendered="true">

<h:form id="selectCityForm">

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

<a4j:commandButton id="loadButton"
action="#{cityHandler.ajaxFormSubmit}"
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"/>
</h:selectBooleanCheckbox>


</h:form>

...

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="#{cityHandler.city.name}" required="true" />
</h:form>


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.