Java EE container as Wildfly provides dynamic Web UI components along within the package, for example JSP and JSF. Beside JSP, JSF provides MVC framework to give the structure of your application. JSF is very well designed Web interface tools, it glues web components via expression language (EL) and working very well with AJAX. In this post, I will show how to use Richfaces AJAX UI components to create user interface.Along with many UI framework of JSF, I have found that Richfaces is quite easy to use and full of rich UI components along with looks and feels features. In the Richfaces, there are a lot of UI components, such as, datepicker, diaglog, etc. And it also supports AJAX features which could enhance user experience when interact with the system.

In this post, I have arrange the contents as below.

Ajax Action
Ajax Ouputs
Data Table
Reference

1.Ajax Action

First, I will show how to use ajax action tag

a4j:ajax

First I will show how a4j:ajax works. it allowed to added ajax capability to non-ajax components like h:outputText, etc.

sample01.xhtml


      	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:h="http://java.sun.com/jsf/html"> 

<h:head>
	<title>Richface Ajax Sample</title>
	<style>
		.bold {
			font-style: normal;
			font-weight: bold;
		}
	
	</style>
</h:head> 
<body>
    <rich:panel>
        <f:facet name="header">
        This is Richface and Ajax Example
        </f:facet>
		<h:form>
			<h:panelGrid columns="2">
				<h:outputLabel for="msgbox" value="Message : "/>
				<h:inputText value="#{sampleBean.sample.message}" id="msgbox">
					<a4j:ajax event="blur" render="out" />
				</h:inputText>
				<h:outputLabel for="out" value="Output : "/>
				<h:outputText value="#{sampleBean.sample.message}" id="out"
					style="word-break: break-all" class="bold"/>

			</h:panelGrid>

		</h:form>

	</rich:panel>
</body> 
</html>

I just create simple bean as below

SampleBean.java

package pro.tikkwiki.sample.richfaces.ajax;

import java.io.Serializable;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

import pro.tikkwiki.sample.richfaces.bean.Sample;

@Named("sampleBean")
@RequestScoped
public class SampleBean implements Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = 8536171518973122806L;
	private Sample sample;
	public SampleBean() {
		setSample(new Sample());
	}
	public Sample getSample() {
		return sample;
	}
	public void setSample(Sample sample) {
		this.sample = sample;
	}
	
}

And for Sample.class

Sample.java

package pro.tikkwiki.sample.richfaces.bean;

import java.io.Serializable;

public class Sample implements Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = -4889179488519295191L;
	private String message;
	
	public Sample() {
		super();
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}
	
}

The result shall be followed as below

a4j:commandButton and aj:commandLink

These two components are quite similar, you could use action attribute of the tag to call specific action.

sample02.xhtml


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:h="http://java.sun.com/jsf/html"> 

<h:head>
	<title>Sample 02 for Command Button</title>
	<style>
		.outputPanel {
			font-weight: bold;
		}
	</style>
</h:head> 
<body>
    <rich:panel>
        <f:facet name="header">
        Sample 02 for command button
        </f:facet>
		<h:form id="form01">
			<h:panelGrid columns="3">
				<h:outputLabel value="Message : " for="msgbox"/>
				<h:inputText id="msgbox" value="#{sampleBean.sample.message}"/>
				<h:commandButton value="submit" action="#{sampleBean.submit()}"  render="out01" execute="@form" />
			</h:panelGrid>
		</h:form>
		<br />
	    <a4j:outputPanel id="out01">
	        <h:outputText value="#{sampleBean.sample.message}" 
	        	rendered="#{not empty sampleBean.sample.message}" 
	        	styleClass="outputPanel" />
	    </a4j:outputPanel>
	    
	    <h:form id="form02">
			<h:panelGrid columns="3">
				<h:outputLabel value="Message : " for="msgbox"/>
				<h:inputText id="msgbox" value="#{sampleBean.message}"/>
				<h:commandLink value="submit" action="#{sampleBean.action()}"  render="out02" execute="@form" />
			</h:panelGrid>
		</h:form>
		<br />
	    <a4j:outputPanel id="out02">
	        <h:outputText value="#{sampleBean.output}" 
	        	rendered="#{not empty sampleBean.output}" 
	        	styleClass="outputPanel" />
	    </a4j:outputPanel>
	    
	    
	</rich:panel>
