Category: richfaces

RichFaces – Quick Guide ”; Previous Next RichFaces – Overview RichFaces is an open source component library for JSF technology. It is developed and designed by JBoss. RichFaces provides reusable markups and AJAX capabilities to a JSF developer without having any prior knowledge of front end. RichFaces was developed over JSF 2, hence it follows the same life cycle of JSF. The in-built AJAX support and customizable look and feel features has enabled a new horizon for Enterprise Java application. Advantages and Disadvantages Following are a few advantages of using RichFaces. AJAX support − RichFaces eliminates the old boilerplate AJAX, JavaScript codes to include markups in the webpages. Using RichFaces, a developer can include markups on-the-fly without having any prior knowledge of AJAX. Component Development Kit (CDK) − As described earlier, the developer need not concentrate on the markups used in the application, all they need to include is RichFaces tags to use those functionalities. This automatic creation of markups will be done by a runtime environment called CDK. Resource handling − RichFaces provides additional support to create different binary files such as image, excel, spreadsheet, etc. Skinning − Skinning is a modern approach that has been introduced in JSF, which makes it very easy to control the look and feel of the application. Specially-centralized color management using different other customizable parameters make it very handy for a developer. Following are a few disadvantages of using RichFaces. Resource − This being a fairly new technology, getting good quality resource is a huge problem for rich face developer. Complex − Transition through different phases and creation of dynamic markups is the entire responsibility of CDK. Understanding internal processing of CDK is a bit complex and confusing for a traditional front-end developer. RichFaces – Environment Setup In this chapter, you will set up our development environment and configure your system such that you can proceed with RichFaces development. Technical Requirements As per the technical requirement you will learn how to configure JDK, Application server, or any IDE of your choice. System Requirements You can use any running system, there is no any restriction on memory, RAM and operating system. JDK Installation Before proceeding further, you must have JDK configured on your system. Please refer to the official website of oracle to download and install JDK 7 or an above version. You might have to set the environment variable for Java such that it can work properly. To verify your installation in Windows operating system, hit “java –version” in the command prompt and as an output it will show you the Java version installed in your system. IDE Installation There are numbers of IDE available on the Internet. You can use any as you choose. For this tutorial, let us use NetBeans 8.2. You can find the download link of different IDE in the following table. IDE Name Installation Link NetBeans https://netbeans.org/downloads/ Eclipse www.eclipse.org/downloads/ Intellij www.jetbrains.com/idea/download/#section=windows It is always recommended to use a recent software version to drag out maximum facility from it. For this tutorial, we will be using NetBeans IDE 8.2 along with JDK 8. Server Requirements As an application server, you will be using Tomcat. In this chapter, you will configure the tomcat server in the system. If you are installing the latest version of NetBeans, then you can directly install Apache Tomcat along with NetBeans IDE. If you are not doing so, please download the latest version of Tomcat from the official website of the TOMCAT. Keep the extracted Tomcat files in your C drive or program files. These files will be used in the next phase. Client Requirements RichFaces is a UI component. Thus, like every UI component, the internet browser will act as a client for your application. You can use any modern internet browser such as IE, Safari, Chrome, etc. Development Requirements Downloading required jars: Please visit the official website of JBOSS and download the latest stable release of the JBoss jar files. Extract the files. You will need the following jars in order to develop RichFaces Application. richfaces-a4j-4.5.17.Final.jar richfaces-core-4.5.17.Final.jar richfaces-rich-4.5.17.Final.jar cssparser-0.9.18.jar guava-19.0.jar sac-1.3.jar Creating a Project In this section, let us create a demo application that will be used later to learn more about RichFaces. Before proceeding further, it is highly recommended that you download and install all required software and jar files mentioned earlier. Step 1 − Open NetBeans IDE. Go to File → New Project. You will be redirected to the following screenshot. Step 2 − Select “Java Web” and “Web Application” in “Categories” and “Projects” tab respectively and hit “Next”. Step 3 − In the next tab, you have to provide a project name. Here, let us name it as “RichFaceTutorial”. Then, hit “Next”. You will be redirected to the following screenshot. where you will be setting up server details. Step 4 − Select “Apache Tomcat” from the dropdown and hit “Add”. Once you hit “Add”, you will be redirected to a separate screen, where you need to configure your server. To configure the server, you will need the server files downloaded in the previous section. Step 5 − Select “Apache Tomcat or TomEE” from the list as shown in the above screenshot and hit “Next”. You will be redirected to the following screen. Step 6 − In the Server location, you need to provide the downloaded Tomcat files location. Hit “Browse” and navigate to the required folder path and hit “Finish”. Once your server is added successfully, you will be redirected to the first screen. Hit “Next” and you will get a chance to select the different frameworks to add into the application as shown in the following screenshot. Step 7 − Select “JavaServer Faces” and in “JavaServer Faces Configuration” you have to select “RichFaces” and hit “Finish”. If you do not get “RichFaces” as an option, you can add the required jars file from the build path. After this step, your application is ready to deploy on the application server. Following is the project directory structure

