Rich Ajax

Rich faces adds Ajax capability to the existing JSF applications. Framework provides two components libraries (Core Ajax and UI). The Core library sets Ajax functionality into existing pages, so there is no need to write any JavaScript code or to replace existing components with new Ajax ones.

RichFaces enables page-wide Ajax support instead of the traditional component-wide support and it gives the opportunity to define the event on the page. An event invokes an Ajax request and areas of the page which become synchronized with the JSF Component Tree after changing the data on the server by Ajax request in accordance with events fired on the client.

Here we'll show a simple example of Ajax command link a4j:commandLink. That's similar to the standard JSF h:commandLink, however it produces an Ajax request with further partial page update. 

Let's write a jsp named ajax.jsp


<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib
uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib
uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib
uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>

    <body>
        <f:view>

            <a4j:form>
                <h:panelGrid columns="3">
                    <h:outputText value="Name:" />
                    <h:inputText value="#{BankAccount.name}" />
                    <a4j:commandLink reRender="out"
                        action="#{BankAccount.searchAccount}">
                        <h:outputText value="Enter name" />
                    </a4j:commandLink>
                </h:panelGrid>
            </a4j:form>
            <rich:spacer height="7" />
            <br />
            <h:panelGroup id="out">
                <h:outputText value="Your account is " rendered="#{not empty BankAccount.account}" />
                <h:outputText value="#{BankAccount.account}" />
                <h:outputText value="!" rendered="#{not empty BankAccount.account}" />
            </h:panelGroup>

            <br />

        </f:view>

    </body>
</html>


This needs a simple Backing Bean, which just holds the username and calculates the account (in a very dummy way!) 

package com.sample;

public class BankAccount {

    private String name;
    private String account;

    public void searchAccount() {
        account = name + "1234X";    
    }

    public String getAccount() {
        return account;
    }

    public void setAccount(String account) {
        this.account = account;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

 

Invoke your jsp as usual:

http://localhost:8080/YourContext/ajax.faces

Clicking on the ajax link will display the BankAccount calculated by the JSF Bean -without reloading the page.

Conclusion


RichFaces provides a large number of JSF components for building RIA and Ajax-enabled Web applications. This article has demonstrated only a few, but you should have gotten a feel for how things work under RichFaces, and seen several components that could be useful in many applications.

NOTICE: We have added a new tutorial which is targeted on the lastest 3.3 release of RichFaces, and tested on JBoss 5.1.0 and JBoss 6.0.0 M1
http://www.mastertheboss.com/web-interfaces/234-using-richfaces-with-jboss-.html

{fcomment}

0
0
0
s2smodern