</body> 
</html>

For the Java associated with this xhtml, I have created as below

SampleBean.java

package pro.tikkwiki.sample.richfaces.ajax;

import java.io.Serializable;


import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

import org.jboss.logging.Logger;

import pro.tikkwiki.sample.richfaces.bean.Sample;

@Named("sampleBean")
@RequestScoped
public class SampleBean implements Serializable {
	private static Logger logger = Logger.getLogger(SampleBean.class);
	/**
	 * 
	 */
	private static final long serialVersionUID = 8536171518973122806L;
	private Sample sample;
	private String message;
	private String output;
	
	public SampleBean() {
		setSample(new Sample());
	}
	public Sample getSample() {
		return sample;
	}
	public void setSample(Sample sample) {
		this.sample = sample;
	}
	
	public void submit() {
		logger.info("submit action 01 was called .....");
		
	}
	public String getMessage() {
		return message;
	}
	public void setMessage(String message) {
		this.message = message;
	}
	
	public void action() {
		logger.info("submit action 02 was called .....");
		output = message+" !!!!!!!!!!! ";
	}
	public String getOutput() {
		return output;
	}
	public void setOutput(String output) {
		this.output = output;
	}
}

Once you execute the programs, you shall have below result.

a4j:actionListener

We can attached action listener to any component to trigger action once even occured

sample03.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:h="http://java.sun.com/jsf/html"> 

<h:head></h:head> 
<body>
    <rich:panel>
        <f:facet name="header">
			<h:outputText value="Sample 03 for ActionListener"/>
        </f:facet>
		<h:form>
			
			<h:panelGrid columns="1">
				<h:commandButton value="Invoke listener method">
                	<a4j:actionListener listener="#{actionListenerBean.handleActionMethod}"/>
                <f:ajax render="messages"/>
            	</h:commandButton>
			
			</h:panelGrid>
			
		</h:form>
		 <fieldset>
            <legend>Messages</legend>
            <h:messages id="messages"/>
        </fieldset>
	</rich:panel>
</body> 
</html>

And for the Java code

ActionListenerBean.java

package pro.tikkwiki.sample.richfaces.action;

import javax.enterprise.context.RequestScoped;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ActionEvent;
import javax.inject.Named;

@Named("actionListenerBean")
@RequestScoped
public class ActionListenerBean {

	public ActionListenerBean() {
		super();
	}

	private static void addFacesMessage(String messageText) {
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage(messageText));
    }
 
    public void handleActionMethod(ActionEvent event) throws AbortProcessingException {
        addFacesMessage("Method expression listener called");
    }
}

Once you run it, you shall get bellow result.

2.Ajax Output

First, I will show the most common used components for Ajax output component

a4j:outputPanel

This component allows auto update for subcomponents by ajax request, By specify render target to ajax:outpuPanel's id, you could change all the component inside the ajax:outputPanel at once.

sample05.xhtml

        
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:h="http://java.sun.com/jsf/html"> 

<h:head>
	<title>Sample 05 for Ajax Output Panel</title>
	<style>
		.bold {
			font-weight: bold;		
		}
	</style>
</h:head> 
<body>
    <rich:panel>
        <f:facet name="header">
        	<h:outputText value="Ajax Output Panel"/>
        </f:facet>
		
		<h:form>
			<h:panelGrid columns="2">
				<h:outputLabel for="msg" value="Message : "/>
				<h:inputText id="msg" value="#{sampleBean.sample.message}"/>
				<h:outputLabel for="stat" value="Status : "/>
				<h:inputText id="stat" value="#{sampleBean.sample.status}"/>
				<a4j:commandButton value="update" render="output" execute="@form" action="#{sampleBean.doIt()}"/>	
			</h:panelGrid>
		</h:form>
		
		
		<a4j:outputPanel layout="block" ajaxRendered="false" id="output">
			<h:panelGrid columns="4">
				<h:outputLabel for="output" value="Message : " styleClass="bold"/>
				<h:outputText value="#{sampleBean.sample.message}"  id="msgout" />
				<h:outputLabel for="output" value="Status : " styleClass="bold"/>
				<h:outputText value="#{sampleBean.sample.status}"  id="statusout" />
			</h:panelGrid>
			
			
		</a4j:outputPanel>
		
		
	</rich:panel>