RichFaces – Rich Tree ”; Previous Next In this chapter, we will learn about tree processing in RichFaces. RichFaces provide all the required components to create and manipulate a tree. <rich:treeNode> This tag is used to create a hierarchical tree. Each node provided inside the <treeNode> will be a child node of the tree. This tag will be used with another tag called <rich:tree>. All the instance variables we are using to create a tree must implement any of these three interfaces – org.richfaces.model.TreeNode, org.richfaces.model.TreeDataModel, and javax.swing.tree.TreeNode. In the following example, we will populate a tree using <rich:treeNode> tag from the backend. <?xml version = “1.0” encoding = “UTF-8”?> <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head> <title>TreeNode Example</title> <meta name = “viewport” content = “width = device-width, initial-scale = 1.0″/> </h:head> <h:body> <h:form> <rich:tree value = “#{tree.populateNode}” var = “tree”> <rich:treeNode> <rich:treeModelRecursiveAdaptor> </rich:treeModelRecursiveAdaptor> <h:outputText value = “#{tree.data}” /> </rich:treeNode> </rich:tree> </h:form> </h:body> </html> Following is the related java class that implements “TreeNodeImpl” interface. import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import org.richfaces.model.TreeNodeImpl; @ManagedBean @RequestScoped public class Tree extends TreeNodeImpl { private Tree stationRoot; private Tree populateNode; private Object data; public Tree() { super(); } public Tree(boolean leaf, Object data) { super(leaf); this.data = data; } public Object getData() { return data; } public Tree getPopulateNode() { if (populateNode == null) { String[] List_OF_Node = { “Frist Node”, “Second Node”, “Third Node”, “Fourth Node”, “Fifth Node”}; stationRoot = new Tree(false, “Example Of Tree”); for (int i = 0; i < List_OF_Node.length; i++) { Tree child = new Tree(true, List_OF_Node[i]); stationRoot.addChild(i, child); } populateNode = new Tree(); populateNode.addChild(0, stationRoot); } return populateNode; } } The above piece of code will produce the following output in the browser. <rich:treeModelAdaptor> This component takes a Map as an input, iterates through it, and produces the required output in the browser. Whenever we need to populate a recursive map, we can use another tag called <rich:recursiveTreeModelAdaptor>. The following example shows how to render the project structure in the browser. In RichFaces 3, these two tags are used <rich:treeNodeAdaptor> and <rich:recursiveTreeNodeAdaptor>. <?xml version = “1.0” encoding = “UTF-8”?> <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head> <title>Tree Model and Recursive Model Example</title> </h:head> <h:body> <h:form id = “form”> <rich:tree toggleType = “AJAX” var = “item” style = “max-width: 400px”> <rich:treeModelRecursiveAdaptor roots = “#{fileSystemBean.sourceRoots}” nodes = “#{item.directories}”> <rich:treeNode> #{item.shortPath} </rich:treeNode> <rich:treeModelAdaptor nodes = “#{item.files}”> <rich:treeNode>#{item}</rich:treeNode> </rich:treeModelAdaptor> </rich:treeModelRecursiveAdaptor> </rich:tree> </h:form> </h:body> </html> We need to create two new java beans for this example. Following is the code snippet for bean class ”FileSystemBean.java”, which holds the required folder name. import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class FileSystemBean { private static final String SRC_PATH = “/WEB-INF”; private List<FileSystemNode> srcRoots; public synchronized List<FileSystemNode> getSourceRoots() { if (srcRoots == null) { srcRoots = new FileSystemNode(SRC_PATH).getDirectories(); } return srcRoots; } } Following is the code snippet for bean class “FileSystemNode.java”, which holds the required the leaf node of the project. import static com.google.common.base.Predicates.containsPattern; import static com.google.common.base.Predicates.not; import static com.google.common.collect.Iterables.filter; import static com.google.common.collect.Iterables.transform; import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Set; import javax.faces.context.ExternalContext; import javax.faces.context.FacesContext; import com.google.common.base.Function; import com.google.common.collect.Iterables; import com.google.common.collect.Lists; public class FileSystemNode { private static final Function<String, FileSystemNode> FACTORY = new Function<String, FileSystemNode>() { public FileSystemNode apply(String from) { return new FileSystemNode(from.substring(0, from.length() – 1)); }; }; private static final Function<String, String> TO_SHORT_PATH = new Function<String, String>() { public String apply(String from) { int idx = from.lastIndexOf(”/”); if (idx < 0) { return from; } return from.substring(idx + 1); }; }; private String path; private List<FileSystemNode> directories; private List<String> files; private String shortPath; public FileSystemNode(String path) { this.path = path; int idx = path.lastIndexOf(”/”); if (idx != -1) { shortPath = path.substring(idx + 1); } else { shortPath = path; } } public synchronized List<FileSystemNode> getDirectories() { if (directories == null) { directories = Lists.newArrayList(); Iterables.addAll(directories, transform(filter( getResourcePaths(), containsPattern(“/$”)), FACTORY)); } return directories; } public synchronized List<String> getFiles() { if (files == null) { files = new ArrayList<String>(); Iterables.addAll(files, transform(filter( getResourcePaths(), not(containsPattern(“/$”))), TO_SHORT_PATH)); } return files; } private Iterable<String> getResourcePaths() { FacesContext facesContext = FacesContext.getCurrentInstance(); ExternalContext externalContext = facesContext.getExternalContext(); Set<String> resourcePaths = externalContext.getResourcePaths(this.path); if (resourcePaths == null) { resourcePaths = Collections.emptySet(); } return resourcePaths; } public String getShortPath() { return shortPath; } } The above example will produce the following output in the browser. Print Page Previous Next Advertisements ”;

