JSF + DynamicFaces = AJAX

JSF in brief

JSF - component MVC framework for web applications on java. Its main task is to simplify the development of the interface and its linking with the server part. JSF contains validators and converters, you can also add your own components and modify existing ones.
About JSF more here (in Russian) and here (in English).

So what is Dynamic Faces? This is a library for adding dynamics to jsf applications. The biggest advantage of this library is that DF does not require modifying components or rewriting something in the application to add Ajax.

How to add Dynamic Faces to an app?

Add to tag library
<%@ taglib prefix="jsfExt"
uri="http://java.sun.com/jsf/extensions/dynafaces" %>

Add the following tag to the head tag of our page to initialize the js libraries
<jsfExt:scripts />

In the form set the attribute prependId to false
<h:form prependId="false" id="form">

So, imagine that we have a page with a large number of jsf controls, when changing one of them we need to dynamically update some area. For example, the order of the car, all the parameters of the configuration affect the price. We change any characteristic - the price changes immediately.
')

What does this look like?

< jsfExt: ajaxZone id = "zoneParams" execute = "zoneParams" render = "zonePrice" >
Engine size < h: selectOneMenu binding = "# {ApplicationBean.components.engine}" />
Seats < h: selectOneRadio binding = "# {ApplicationBean.components.seats}" />
</ jsfExt: ajaxZone >
< jsfExt: ajaxZone id = "zonePrice" >
Price: < h: outputtext id = "price" value = "# {ApplicationBean.price}" />
</ jsfExt: ajaxZone >

* This source code was highlighted with Source Code Highlighter .

zoneParams - Area with car characteristics, execute - area in which any changed values ​​are sent to the server, execute - area that will be redrawn.
zonePrice - Area with price

Another way:

We can generate ajax transaction for any event on any component.

For example:

Enter text:
< h: inputText id = "inputText" valueChangeListener = "# {ApplicationBean.valueChangeTxt}"
value = "# {ApplicationBean.textVal}" />

< h: commandButton value = "OK"
onclick = “fireTransaction (this); return false; " />

Your text:
< h: outputText id = "outputText" value = "# {ApplicationBean.textVal}" />

* This source code was highlighted with Source Code Highlighter .

Javascript:

function fireTransaction ( object )
{
DynaFaces.fireAjaxTransaction ( object ,
{
execute: 'inputText' ,
render: 'outputText' ,
inputs: 'inputText'
});
} * This source code was highlighted with Source Code Highlighter .

Now we will understand what we wrote here

We have 3 jsf components:
inputText - I think by the name it is clear which html-tag is hidden behind this name. The tag has the valueChangeListener attribute, which points to a method in the ApplicationBean that will be executed when the value is changed, we will recall it later. Value - indicates the property where the value that we entered will be stored.

CommandButton - the button, clicking on which actually generates a jsf-transaction. We see the firesransaction js method, let's take a closer look at it.
The html-object of the component that causes the transaction is passed as a parameter, then we call DynaFaces.

fireAjaxTransaction is a method from the Dynamic Faces library.
execute - id of the component from which we take the value
render - id of the component to be updated
execute - id of the component that will be executed. The method in valueChangeListener that we talked about earlier is used.
After calling this function, we return false, this is done so that the submit event for the form does not work and the page does not reload.

outputText is the update value.

That's all, we enter the text, click on the button, the text is sent to the server and from there it enters the interface again, and the valueChangeTxt method is also called.
The call of transaction can be hung up on any events.

Read more about Dynamic Faces here.