</body> 
</html>

For Java Bean, I have created below.

SampleBean.java

    	package pro.tikkwiki.sample.richfaces.ajax;

import java.io.Serializable;

import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

import org.jboss.logging.Logger;

import pro.tikkwiki.sample.richfaces.bean.Sample;

@Named("sampleBean")
@SessionScoped
public class SampleBean implements Serializable {
	private static Logger logger = Logger.getLogger(SampleBean.class);
	/**
	 * 
	 */
	private static final long serialVersionUID = 8536171518973122806L;
	private Sample sample;
	private String message;
	private String output;
	
	public SampleBean() {
		setSample(new Sample());
	}
	public Sample getSample() {
		return sample;
	}
	public void setSample(Sample sample) {
		this.sample = sample;
	}
	
	public void submit() {
		logger.info("submit action 01 was called .....");
		
	}
	public String getMessage() {
		return message;
	}
	public void setMessage(String message) {
		this.message = message;
	}
	
	public void action() {
		logger.info("submit action 02 was called .....");
		output = message+" !!!!!!!!!!! ";
	}
	
	public void doIt() {
		logger.info("Called do it");
		String msg = sample.getMessage();
		String status = sample.getStatus();
		
		sample.setMessage(msg.toUpperCase());
		sample.setStatus(status.toUpperCase());
	}
	public String getOutput() {
		return output;
	}
	public void setOutput(String output) {
		this.output = output;
	}
}

And for the POJO class

Sample.java

        
      	package pro.tikkwiki.sample.richfaces.bean;

import java.io.Serializable;

public class Sample implements Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = -4889179488519295191L;
	private String message;
	private String status;
	
	public Sample() {
		super();
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public String getStatus() {
		return status;
	}

	public void setStatus(String status) {
		this.status = status;
	}
}

a4j:status

Status is one of the element useful to create UI on richfaces. It works as an request processing indicator status. it has two state included start and stop. Start represent request is getting processed and stop represents processing completed.

sample06.xhtml

        
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:h="http://java.sun.com/jsf/html"> 

<h:head>
	<title>Ajax:status</title>
</h:head> 
<body>
    <rich:panel>
        <f:facet name="header">
        	<h:outputText value="Ajax Status"/>
        </f:facet>
		<h:form id="form">
			<h:panelGrid columns="5">
				<h:outputLabel for="msg" value="Message : "/>
				<h:inputText id="msg" value="#{sampleBean.message}" />
				<a4j:commandButton value="action" action="#{sampleBean.action}" execute="@form" status="pState"/>
				<a4j:commandButton value="reset" action="#{sampleBean.reset}" execute="@form"/>
				<a4j:status name="pState">
					<f:facet name="start">
						<h:outputText value="Processing ..." />
					</f:facet>
				</a4j:status>
			</h:panelGrid>
		</h:form>
		<a4j:outputPanel layout="block" ajaxRendered="true">
			
			<h:panelGrid columns="2">
				<h:outputLabel for="output" value="Output Message : "/>
				<h:outputText id="output" value="#{sampleBean.output}" />
			
			</h:panelGrid>
		</a4j:outputPanel>
	</rich:panel>
</body> 
</html>

You should get as below

3.Data Table and Data scoller

Data table is quite important UI component used once developing application. Richface provide UI component for data table.

sample08.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:h="http://java.sun.com/jsf/html"> 

<h:head></h:head>
<h:outputStylesheet>
        .even-row {
            background-color: #FCFFFE;
        }
 
        .odd-row {
            background-color: #ECF3FE;
        }
 
        .even-row:hover,
        .odd-row:hover {
            background-color: #FFEBDA;
            cursor: pointer;
        }