RichFaces Tutorial PDF Version Quick Guide Resources Job Search Discussion RichFaces is a component library developed by JBoss, which provides in-built AJAX support to JSF application. It reduces all the redundant codes that the developer has to write to create different markup in the browsers. Audience This tutorial has been prepared for the beginners to help them understand the basics of RichFaces Technology. After completing this tutorial, you will find yourself at a moderate level of expertise, from where you can take yourself to the next levels. Prerequisites Before proceeding with this tutorial, you should have a basic understanding of Java programming language, text editor, execution of programs, etc. Since we are going to develop web-based applications using RichFaces, it will be a plus if you have an understanding of other web technologies such as HTML, CSS, AJAX, JavaScript, and JSF. Print Page Previous Next Advertisements ”;

RichFaces – Selection Components ”; Previous Next In this chapter, we will learn about different selection components provided by RichFaces Technology. <rich:pickList> Using this tag, we can select one value from the populated list. It also allows us to add and remove a list component to another List. Following example demonstrates how this works. Go ahead and create one xhtml file and name it as “pickListExample.xhtml” and place the following code in it. <?xml version = “1.0” encoding = “UTF-8”?> <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head> <title>PickList Example</title> </h:head> <h:body> <h:form> <h:outputText value = “Pick List Example”/> <br/> <br/> <rich:pickList value = “#{managedBean.subjectList}” sourceCaption = “SubjectList” targetCaption = “Selected Subject” listWidth = “170px” listHeight = “120px” orderable = “true”> <f:selectItems value = “#{managedBean.subjectList}” itemValue = “#{subject}” itemLabel = “#{subject.subjectName}”/> </rich:pickList> </h:form> </h:body> </html> We need to modify our managedBean.java file to populate the list components in the xhtml file. Following is the snapshot of our modified Java file. import java.util.Arrays; import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class managedBean { String message; String job; private List<String> SubjectList = Arrays.asList( “Richface”,”AJAX”,”JAVA”,”JSF”,”DOTNET”,”python”); public String getMessage() { return message; } public void setMessage(String message) { System.out.println(“setMessage method is getting called with–“+message); this.message = message; } public String getJob() { return job; } public void setJob(String job) { System.out.println(“setJob method is getting called with–“+job); this.job = job; } public List<String> getSubjectList() { return SubjectList; } public void setSubjectList(List<String> SubjectList) { this.SubjectList = SubjectList; } } The above piece of code will yield the following output in the browser. The “value” attribute of the pickList tag is nothing but the “getSubjectList()” of the bean class. “itemValue” is the abbreviation of the object class and the corresponding “itemLabel” is the instance value name. In this example, our pickList tag automatically creates two separate lists named “sourceCaption” and “targetCaption”. Attribute orderable is used to maintain the selection order in the target List. <rich:orderingList> This tag is used to render a list as a whole. <orderingList> will automatically provide some button like function to propagate through the list and it helps order a selected item. In the following example, we will create one orderingList using the following code for “OrderingListExample.xhtml”. <?xml version = “1.0” encoding = “UTF-8”?> <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head> <title>OrderingList Example</title> </h:head> <h:body> <h:form> <h:outputText value = “ordering List Example”/><br/><br/> <rich:orderingList value = “#{managedBean.subjectList}” itemValue = “#{subject}” itemLabel = “#{subject.subjectName}” > </rich:orderingList> </h:form> </h:body> </html> We need not to change our bean class as we are populating the same list again using different tag for different representation. Like the previous example, even here the value attributes hold the entire list coming from “getSubjectList()”. “itemValue” and “itemLabel” holds the value of the object class and corresponding instance variable respectively. The above piece of code will produce the following output in the browser. <rich:ListShuttle> ListShuttle tag is available in RichFaces 3. It helps propagate through one list and puts the same value into another. In RichFaces 4, this tag has been suppressed because the same functionality can be achieved by another new tag named <rich:pickList> as described above. If you are using RichFaces 3.0, then you can use this tag in the following manner. <rich:listShuttle sourceValue = “#{toolBar.freeItems}” targetValue = “#{toolBar.items}” var = “items” listsHeight = “150” sourceListWidth = “130” targetListWidth = “130” sourceCaptionLabel = “Available Items” targetCaptionLabel = “Currently Active Items” converter = “listShuttleconverter”> <rich:column width = “18”> <h:graphicImage value = “#{items.iconURI}”></h:graphicImage> </rich:column> <rich:column> <h:outputText value = “#{items.label}”></h:outputText> </rich:column> <a4j:support event = “onlistchanged” reRender = “toolBar” /> <a4j:support event = “onorderchanged” reRender = “toolBar” /> </rich:listShuttle> It is very convenient to use pickList rather than using this tag, as the same functionality can be achieved using pickList by writing only two lines of code. Print Page Previous Next Advertisements ”;

