The <a4j:commandButton> component is very similar to the <h:commandButton> component, the only difference is that an AJAX form submit is generated on a click and it allows dynamic rerendering after a response comes back. It's not necessary to plug any support into the component, as AJAX support is already built in.

<a4j:commandButton> is used in the same way as <h:commandButton> , but with definition of the area that is updated after the response comes back from the server.

<a4j:commandButton reRender="someData" action="#{bean.action1}" value="Link"/>

This definition of the component provides a link, a click on the link causes an AJAX form submit on the server, "action1" method performance, and rendering of the component with "someData" id after the response comes back from the server.

Example:

import org.ajax4jsf.ajax.html.HtmlAjaxCommandButton;
...
HtmlAjaxCommandButton myButton = new HtmlAjaxCommandButton();
...

The component <a4j:commandButton> placed on a page generates the following HTML code:

<input type="submit" onclick="A4J.AJAX.Submit(...request parameters);return false;" value="sort"/>

Hence, the utility method "A4J.AJAX.Submit" is called on a click, the method performs AJAX request as the <a4j:support> component

Common JSF navigation could be performed after an AJAX submit and partial rendering, but Navigation Case must be defined as <redirect/> in order to avoid problems with some browsers.

As any Ajax4jsf component sending AJAX requests and processing server responses <a4j:commandButton> has all attributes described above (see <a4j:support> chapter) that provide the required behavior of requests sending (delay, limitation of submit area and rendering, and etc.)

The <a4j:commandLink> component is very similar to the <h:commandLink> component, the only difference is that an AJAX form submit is generated on a click and it allows dynamic rerendering after a response comes back. It's not necessary to plug any support into the component, as AJAX support is already built in.

<a4j:commandLink> is used in the same way as <h:commandLink> , but with definition of the area that is updated after the response comes back from the server.

<a4j:commandLink reRender="someData" action="#{bean.action1}" value="Link"/>

This definition of the component provides a link, and a click on the link causes an AJAX form submit on the server, "action1" method performance, and rendering of the component with "someData" id after the response comes back from the server.

Example:

import org.ajax4jsf.ajax.html.HtmlAjaxCommandLink;
...
HtmlAjaxCommandLink myLink = new HtmlAjaxCommandLink();
...

The component <a4j:commandLink> placed on a page generates the following HTML code:

<a href="#" onclick="A4J.AJAX.Submit(?"request parameters");
	  return 
	  <a href="#" onclick="A4J.AJAX.Submit(?"request parameters");
	  return false;">
	  <span style="color: black;">Link Value</span>
	  </a>

Hence, the utility method "A4J.AJAX.Submit" is called on a click, the method performs AJAX request as the <a4j:support> component

Common JSF navigation could be performed after AJAX submit and partial rendering, but Navigation Case must be defined as <redirect/> in order to avoid problems with some browsers.

As any Ajax4jsf component sending AJAX requests and processing server responses <a4j:commandLink> has all attributes described above (see <a4j:support> chapter) that provide the required behavior of requests sending (delay, limitation of submit area and rendering, etc.)

The <a4j:form> component is very similar to the same component from the JSF HTML library, the only slight difference is in generation of links inside and possibility of AJAX by-default submission.

Component definition on a page is similar to definition of the original component from JSF HTML library.

<a4j:form>
	<!--...Some content to be submitted.-->
</a4j:form>

Example:

import org.ajax4jsf.ajax.html.AjaxForm;
...
AjaxForm myForm = new AjaxForm();
...

The difference with the original component is that all hidden fields required for command links are always rendered and it doesn't depend on links rendering on the initial page. It solves the problem with invalid links that weren't rendered on a page immediately, but after some AJAX request.

Beginning with release 1.0.5 additional attributes that make this form variant universal have appeared. With a new attribute definition as ajax= "true" , it becomes possible to set AJAX submission way for any components inside, i.e. not a page URL is used as an "action" attribute, but the javascript:A4J.AJAX.Submit(...) call. In this case, rendering is defined as reRender=list of Ids for the form element itself.

Example

<a4j:form id="helloForm" ajaxSubmit="true" reRender="table">
	...
	<t:dataTable id="table"... >
		...
	</t:dataTable>
	...
	<t:dataScroller for="table"... >
		...
	</t:dataScroller>
	...