</h:outputStylesheet> 
<body>
    <rich:panel>
        <f:facet name="header">
	        <h:outputText value="Data Table"/>
        </f:facet>
		<h:form>
		 <rich:dataTable value="#{carBean.cars}" var="car" rows="10" id="table" rowClasses="odd-row, even-row"
            styleClass="stable">
           
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Model" />
                </f:facet>
                <h:outputText value="#{car.model}" />
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Price" />
                </f:facet>
                <h:outputText value="#{car.price}" />
            </rich:column>
            <rich:column >
                <f:facet name="header">
                    <h:outputText value="Maker" />
                </f:facet>
                <h:outputText value="#{car.maker}" />
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Produce " />
                </f:facet>
                <h:outputText value="#{car.producedOn}" />
            </rich:column>
             <rich:column>
                <f:facet name="header">
                    <h:outputText value="Brand" />
                </f:facet>
                <h:outputText value="#{car.brand}" />
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="VIN" />
                </f:facet>
                <h:outputText value="#{car.vin}" />
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="ENGINE" />
                </f:facet>
                <h:outputText value="#{car.en}" />
            </rich:column>
        </rich:dataTable>
		<rich:dataScroller for="table" maxPages="10" stepControls="hide" boundaryControls="hide" fastControls="hide"/>
		</h:form>
	</rich:panel>
</body> 
</html>

For the Java code, I put as below

Your code title


  package pro.tikkwiki.sample.richfaces.ajax;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.faces.component.EditableValueHolder;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.event.ValueChangeEvent;
import javax.inject.Named;

import org.richfaces.JsfVersion;

import pro.tikkwiki.sample.richfaces.bean.Car;

@Named("carBean")
@RequestScoped
public class CarBean {
	
	private List<Car> cars;
	private static final int CLIENT_ROWS_IN_AJAX_MODE = 15;
	private int clientRows;
	private int currentCarIndex;
	private int page = 1;
	    
    public void switchAjaxLoading(ValueChangeEvent event) {
        this.clientRows = (Boolean) event.getNewValue() ? CLIENT_ROWS_IN_AJAX_MODE : 0;
    }
    
	@PostConstruct
	public void init() {
		cars = new ArrayList<Car>();
		
		for(int i=10;i<100;i++) {
			String model = "Model00"+i;
			String brand = "Brand00"+i;
			String maker = "Maker00"+i;
			String vin	 = "XXXX-XXX-XXXX-00"+i;
			String en	 = "XXXX-XXX-XXXX-11"+i;
			cars.add(new Car(model,brand,maker, i*10000,new Date(),vin,en));
		}
	}
	
	public List&t;Car> getCars(){
		return cars;
	}
	
	public int getCurrentCarIndex() {
        return currentCarIndex;
    }
 
    public void setCurrentCarIndex(int currentCarIndex) {
        this.currentCarIndex = currentCarIndex;
    }
    
    public int getPage() {
        return page;
    }
 
    public void setPage(int page) {
        this.page = page;
    }
 
    public int getClientRows() {
        return clientRows;
    }
 
    public void setClientRows(int clientRows) {
        this.clientRows = clientRows;
    }
    
}

And the result shall show as

Reference

1 comment:

raeannjackiewiczNovember 5, 2022 at 5:41 AM
When you play online slots for actual money, you may want to be reassured that your money is in good arms. You should start choosing an online machine by familiarizing your self with its supplier. This seemingly small detail can transform 벳익스플로어 your subsequent gaming experience.

ItsTikk's Tech Note

Wildfly JSF Richfaces Ajax Configuration

Table of Contents

1.Ajax Action

a4j:ajax

a4j:commandButton and aj:commandLink

a4j:actionListener

2.Ajax Output

a4j:outputPanel

a4j:status

3.Data Table and Data scoller

Reference

1 comment:

Feature Recently

Running Wildfly Application Server in Domain Mode

Most Views