RichFaces – Iteration Component ”; Previous Next In the previous chapters, we have learned about the different input and output components. In this chapter, we will learn how to iterate through different data structures in the website. <rich:dataTable> This tag is used to render a table as a result in the website. In the following example, we will render a subject table along with the pro-efficiency level. <?xml version = ”1.0” encoding = ”UTF-8” ?> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head> <title>Rich Data Table</title> </h:head> <h:body> <h:form> <rich:dataTable value = “#{subject.subjectListObj}” var = “record” > <f:facet name = “header”> <h:outputText value = “My Profile” /> </f:facet> <rich:column> <f:facet name = “header”>Subject Name</f:facet> <h:outputText value = “#{record.subjectName}”/> </rich:column> <rich:column> <f:facet name = “header”>efficiency Level</f:facet> <h:outputText value = “#{record.efficiency}”/> </rich:column> </rich:dataTable> </h:form> </h:body> </html> We need to change our subject.java accordingly to render the list. Following is an example of subject.java. import java.util.ArrayList; import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.ManagedProperty; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class Subject { String SubjectName; private String efficiency; private List<Subject> subjectListObj=new ArrayList<>(); public Subject() { } public Subject(String SubjectName,String efficiency ) { this.SubjectName = SubjectName; this.efficiency= efficiency; } public String getSubjectName() { return SubjectName; } public void setSubjectName(String SubjectName) { this.SubjectName = SubjectName; } public List<Subject> getSubjectListObj() { subjectListObj.add(new Subject(“JAVA”,”Expert”)); subjectListObj.add(new Subject(“DOTNET”,”NA”)); subjectListObj.add(new Subject(“JAVA Script”,”Expert”)); subjectListObj.add(new Subject(“Web Service”,”Expert”)); subjectListObj.add(new Subject(“Consulting”,”Expert”)); return subjectListObj; } public void setSubjectListObj(List<Subject> subjectListObj) { this.subjectListObj = subjectListObj; } public String getEfficiency() { return efficiency; } public void setEfficiency(String efficiency) { this.efficiency = efficiency; } } The above example will generate the following output in the browser. <rich: dataDefinitionList> This is the tag used to generate the data definition from a model. This tag is not supported by JBoss since the invention of RichFaces 4. If you are still using RichFaces 3, then you can use this tag in the following manner. <rich:dataDefinitionList var = “car” value = “#{dataTableScrollerBean.allCars}” rows = “5” first = “4” title = “Cars”> <f:facet name = “term”> <h:outputText value = “#{car.make} #{car.model}”></h:outputText> </f:facet> <h:outputText value = “Price:” styleClass = “label”></h:outputText> <h:outputText value = “#{car.price}” /><br/> <h:outputText value = “Mileage:” styleClass = “label”></h:outputText> <h:outputText value = “#{car.mileage}” /><br/> </rich:dataDefinitionList> In the above example, “dataTableScrollerBean” is a Java class that is used to generate different values of the car. This is similar to the previous tag where we populated a bunch of object value using the <datatable> tag. <rich:dataOrderedList> RichFaces 4 came up with a wide moderation from RichFaces 3. <dataOrderedList> is a tag used to render a list in an ordered manner. This too is suppressed in RichFaces 4 because the ordering of an object or a list is much more easier and less time consuming, if done in Java. If your application uses RichFaces 3, then you can use this tag in the following manner. <rich:panel style = “width:500px”> <f:facet name = “header”> Using rich:dataOrderedList </f:facet> <rich:dataOrderedList value = “#{airlinesBean.airlines}” var = “air”> #{air.name}, #{air.code} </rich:dataOrderedList> </rich:panel> In the above example, “airlinesBean” is a Java bean class with a method named “airlinesBean()”. This method returns an object of type “air”. Later, we can use this air object to populate different properties in a table format. <rich:dataList> As the tag name suggests, this tag will be used to render an unordered list into the browser. However, like <orderedList> this tag is also suppressed in the latest version of RichFaces. We can easily render a list into the browser using <a4j:Repeat> and <rich:dataTable> tag in the following way. <a4j:repeat value = “#{managedBean.subjectList}” var = “sub”> <h:outputText value = “#{sub}”/> </a4j:repeat> In the above example, we are rendering a list which is an output of the method called “subjectList()”. If your application is built in RichFaces 3, then you can use this tag as follows. <rich:panel style = “width:500px”> <f:facet name = “header”> Using rich:dataList </f:facet> <rich:dataList value = “#{airlinesBean.airlines}” var = “air”> #{air.name}, #{air.code} </rich:dataList> </rich:panel> <rich:dataGrid> Using the <datatable> tag you will be able to render a list as a table, however, <dataGrid> will help you render an object or a list. In the previous example of <rich:datatable>, just change the xhtml page as follows and see what is the output of the same. <?xml version = ”1.0” encoding = ”UTF-8” ?> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head> <title>Rich Data Table</title> </h:head> <h:body> <h:form> <rich:panel> <rich:dataGrid value = “#{subject.subjectListObj}” var = “record” columns = “2” elements = “4” first = “1” > <f:facet name = “header”> <h:outputText value = “My Profile” /> </f:facet> <rich:panel> <rich:column> <f:facet name = “header”>Subject Name</f:facet> <h:outputText value = “#{record.subjectName}”/> </rich:column> <rich:column> <f:facet name = “header”>efficiency Level</f:facet> <h:outputText value = “#{record.efficiency}”/> </rich:column> </rich:panel> </rich:dataGrid> </rich:panel> </h:form> </h:body> </html> The above piece of code will yield the following output in the browser. <rich:datascroller> This tag helps to create a scroll bar while populating the table data. It is pretty similar to the pagination functionality of the JSF. Modify the previous dataTable example in the following manner. <?xml version = ”1.0” encoding = ”UTF-8” ?> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head> <title>Rich Data Table</title> </h:head> <h:body> <h:form> <rich:dataTable value = “#{subject.subjectListObj}” var = “record” rows = “3” id = “MyTable”> <f:facet name = “header”> <h:outputText value = “My Profile”/> </f:facet> <rich:column> <f:facet name = “header”>Subject Name</f:facet> <h:outputText value = “#{record.subjectName}”/> </rich:column> <rich:column> <f:facet name = “header”>efficiency Level</f:facet> <h:outputText value = “#{record.efficiency}”/> </rich:column> </rich:dataTable> <rich:dataScroller for = “MyTable” maxPages = “3”> <f:facet name = “first”> <h:outputText value = “1” /> </f:facet> <f:facet name = “last”> <h:outputText value = “eof” /> </f:facet> </rich:dataScroller> </h:form> </h:body> </html> In the above example, you can add your style for a good look and feel. We have implemented separate <dataScroller> tags with different facet value. Following will be the output of the above file. Update the style sheer attribute