</a4j:form

This example shows that in order to make <t:dataScroller> submissions to be AJAX ones it's required only to place this <t:dataScroller> into <a4j:form> . In the other case it is necessary to redefine renders for its child links elements that are defined as <h:commandLink> and can't be made AJAX ones with using e.g. <a4j:support> .

The <a4j:htmlCommandLink> component is very similar to the same component from the JSF HTML library, the only slight difference is in links generation and problem solving that occurs when an original component is used.

Component definition on a page is the same as for the original component from the JSF HTML library.

Example:

<a4j:htmlCommandLink value="value" action="action"/>

Example:

import javax.faces.component.html.HtmlCommandLink;
...
HtmlCommandLink myForm = new HtmlCommandLink();
...

The difference with the original component is that all hidden fields required for command links with the child <f:param> elements are always rendered and it doesn't depend on links rendering on the initial page. It solves the problem with invalid links that weren't rendered on a page immediately, but after some AJAX request.

Example:

<a4j:form>
	...
	<a4j:htmlComandLink action="action" value="link" rendered="#{bean.rendered}">
		<f:param ...>
	<a4j:htmlComandLink>
	...
</a4j:form>

In this example <a4j:htmlCommandLink> works as standard <h:commandLink> , but here hidden fields required for correct functionality are rendered before the first downloading of a page, though it doesn't happen if its attribute isn't set to "false".

The <a4j:jsFunction> component allows to invoke the server side data and return it in a JSON format to use in a client JavaScript calls.

Simple component definition example:

Example:

...
<head>
	<script>
		<!--There is some script named "myScript" that uses parameters which will be taken from server-->
	</script>
</head>
<body>
...
<a4j:jsFunction data="#{bean.someProperty}" name="callScript" oncomplete="myScript(data.subProperty1, data.subProperty2)"/>
...
	

