In JavaServer Faces 2.0 they have attempted to integrate Ajax and javascript. In an attempt to make it as easy as possible, and to increase the pluggability of the entire framework, the decision was made to come up with the concept of ClientBehavior. This seems to have been inspired by the presence of f:validator and f:convertor. Non Gui components that add extra functionality to their parent tags.
In theorie this is ok, but the events to which you can attache behaviour, are limited to the events returned by the getEventNames() method of ClientBehaviourHolder. This interface is implemented by some components. For some reason the Specification team decided that in the HTML renderkit only
the editable value holder should implement this interface, and that the only events that are supported are the official dom events. The last part I can understand since the HTML renderkit does only try to specify the minimum requirements.
In an attempt at integrating f:ajax for custom jquery events I ran into the limitations this imposes in relation to the front end development. We all know ASP.NET uses jquery, and it is a toolkit that is impossible to overlook at the moment. In this small howto we will write a jquery uicomponent that allwos us to attach f:ajax behaviour to it so we can invoke remote methods from backingbeans. The end result will look like this:
<h:form id="form">
<h:panelGroup layout="block" id="draggable">
<div><h:outputText value="Drag me"/></div>
<howest:jquery events="dragstart,drag,dragstop" default="dragstop" plugin="draggable" options="{handle: 'div'}">
<f:ajax listener="#{sample.doStart}" render="status" event="dragstart"/>
<f:ajax listener="#{sample.doDrag}" render="status" event="drag"/>
<f:ajax listener="#{sample.doStop}" render="status" event="dragstop"/>
</howest:jquery>
</h:panelGroup>
<h:outputText id="status" value="#{sample.status}" />
</h:form>
We will be using ResourceDepency to inject the correct jquery libraries. The tag as you can see will allow us to create composite tags that use jquery. For example a draggable tag or whatever you want.
You can get the code from github here. It's a slightly modified maven library and demo project that should get you up and running.