RichFaces – Architecture ”; Previous Next According to Red Hat official document, there are a total five components that work internally to provide rich user experience. Following are the five components. AJAX Filter − AJAX filter is used to differentiate between different types of request coming from the client browser. To include this component into the application, you need to register RichFaces Filter in your application’s web.xml file. AJAX Filter acts differently in different phases of JSF applications. AJAX Action Components − Action components are responsible to send the client requests from the browser to the AJAX Engine, from where it will process the request and render the required view as a response. AJAX Containers − AJAX container is conceptually similar to the spring container. It is basically recognizing a specific area of the client browser to process the AJAX request. Skinnability − Skin and theme together is referred to as Skinnability. This module acts independently to provide extensive support to the look and feel of the entire. RichFaces JavaScript Engine − JavaScript Engine runs on the client side that sends updates to the AJAX engine in order to prepare the response. This engine works automatically, hence we need not write any extra line of code to control it. Following is the architectural diagram of the RichFaces application in MVC paradigm. In the above image, the user’s activity will be processed as a “JS Event”. Later, the “JS Event” will be transmitted to the “XML Filter”, which is nothing but a component of AJAX Filter. “XML Filter” is responsible for generating and processing user requests. All other components are internal to the different jar files. We need to use appropriate tags library in order to use those functionalities. Print Page Previous Next Advertisements ”;