The script "myScript" will be called after bean.someProperty data will be returned from server(e.g. It'll be object with two subproperties).

Example:

import org.ajax4jsf.ajax.html.HtmlAjaxFunction;
...
HtmlAjaxFunction myFunction = new HtmlAjaxFunction();
...

As the component uses Ajax request to get data from server - it has all common Ajax Action attributes. So, action and actionListener can be invoked, and reRendering some parts of the page fired after calling function.

When using the <a4j:jsFunction> it's possible to initiate the AJAX request from the JavaScript and perform partial update of a page and/or invoke the JavaScript function with data returned by AJAX response.

...
<body onload="callScript()">
    ...
    <h:form>
    ...
    <a4j:jsFunction name="callScript" data="#{bean.someProperty1 }
                    "reRender="someComponent" oncomplete="myScript(data.subProperty1, data.subProperty2)">
        <a4j:actionparam name="param_name" assignTo="#{bean.someProperty2}">
        </a4j:actionparam>
    </a4j:jsFunction>
    ...
    </h:form>
    ...
</body>
...

The <a4j:jsFunction> allows to use <a4j:actionparam> or pure <f:param> for passing any number of parameters of the JavaScript function into AJAX request. <a4j:jsFunction> is similar to <a4j:commandButton> , but it could be activated from the JavaScript code. It allows to invoke some server side functionality and use the returned data in the JavaScript function invoked from "oncomplete" attribute. So it's possible to use <a4j:jsFunction> instead of <a4j:commandButton> . You can put it anywhere, just don't forget to use <h:form> … </h:form> around it.

To see how <a4j:jsFunction> works on practice, look at a4j-jsFunction example from here.

The <a4j:include> component is used for page areas update after an AJAX request according to the faces-config Navigation Rules and for implementation of wizard-like parts work in AJAX mode.

To use the component, it's necessary to place the following strings on a page:

Example:

<h:panelGroup id="wizard">
		<a4j:include  viewId="/pages/include/first.xhtml" />
</h:panelGroup>

For navigation inside a page defined in viewId any components responsible for AJAX requests to the server generation are used.

For example, the following component on the page "/pages/include/first.xhtml"

Example:

...
<a4j:commandButton action="next" reRender="wizard"/>
...

And in faces-config it's defined:

Example:

<navigation-rule>
  <from-view-id>/pages/include/first.xhtml</from-view-id>
  <navigation-case>
   <from-outcome>next</from-outcome>
   <to-view-id>/pages/include/second.xhtml</to-view-id>
  </navigation-case>
 </navigation-rule>

In this case after a click on a button defined inside "first.xhtml" view, navigation is performed after an AJAX request (the same as standard JSF one) only inside this view.

<a4j:outputPanel ajaxRendered="true">
	<a4j:include  viewId="/pages/include/first.xhtml"/>
</a4j:outputPanel>

If <a4j:include> is defined this way, any AJAX request returning outcome inside generates navigation with this <a4j:include> .

Ajax Action for navigation implementation inside view must be placed inside <a4j:include> pages. Navigation defined by these pages is applied to the <a4j:include> element current for them.

As in the general case for Ajax Action component, if the <a4j:action> component inside <a4j:include> returns outcome defined as <redirect/>, AJAX submit is performed with navigation of the whole page and not only of the current view.

Some additional information can be found on the Ajax4Jsf Users Forum.

Inserts script links to the head element. Render the value of the component as the value of the "src" attribute, after passing it to the getResourceURL() method of the ViewHandler for this application, and passing the result through the encodeResourceURL() method of the ExternalContext.

Simple Component definition on a page:

Example:

<a4j:loadScript src="scripts/someScript.js"/>

Example:

import org.ajax4jsf.ajax.html.HtmlLoadScript;
...
HtmlLoadScript myScript = new HtmlLoadScript();
...

As it was mentioned before this componment returns its value passing it to the getResourceUR() method of the ViewHandler for this application, and passing the result through the encodeResourceURL() method of the ExternalContext.

It means that the Context will be inserts automatically to the link. And calls like resource:// will be properly handled.

Except this - you may be free to put your script links right from the child page while using facelets templates .

Inserts stylesheet links to the head element. Render the value of the component as the value of the "src" attribute, after passing it to the getResourceURL() method of the ViewHandler for this application, and passing the result through the encodeResourceURL() method of the ExternalContext.

Simple Component definition on a page:

Example:

<a4j:loadStyle src="styles/style.css"/>

Example:

import org.ajax4jsf.ajax.html.HtmlLoadStyle;
...
HtmlLoadScript myStyle = new HtmlLoadStyle();
...

As it was mentioned before this componment returns its value passing it to the getResourceUR() method of the ViewHandler for this application, and passing the result via the encodeResourceURL() method of the ExternalContext.

It means that the Context will be inserts automatically to the link. And calls like resource:// will be properly handled.

Except this - you may be free to put your stylesheet links right from the child page while using facelets templates .

The <a4j:log > component generates JavaScript for opening of the window with client-side debug information on an AJAX request.

To use the component, it's necessary to place the following string on a page:

<a4j:log/>

Then, in order to open a log window, press "CTRL+SHIFT+L" on a page with the component.

Example:

import org.ajax4jsf.ajax.html.AjaxLog;
...
AjaxLog myLog = new AjaxLog();
...

Usage of the appropriate component attributes could change a representation level of debug information as well as the hot key for a window opening.

The hot key could be changed with the "hotkey" attribute, where it's necessary to define one letter that together with "CTRL+SHIFT" opens a window.

The "level" attribute with several possible values (FATAL, ERROR, WARN, INFO, ALL) could change a logging level.

The log could be generated not only in a new window, but also on the current page in a separate <div> , this is also controlled with the "popup" attribute on the component.

Example:

<a4j:log level="ALL" popup="false" width="400" height="200"/>

The component defined this way is decoded on a page as <div> inside a page, where all the information beginning with informational message is generated.

The <a4j:mediaOutput> component implements one of the basic features specified in the framework. The component is a facility for generating images, video, sounds and other binary resources defined by a user on-the-fly.

To use the component it's necessary to define it on a page and set Java methods for data keeping and data transmission to output stream.

Component definition on a page for graphical data output

Example:

...
<a4j:mediaOutput element="img" cacheable="false" session="true"
    createContent="#{paintBean.paint}" value="#{paintData}"
    mimeType="image/jpeg"/>
...

Here is the content of paintData that is a bean containing output data

Example:

package demo;

public class PaintData implements Serializable{
        private static final long serialVersionUID = 1L;
        Integer width=100;
        Integer weight=50;
...

The Paint method of the paintBean class is a method transmitting graphical data into output stream.

Example:

public void paint(OutputStream out, Object data) throws IOException{
	<!--...Some code that puts binary data to "out" Stream-->
        }

Example:

import org.ajax4jsf.ajax.html.MediaOutput;
...
MediaOutput myMedia = new MediaOutput ();
...

As it was shown in the example above there are two main components:

Hence, when using the component it's possible to output user data of any type on a page with AJAX requests.

The component is used for components grouping in the AJAX output area, which offers several additional output opportunities such as inserting of non-present in tree components, saving of transient elements after AJAX request and some others.

Here is the simplest way for a component creation on a page.

Example:

<a4j:outputPanel>
<!--...Some Content Inside-->
</a4j:outputPanel>

Example:

import org.ajax4jsf.ajax.html.HtmlAjaxOutputPanel;
...
HtmlAjaxOutputPanel  myPanel = new HtmlAjaxOutputPanel();

<a4j:outPanel> allows marking of a page area, which is updated on Ajax response. Anyway, <a4j:outputPanel> usage is optional, as in Ajax4jsf it's possible to indicate any existing component id on a component view in order to define updating areas. To speed up the performance, Ajax4jsf updates only a component tree. <a4j:outputPanel> usage is recommended for wrapping components that aren't rendered during the primary non-ajax response, as the components don't present in a component tree.

Example:

<a4j:support ... reRender="mypanel"/>
...
<a4j:outputPanel id="mypanel">
  <h:panelGrid rendered="#{not empty foo.bar}">
	...
  </h:panelGrid>
</a4j:outputPanel>

In addition to the areas directly indicated in reRender attribute of Ajax components, <a4j:outputPanel> allows to update a part of a page basing on its own flag. The flag is defined by the ajaxRendered attribute. The flag is commonly used when a part of a page must be updated or can be updated on any response.

Example:

<a4j:outputPanel ajaxRendered="true">
  <h:messages/>
</a4j:outputPanel>

On default <a4j:outputPanel> is output as a pair of opening and closing html <span> tag, but with the help of the layout attribute this output way could be changed. There are three variants for this component value:

If layout="block" is chosen, the component is rendered as a pair of opening and closing <div> tag, to which it’s possible to apply any available style attributes available for block tags.

Layout="none" helps to avoid an unnecessary tag round a context that could or couldn't be rendered according to the defined "rendered" attribute conditions. If an inner context isn’t rendered, <a4j:outputPanel> is rendered as a <span> tag with the id equal to an id of a child component and "display:none" style. If a child component is rendered, <a4j:outputPanel> doesn't present at all in a final code.

Example:

<a4j:support .... reRender="mypanel"/>
...
<a4j:outputPanel layout="none">
  <h:panelGrid id="mypanel" rendered="#{not empty foo.bar}">
	...
  </h:panelGrid>
</a4j:outputPanel>

As you see, the code is very similar to the one shown above, but "reRender " attribute refers directly to the updating panelGrid and not to the framing outputPanel, and it's more semantically correct.

<a4j:outPanel> should be used for non-JSF component part framing, which is to be updated on Ajax response, as Ajax4jsf specifies the list of updating areas as a list of an existing JSF component.

On default non-JSF context isn't saved in a component tree, but is rendered anew every time. To accelerate the processing speed and Ajax response input speed, Ajax4jsf saves non-JSF context in a component tree on default. This option could be canceled by keepTransient attribute that cancels transient flag forced setting for child components. This flag setting keeps the current value set by child components.

Note: In JSF 1.1 implementation and lower, where non-JSF context should be framed with the "f:verbatim" attribute, <a4j:outputPanel> doesn't improve this JSF implementation option in any way, so you still have to use this tag where it's necessary without Ajax4jsf usage.

Ajax4jsf allows setting Ajax responses rendering directly basing on component tree nodes without referring to the JSP (XHTML) page code. It could be defined by selfRendered attribute setting to "true" on <a4j:region> and could help considerably speed up a response output. However, if a transient flag is kept as it is, this rapid processing could cause missing of transient components that present on view and don’t come into a component tree. Hence, for any particular case you could choose a way for you application optimization: speed up processing or redundant memory for keeping tree part earlier defined a transient.

Some additional information about usage of component can be found here.

<a4j:page> is a deprecated component used for solving of incompatibility problems in early Ajax4jsf and MyFaces versions. The component encodes the full html page structure.

This component should be defined as a child component for <f:view>

<f:view>
 <a4j:page>
  <f:facet name="head">
   <!--...Head Content here-->
  </f:facet>
   <!--...Page Content here-->
 </a4j:page>
</f:view>

This structure is rendered as:

Example:

<HTML>
 <HEAD> 
 <!--...Head Content here-->
 </HEAD> 
<body >
 <!--...Page Content Here-->
</body> 
</HTML>

Example:

import org.ajax4jsf.components.Page;
...
Page myPage = new Page();
...

The component is mostly used to solve the following problem with MyFaces for erlier Ajax4gsf versions: in MyFaces <f:view> doesn't get control over the " RENDER_RESPONSE " phase, thus AJAX can't get control and make a response also. To avoid this problem it was necessary to use <a4j:page> on the page round the AJAX updatable area. In the last versions of both frameworks the problem is successfully fixed and no <a4j:page> usage is required.

The component is rendered as a full HTML page template (it was shown in the example). The " head " section is defined with the help of the corresponding facet with the name="head" and also there is an attribute with the same name for contentType definition.

All other component functionality is the same as of <a4j:region>. Its desctriprion could be found here.

The <a4j:poll> component allows periodical sending of AJAX requests to the server and is used for a page update according to a specified in milliseconds time interval.

To use this component it's necessary only to set an update interval.

Example:

<a4j:poll interval="1000" reRender="someDataTable" action="#{bean.action1}"/>

The <a4j:poll> component defined this way every second submits AJAX form onto the server, performs the corresponding action and renders a components with the "someDataTable" id after a response comes back.

Example:

import org.ajax4jsf.ajax.html.AjaxPoll;
...
AjaxPoll myPoll = new AjaxPoll();
...

The component decodes all necessary JavaScript for time count and on the expiry of some interval for calling of a Ajax4jsf utility method for Ajax request sending (A4J.AJAX.Submit (Some request parameters)).

The timer could be stopped or started in any time. The current state is controlled on the component with the "enabled" attribute:

<a4j:poll interval="1000" enabled="#{bean.boolProperty}"/>

As any Ajax4jsf Action component, <a4j:poll> has all described in the <a4j:support> chapter attributes to provide the necessary behavior of request sending (delay, limitation of a submit and render area, requests frequency, and etc.). For detailed information on these attributes see again the <a4j:support> component description.

The aditional information about component usage you can find here:Ajax4Jsf Users Forum.

The <a4j:push> periodically perform AJAX request to server, to simulate 'push' data.

<a4j:push reRender="msg" eventProducer="#{messageBean.addListener}" interval="3000"/>

import org.ajax4jsf.ajax.html.AjaxPush;
...
AjaxPush myPush = new AjaxPush();
...

The main difference between <a4j:push> and <a4j:poll> components is that <a4j:push> makes request to minimal code only (not to JSF tree) in order to check the presence of messages in the queue. If the message exists the complete request will be performed. The component doesn't poll registered beans but registers EventListener which receives messages about events.

There are some attributes which allows to customize of the component behaviour:

'interval' - Interval (in ms) for call push requests. Default value 1000 (1 sec).

public void addListener(EventListener listener) {
synchronized (listener) {
	if (this.listener != listener) {
	this.listener = (PushEventListener) listener;
}

System.out.println("event occurs");
synchronized (listener) {
	listener.onEvent(new EventObject(this));
}

The <a4j:region> component defines an area that is decoded on the server after AJAX submission.

Here is an example of the region decoding on a page.

<a4j:region>
	<!--..Some content that will be decoded on server after Ajax request.-->
</a4j:region>

Example:

import org.ajax4jsf.ajax.html.HtmlAjaxRegion;
...
HtmlAjaxRegion newRegion = new HtmlAjaxRegion(