Using <a4j:log>To see this in action, you can use an <a4j:log>, which shows request
data, response data, DOM tree changes on update, and other useful debug
information. When placed on the page, the control doesn’t produce any
visible output, but after hitting Ctrl+Shift+L (the default register hotkey), a
debug window will open. If for some reason a debug log window doesn’t
open, change the hotkey by setting the hotkey attribute to a letter of your
choice, for example, <a4j:log hotkey="D"/>.
…
</rich:panel>
<a4j:log/>
------------------------------------
<h:inputText value="#{profile.age}">
<a4j:support event="onblur" reRender="userInfo"
ajaxSingle="true">
</h:inputText>
is equivalent to this:
<a4j:region>
<h:inputText value=”#{profile.age}”>
<a4j:support event=”onblur” reRender=”userInfo”>
</h:inputText>
</a4j:region>
*********
a4j:support****************
----------------------------------------
JavaScript Interactions
Although RichFaces shields you from writing JavaScript, sometimes you
might want to invoke a custom JavaScript function. Injecting custom
JavaScript is possible by using the following attributes on components that
initiate an Ajax request:
- onsubmit: Just before Ajax request is sent
- onbeforedomupdate: Before any DOM updates are processed
- oncomplete: After DOM updates have been processed
-----------------------
Using bypassUpdates
When just validating form values, set bypassUpdates="true". When set
to true, the Update Model and Invoke Application phases will not be
invoked, improving response time.
-------------------------------------------
Using eventsQueue and requestDelay
Use the eventsQueue attribute when possible. When setting
eventsQueue, the next request will not be set until the previous request
comes back (the response). To further control the sending of requests, use
requestDelay to delay the sending of a request by some number of
milliseconds.
--------------------------------------------------------
Another attribute is data, which allows you to get any additional data from
the server during an Ajax request. The data attribute can simply point to a
bean property via EL, and the data will be serialized in JSON format and
available on the client side. Here’s an example:
<a4j:commandButton value="Submit" reRender="out"
data="#{bean.text}"
oncomplete="alert(data)"/>
where text is as follows:
private String text = "Nice, I can get any data from the server";
*********
/a4j:support****************
--------------------------------------------------------------------------
Notice that the event on which an
Ajax request is sent is onblur. The onblur event means the user has to tab
out of the current field or click somewhere else using the mouse.
-------------------------------------------------------------------
To show a modal window with a status "Please wait" and block everything in the background, you can do something like this:
<h:form>
<a4j:commandButton actionListener="#{bean.calculate}"
value="Calculate"/>
</h:form>
<rich:modalPanel id="mp" style="text-align:center">
<h:outputText value="Please wait..."
style="font-weight:bold;font-size:large"/>
</rich:modalPanel>
186 Using RichFaces
<a4j:status id="actionStatus"
onstart="#{rich:component('mp')}.show('',{height:'80',
width:'150'})"
onstop="#{rich:component('mp')}.hide()" />