RichFaces – Error Handling ”; Previous Next In this chapter, we will learn about different error handling methods that can be implemented in RichFaces. Server Side & Client Side Error Handling We need to go through the pretty old Java technique (try/Catch) to handle the action class based exceptions. For client side, we can add one extra file, which will show the error message whenever an error has occurred on the client side. Following code snippet can be added in web.xml in order to handle errors on the client side. <error-page> <exception-type>java.lang.Throwable</exception-type> <location>/error.xhtml</location> </error-page> Note, the above exception will provide only static exception messages and we might have to use JSF “ExceptionHandler” class in order to use dynamic exception property. At runtime, RichFaces provides some features to validate the input fields, which can be used as a primary building block of the exception in the application. Create a new file and place the following code in it. <?xml version = “1.0” encoding = “UTF-8”?> <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head> <title>Error handling</title> <meta name = “viewport” content = “width = device-width, initial-scale = 1.0″/> </h:head> <h:body> <h:form id = “form”> <rich:panel> <f:facet name = “header”> <h:panelGroup> <h:outputText value = “Student Registration” /> <a4j:status> <f:facet name = “start”> <h:graphicImage value = “/images/ai.gif” style = “height:12px;width:12px;” alt = “ai” /> </f:facet> </a4j:status> </h:panelGroup> </f:facet> <h:panelGrid columns = “3”> <h:outputText value = “Name:” /> <h:inputText value = “#{student.name}” id = “name” label = “name”> <f:validateLength minimum = “3” maximum = “8” /> <f:validateRequired /> <rich:validator /> </h:inputText> <rich:message for = “name” /> <h:outputText value = “Email” /> <h:inputText value = “#{student.email}” id = “email” validatorMessage = “Ivalid email address”> <f:validateRegex pattern = “^(([a-zA-Z0-9_-.]+)@([a-zA-Z0-9_-.]+) .([a-zAZ]{2,5}){1,25})+([;.](([a-zA-Z0-9_-.]+) @([a-zA-Z0-9_-.]+).([a-zAZ]{2,5}){1,25})+)*$” /> <rich:validator /> </h:inputText> <rich:message for = “email” /> <h:outputText value = “Age” /> <h:inputText value = “#{student.age}” id = “age” label = “age”> <f:validateLongRange minimum = “18” maximum = “99” /> <rich:validator /> </h:inputText> <rich:message for = “age” /> </h:panelGrid> </rich:panel> </h:form> </h:body> </html> Corresponding java class should be a normal bean class like the following. import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class Student { private String name; private String email; private int age; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } } The above example will yield the following output in the browser, whenever there will be an error in the <h:form>. Resource Loading RichFaces improves standard resource handling procedure in JSF application. This can be implemented either by configuring ResourceServlet or by Resource optimization. To configure ResourceServlet, we need to add the following piece of code in web.xml. <servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class>org.richfaces.webapp.ResourceServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Resource Servlet</servlet-name> <url-pattern>/org.richfaces.resources/*</url-pattern> </servlet-mapping> We can also enable the optimization in the JSF application, which will optimize different JavaScript and CSS files. We need to add the following code in order to achieve the optimization in the application. <context-param> <param-name>org.richfaces.resourceOptimization.enabled</param-name> <param-value>true</param-value> </context-param> Print Page Previous Next Advertisements ”;

RichFaces – Input Components ”; Previous Next Till now we have learned a lot about different AJAX components of RichFaces along with a new functionality called “Skin”. In this chapter, we will learn different “Rich” components that RichFaces offers in order to develop a modern web application. Following are the different input components provided by “RichFaces”. <rich:inplaceInput> Rich inplaceInput provides an opportunity to create an editable text box instead of a normal input text box. In the following example, we will create an editable text box using this component. Create an xhtml file and name it as “richinplaceInput.xhtml”. Write the following code in that file. <?xml version = “1.0” encoding = “UTF-8”?> <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head> <title>TODO supply a title</title> </h:head> <h:body> <f:view></f:view> <h:form> <rich:inplaceInput value = “#{managedBean.message}” defaultLabel = “Enter Your Name”/> </h:form> </h:body> </html> Save this file and run it. Following will be the output in the browser. Go ahead and type anything of your choice in that text box and hit enter. This tag also provides inline edit option. Following will be output after editing. <rich: inplaceSelect> This is another input markup provide by RichFaces, where the user can select an input value from the dropdown list, which is also inline and editable in nature. We need to populate the dropdown from the internal bean class. Please create a “xhtml” file and name it as “richinplaceSelectExample.xhtml”. Place the following piece of code in that file. <?xml version = “1.0” encoding = “UTF-8”?> <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head> <title>TODO supply a title</title> </h:head> <h:body> <h:form> <rich:inplaceSelect value = “#{subject.subjectName}” defaultLabel = “Click to Select Country”> <f:selectItems value = “#{subject.SubJectList()}”></f:selectItems> </rich:inplaceSelect> </h:form> </h:body> </html> In the above example, we will populate the dropdown options from the backend. Here is the bean class named ” subject.java”. import java.util.ArrayList; import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.ManagedProperty; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class Subject { String SubjectName; public Subject() { } public Subject(String SubjectName) { this.SubjectName = SubjectName; } public List<String> SubJectList() { //this list to be rendered ArrayList<String> list = new ArrayList(); list.add(“JAVA”); list.add(“DOTNET”); list.add(“COBOL”); list.add(“AJAX”); list.add(“JAVA SCRIPT”); return list; } public String getSubjectName() { return SubjectName; } public void setSubjectName(String SubjectName) { this.SubjectName = SubjectName; } } All the subject name that we are passing through the list will be shown inside the dropdown menu. Following will be the output after running this application. <rich:SuggestionBox> <rich:SuggestionBox> is used to provide suggestions to the user depending on the input provided in the input text box. This tag creates a JS event internally and invokes the required istener class to provide the suggestion from the backend. Unfortunately, this suggestionBox and ComboBox both are combined into a separate tag called “<rich:autocomplete>” in RichFaces 4, however, if you are using RichFaces 3, you can use this tag as shown below. <h:inputText id = “city” value = “#{capitalsBean.capital}” /> <rich:suggestionbox for = “city” var = “result” suggestionAction = “#{capitalsBean.autocomplete}”> <h:column> <h:outputText value = “#{result.name}” /> </h:column> </rich:suggestionbox> Where “capitalsBean” will be a Java class with different parameters and listener class named “autocomplete” will set the value of the “capital” instance variable at the runtime and provide the required output of choice. It is highly recommended to use RichFaces 4 “autocomplete” instead of using this tag as designers are not supporting this tag any more. <rich:comboBox> <rich:comboBox> works exactly similar to <rich:suggestionBox>, however, instead of calling the listener class, this tag pre-renders some suggestions into the client browser that interacts with each other and provides the desired output. Like <rich:sugegstionBox>, this feature is also depreciated in the new version with another tag called as “<rich:autocomplete>” described in the following code. Create a separate file and name it as “richAutoComplete.xhtml”. Place the following code in that file. <?xml version = “1.0” encoding = “UTF-8”?> <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head></h:head> <h:body> <h:form id = “form”> <h:form id = “form”> <rich:autocomplete mode = “cachedAJAX” minChars = “2” autocompleteMethod = “#{autoComplete.SubJectList()}” /> </h:form> </h:form> </h:body> </html> In the above example, we are populating the subject list through the autocomplete feature of RichFaces. Create another Java class and name it is as “autoComplete.java”. import java.util.ArrayList; import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class autoComplete { public autoComplete(){} private List<String> autoCompleteList=new ArrayList<>(); public List<String> SubJectList() { //ArrayList<String> list = new ArrayList<>(); autoCompleteList.add(“JAVA”); autoCompleteList.add(“DOTNET”); autoCompleteList.add(“COBOL”); autoCompleteList.add(“AJAX”); autoCompleteList.add(“JAVA SCRIPT”); return autoCompleteList; } public List<String> getAutoCompleteList() { return autoCompleteList; } public void setAutoCompleteList(List<String> autoCompleteList) { this.autoCompleteList = autoCompleteList; } } The above file is acting as the bean class and SubjectList() is the method, which is actually rendering the response to the browser. In the <SuggestionBox>,<ComboBox> tag we need to implement the listener class, however, in case of <autocomplete> tag this creation of listener class has been automated, which is easier for the developer. The above piece of code will yield the following output in the browser. <rich:inputNumberSlider> This is a very straightforward tag that helps the developer create a numeric slider bar depending on the numeric interval. Create “inputNumberSlider.xhtml” file and place the following code inside it. <?xml version = “1.0” encoding = “UTF-8”?> <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://java.sun.com/jsf/html” xmlns:f = “http://java.sun.com/jsf/core” xmlns:ui = “http://java.sun.com/jsf/facelets” xmlns:a4j = “http://richfaces.org/a4j” xmlns:rich = “http://richfaces.org/rich”> <h:head></h:head> <h:body> <h:form> <h:outputText value = “Slide Bar example”></h:outputText> <rich:inputNumberSlider minValue = “1” maxValue = “10” showArrows = “false” showTooltip = “false” step = “1”> </rich:inputNumberSlider> </h:form> </h:body> </html> In the above example, the attributes are pretty much descriptive. The above piece of code will yield the following output in the browser. <rich:Calendar> As the name suggests this tag will help create a calendar in the browser. Create a separate file and name it as “richCalendar.xhtml”. Place the following code inside it.

RichFaces – Basic Concepts ”; Previous Next In this chapter, we will see some basic concepts of RichFaces and we will learn how RichFaces deal with the processing of AJAX requests and many other functionalities. Processing AJAX Request As mentioned earlier, RichFaces provides rich UI components that enables AJAX functionalities in the web application even without implementing any AJAX codes. All these AJAX capabilities are introduced via a4:j tag library. <a4j:commandLink> , <a4j:commandButton>, <a4j:support>, and <a4j:poll> are the four tags that help the developer include AJAX functionalities into the web application. We will learn more about tag libraries in a subsequent chapter. Partial Tree Processing In a conventional AJAX application, all the input fields will be processed as different nodes of a tree, however, in RichFaces we have an option of partially submitting the tree nodes and validating the required fields. Let us consider an example to understand more about this. Suppose, there are a total of five elements in HTML – “Name”, ”Employee Id”, ”Employee salary”, ”Employee Address”, and “Employee Department”. Now you want to validate or process only Employee id, which can be possible using RichFaces but not possible using AJAX. You need to submit the entire form to the server. RichFaces provides an execute attribute that can identify a specific component and process the same. Following are the different levels of execute attributes available. @all − This attribute will process all your data. @none − This can be used when you don’t want to process any of the data. @this − This will process the requesting component only. @form − This will process the entire form that contains the requesting component. @region − This will process a specific region of a webpage. Partial View Updates Like input fields, RichFaces provides similar options to update different views. Developers can customize the view according to their choice. Like the execute attribute, there is a render attribute that works similar to the execute attribute. All these attributes work based on the ID identifier of a webpage. Following are the different levels of render attributes available. @all − This will update the entire component. @none − This will not update any of your components. @this − This will update only the requesting component. @from − This will update the form that contains the requesting data. @region − This will update a specific region of the webpage. Other a4j Tags Till now, we have discussed the conceptual properties about RichFaces application. In this section, we will learn about them in detail with hands-on examples. <a4j:AJAX> This is one of the core components that RichFaces offers. This is nothing but an extending part of JSF2.0 f:AJAX tag. This tag triggers an AJAX request whenever a JS event occurs in the webpages. Following example describes more about this tag. Create a “xhtml ”page under the webpage folder and name it as “a4jAJAXExample.xhtml”. Then, paste the following piece of code. <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://xmlns.jcp.org/jsf/html” xmlns:a4j = “http://richfaces.org/a4j”> <h:head> <title>a4j:AJAX Tag Example</title> </h:head> <h:body> <h:form id = “form”> <h:inputText value = “#{managedBean.message}”> <a4j:AJAX render = “ShowMessage” /> </h:inputText> <h:outputText value = “#{managedBean.message}” id = “ShowMessage” style = “animation-duration”/> </h:form> </h:body> </html> We also need to create a managed bean in order to hold the inputs from the webpage. Go ahead and create a java class under the source package directory. Following is the managedbean.java class code. import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class managedBean { String message; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } } Save both the files and run, which will yield the following output in the browser. <a4j:param> a4j:param is an extension of f:param tag. It is used to assign a value to a property or an instance variable. This tag is capable of assigning the value to the instance variable permanently. Following is the “a4jparamExample.html” code. <?xml version = “1.0” encoding = “UTF-8”?> <!DOCTYPE html> <html xmlns = “http://www.w3.org/1999/xhtml” xmlns:h = “http://xmlns.jcp.org/jsf/html” xmlns:a4j = “http://richfaces.org/a4j”> <h:head> <title>Param tag example</title> <meta name = “viewport” content = “width = device-width, initial-scale = 1.0″/> </h:head> <h:body> <h:form id = “form”> <h:panelGrid columns = “2”> <a4j:commandButton value = “TutorialsPoint” render = “rep”> <a4j:param value = “Tutorials point” assignTo = “#{managedBean.message}” /> </a4j:commandButton> <a4j:commandButton value = “RichFace Tutorials” render = “rep”> <a4j:param value = “RichFace Tutorials” assignTo = “#{managedBean.message}” /> </a4j:commandButton> </h:panelGrid> <br /> <h:outputText id = “rep” value = “Selected Name:#{managedBean.message}” /> </h:form> </h:body> </html> Following is the corresponding managed bean class code. import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class managedBean { String message; public String getMessage() { return message; } public void setMessage(String message) { System.out.println(“This method is getting called with”+message); // we have added this line in order to check how the AJAX call // happens to the class methods without any direct communication this.message = message; } } Go ahead and run the file. Following is the output in the browser. Now, in the server console you will see the following output, which proves that xhtml file is communicating with the managed bean in order to set the instance variable at run time. <a4j:commandButton> We have already used the command button tag in our previous example. It is used to create a button inside a xhtml page, which will generate and communicate with the AJAX engine to process the specific request. It takes an input and processes the same and renders an output in the web browser. In the previous example, we have created two buttons – “TutorialsPoint” and “RichFace Tutorials”. Our command button tag internally communicates with the managed bean and sets the required instance variables. It is also responsible for rendering the value. <a4j:commandLink> Command link works like <h:commandlink> component of JSF 2.0. The command button generates submit-based AJAX request, whenever the command link works on the JS click event. This is the only difference we have in the command button and the command link. Following example will help you understand

Discuss RichFaces ”; Previous Next RichFaces is a component library developed by JBoss, which provides in-built AJAX support to JSF application. It reduces all the redundant codes that the developer has to write to create different markup in the browsers. Print Page Previous Next Advertisements ”;