Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: mkblog.exadel.com and Twitter: @maxkatz. Max is a DZone MVB and is not an employee of DZone and has posted 82 posts at DZone. You can read more from them at their website. View Full User Profile

An Introduction To JBoss RichFaces

08.25.2008
| 427472 views |
  • submit to reddit

This tutorial article will give a very quick introduction to JBoss RichFaces. Instead of just listing features, we are going to briefly define RichFaces and then dive right into an actual step-by-step example. In this example, we are going to go beyond the standard “Hello World” type of example. We will come back to this in just a moment.

JBoss RichFaces

If you know what RichFaces is already, then you can probably skip this section. For those of you who don't, here is what you need to know (the most important parts). JBoss RichFaces is a rich component library for JSF. RichFaces doesn't replace standard JSF, so you use RichFaces with either the Mojara JSF (Sun RI) implementation or the MyFaces implementation. RichFaces simply provides ready-to-use Ajax components to enable building Ajax-based applications. Another way to look at it is as just lots of extra JSF components beyond what the standard JSF provides. These components include all the necessary JavaScript coding, so you almost never have to work with JavaScript directly.

OK, this is the only place where I'm probably going to create some confusion, but I'm allowed to do it just once. RichFaces is not just a set of plug-ins, but actually a framework. One of its major features is its rich components. The components are divided into tag libraries. In addition, RichFaces provides a skinability (themes) features along with the Ajax4jsf CDK (Component Development Kit). For this article, I'm only mentioning CDK, so you are aware that it exists.

Two Tag Libraries

While the product is called RichFaces, it still has two different tag libraries. One tag library is called a4j: and the other is called rich:. The a4j: tag library provides page-level AJAX support. It basically provides foundation-like controls where you decide how to send a request, what to send to the server, and what to update. This approach gives you a lot of power and flexibility. The rich: tag library provides component-level AJAX support. Components from this library provide all their functionality out-of-the-box. In other words, you don’t need to decide how to send a request and what to update.

Skinability

Another major feature is skinability (or themes). Any number of skins (defined via a property file) can be created with different color schemes. When a particular skin is set, component renderers will refer to that skin and generate colors, images, styles, and stylesheets based on that skin. What this means is that you can easily change the look and feel of the whole application by simply switching to a different skin. I have dedicated a complete section to this topic.

We're done. That's all you need to know for now.

Beyond “Hello World”


I'm pretty sure you are somewhat tired of “Hello World” examples. While they are very useful (at the beginning), they are not very practical in the real world. So, this time, let's go beyond “Hello World.” In this example, we will display a list of users in a table. Each row will have an “Edit” button. When this button is clicked, the application will open up a modal panel where that selected user can be edited. When changes are saved, only that particular row in the table will be updated, not the entire table.

Let's get started. We will start with the required software. You might already have the required software, so it's really your choice if you want to use your existing setup or continue with my setup. Our final application will look like this:

Legacy
Article Resources: 
Published at DZone with permission of Max Katz, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Max Katz replied on Mon, 2009/02/16 - 9:48pm in response to: Harshad Khasnis

@harshadk: I ran your code in Firefox 3 and it worked for me. It wasn't possible to resize or move the modal panel. What browser did you try? I also used RichFaces 3.3.0 GA.

Max Katz replied on Mon, 2009/02/16 - 9:51pm in response to: Asma Shah

@shahasma99: did you annoate the init() method with @PostConstruct?

nancy xiao replied on Mon, 2009/02/16 - 10:24pm

JAVA 资深人员。 Senior Java candidates: 应具备以下条件 - 5-8 year Java programming experience - Front-end, Persistence and Back-end - Experience with OSGi and Spring-DM strongly desired - Expertie in Audio and Video is a plus - Good communications skills with passion - Sun Certifications Job descripotion: Responsibilities Include:职位描述 * Develop cutting edge web services and java applications for windows and linux using Java, Spring, and OSGi, with a focus on the front-end, middle-tier and back-end *Participate through full-cycle software development, including analysis, design, programming, integration and testing, and product release *Interact with web client developers and server developers to implement new web services and applications *Write clear, clean, readable, portable, reliable, and manageable code *Optimize application performance for high load, high concurrency environments Requirements Include: * BA/BS in Computer Science, Software Engineering, or equivalent experience * At least 5+ years (Senior level) programming experience with Java, with significant experience developing web applications and multi-tiered systems *Expertise in Java and other Java-based technologies, XML, and web frameworks *Expertise in highly concurrent, multi-threaded, Java servers *Expert knowledge of the Spring Framework and other Spring portfolio products (Spring Security, Spring WS, etc.) *Experience with OSGi and Spring-DM strongly desired *Ability to write clear, clean, readable, portable, reliable, and manageable code *Experience with debugging, testing, web services, application servers, databases, and web servers *Familiarity with software development processes and the software product lifecycle *Experience with performance analysis and tuning, quality of service, and scalability *Able to work and communicate well in a self-motivated, milestone-driven, team development environment *Collaborative, upbeat, work ethic where you can take leadership, ownership and have fun *Strong passion for java appications *Expertie in Audio and Video is a plus *Candidates with the following certifications are expected. Sun Certified Java Developer (SCJD) Sun Certified Mobile Application Developer (SCMAD)

nancy xiao replied on Mon, 2009/02/16 - 10:24pm

JAVA 资深人员。 Senior Java candidates: 应具备以下条件 - 5-8 year Java programming experience - Front-end, Persistence and Back-end - Experience with OSGi and Spring-DM strongly desired - Expertie in Audio and Video is a plus - Good communications skills with passion - Sun Certifications Job descripotion: Responsibilities Include:职位描述 * Develop cutting edge web services and java applications for windows and linux using Java, Spring, and OSGi, with a focus on the front-end, middle-tier and back-end *Participate through full-cycle software development, including analysis, design, programming, integration and testing, and product release *Interact with web client developers and server developers to implement new web services and applications *Write clear, clean, readable, portable, reliable, and manageable code *Optimize application performance for high load, high concurrency environments Requirements Include: * BA/BS in Computer Science, Software Engineering, or equivalent experience * At least 5+ years (Senior level) programming experience with Java, with significant experience developing web applications and multi-tiered systems *Expertise in Java and other Java-based technologies, XML, and web frameworks *Expertise in highly concurrent, multi-threaded, Java servers *Expert knowledge of the Spring Framework and other Spring portfolio products (Spring Security, Spring WS, etc.) *Experience with OSGi and Spring-DM strongly desired *Ability to write clear, clean, readable, portable, reliable, and manageable code *Experience with debugging, testing, web services, application servers, databases, and web servers *Familiarity with software development processes and the software product lifecycle *Experience with performance analysis and tuning, quality of service, and scalability *Able to work and communicate well in a self-motivated, milestone-driven, team development environment *Collaborative, upbeat, work ethic where you can take leadership, ownership and have fun *Strong passion for java appications *Expertie in Audio and Video is a plus *Candidates with the following certifications are expected. Sun Certified Java Developer (SCJD) Sun Certified Mobile Application Developer (SCMAD)

nancy xiao replied on Mon, 2009/02/16 - 10:24pm

Hello,this is Nancy, from Shanghai Chinahr. There has a position I want to communicate with you. Whether you have interest to think about it? The job oriented middle and upper classes, so the salary is negotiable. About the requirements: can communicate with foreigners directly If you are interested in this position, I hope you can send me your CV including English and Chinese, or calling me directly. My Tel :021-65090386

Thai Dang Vu replied on Sat, 2009/02/21 - 7:20am

I have a question:

Your "Save" link is in the form in the modal panel and it's going to re-render the columns "name" and "email" which are in another form. How can RichFaces know which form that has the "name" and "email" columns to re-render?

Max Katz replied on Mon, 2009/02/23 - 5:44pm in response to: Thai Dang Vu

It first searches the current naming container (form), then it searches the parent container and so on. At some point it will reach the root and search from there. 

You can see the full algorithm here: org.ajax4jsf.renderkit.RendererUtils.findComponentFor(UIComponent, String)

 

Tom Schurmans replied on Wed, 2009/03/04 - 5:56am

Hi, I am getting this error:
Unexpected error processing managed bean userBean com.sun.faces.mgbean.ManagedBeanPreProcessingException: Unexpected error processing managed bean userBean at com.sun.faces.mgbean.BeanManager.preProcessBean(BeanManager.java:356) at com.sun.faces.mgbean.BeanManager.create(BeanManager.java:201) ...

Caused by: com.sun.faces.mgbean.ManagedBeanPreProcessingException: Unexpected error processing managed property users ...

Caused by: java.lang.NullPointerException at com.sun.faces.mgbean.ManagedBeanBuilder.bakeBeanProperty(ManagedBeanBuilder.java:350) at com.sun.faces.mgbean.ManagedBeanBuilder.bake(ManagedBeanBuilder.java:107) ... 59 more

Any thoughts?
btw, the zip file you included doesn't work here. And the alternative doesn't give the extra "jsf + richfaces option" when you start a new eclipse project. Any chance you can rezip it and upload it somewhere else?
Thanks!

Max Katz replied on Sat, 2009/03/07 - 12:45am in response to: Tom Schurmans

@TomSch: You might have an error in Faces config file, can you post it here? As for the zip file, I'll try to upload a new or post a link on my blog.  

Jean Chastain replied on Fri, 2009/03/20 - 9:27am in response to: Max Katz

Max, I know you're a busy guy, but I want to pick up this thread.  I'm running on JBoss 5.0 and have the same problem shahasma99 is having.  After the first deploy (before the modal panel is added), all I see it the title.  I do have the @PostConstruct before the init(), but when I set a breakpoint on the init(), it doesn't seem to be getting there.  Is there some JBoss configuration I'm missing?  Or is it just not possible to break there?

 TIA, Jean

Kannan Varadharajan replied on Fri, 2009/04/03 - 7:48am

Hi, I am having issues with the PostContruct annotation. It does not seem to work. The init method doesnt seem to be called at all. Though I could make it work using the constructor. Thanks.

Alex Cbbdjfkdjfkj replied on Fri, 2009/04/03 - 10:26am

I've followed the steps to install the RichFaces templates, and when I choose New > JSF Project, it only shows  "JSF 1.2, Facelets" not "JSF 1.2, Facelets, RichFaces." What am I doing wrong? Thanks.

Max Katz replied on Thu, 2009/04/09 - 10:32pm in response to: Jean Chastain

Sorry for the delay. For some reason dzone.com stopped sending me emails when a new comment is post.  Does it work if you move the init code into constuctor?

Max Katz replied on Thu, 2009/04/09 - 10:32pm in response to: Kannan Varadharajan

Not sure what the problem is. What server are you running on?

Max Katz replied on Thu, 2009/04/09 - 10:34pm in response to: Alex Cbbdjfkdjfkj

Try creating a new workspace.

Davut Uysal replied on Fri, 2009/04/17 - 2:21am

Hi Max. I run the project successfully without compilation errors. I can see DataTable and ModalDialog successfully but there is one problem: - When I modify name-email and then click on the Save button on ModalDialog, the updates are not reflected to the parent DataTable. DataTable never changes. Why is it? Thank you a lot.

Nghia Le replied on Mon, 2009/04/27 - 3:41pm

I am implementing a JSP page using the JBoss Richfaces under the Eclipse JBoss JSF Project and I am getting an error "Unknown tag <a4j:support..>. The following taglib is included on my JSP page. <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>. Please help.

Nick Thomson replied on Thu, 2009/04/30 - 9:36am

Hi Maxkatz,

 I'm trying to use the ajaxKeys options with a dataTable as you have described in the article and I've got it working with the dataTable and even using the dataScroller control.

 However, once I enable sorting in the data table, the rows do not refresh properly.  If the items are sorted in the same order as they are in the List the correct rows are redrawn, but sorting them in any other order results in the required rows not being highlighted.

  I'm using Seam 2.1.1.GA and RichFaces 3.3.0.GA, the table looks like this (the keepalive is included but not shown and I've removed some of the columns)..

<rich:dataTable id="testDataTable" value="#{testBean.data}" var="data" ajaxKeys="#{testBean.ajaxKeys}" sortMode="single" rows="20">
<rich:column sortBy="#{data.id}" id="pid" style="#{data.viewing ? 'background: red' : '' }">
<f:facet name="header">
<h:outputText value="ID"/>
</f:facet>
<a4j:commandLink style="display: block; width: 100%;" action="#{testBean.SelectView(data)}" value="#{data.id}" reRender="pid,param1"/>
</rich:column>

<rich:column sortBy="#{data.testParam1}" id="param1" style="#{data.viewing ? 'background: red' : '' }">
<f:facet name="header">
<h:outputText value="Param 1"/>
</f:facet>
<a4j:commandLink style="display: block; width: 100%;" action="#{testBean.SelectView(data)}" value="#{data.testParam1}" reRender="pid,param1"/>
</rich:column>
</rich:dataTable>

  And the appropriate bits from the testBean..

private List<TestData> data = new ArrayList<TestData>();

private TestData selectedItem = null;
private HashSet<Integer> ajaxKeys = new HashSet<Integer>();

public void SelectView(TestData data) {
this.ajaxKeys.clear();
this.ajaxKeys.add(this.data.indexOf(this.selectedItem));
this.selectedItem.setViewing(false);
this.selectedItem = data;
this.selectedItem.setViewing(true);
this.ajaxKeys.add(this.data.indexOf(this.selectedItem));
System.out.println(this.ajaxKeys.toString());
}

public TestData getSelectedItem() {
return selectedItem;
}

public void setSelectedItem(TestData selectedItem) {
this.selectedItem = selectedItem;

public Set<Integer> getAjaxKeys() {
return this.ajaxKeys;
}

Any idea how to fix this?

Thanks,

 Nick

 

Alex Cbbdjfkdjfkj replied on Tue, 2009/05/05 - 9:53am

For those having difficulty (like me!) with the step that says "For JSF environment, select JSF 1.2, Facelets, RichFaces", try this:

  1. After downloading the template zip file, DON'T just copy and paste the folders into the jboss template folder!
  2. Copy the richfaces-template-6.zip\lib\jsf-1.2-facelets-richfaces\ to your Eclipse's appropriate folder (for me, it's here: C:\eclipse_ide\plugins\org.jboss.tools.common.projecttemplates_3.0.0.GA-R200903141626-H5\lib)
  3. Copy the \templates\jsf-1.2-facelets-richfaces\ to your Eclipse folder (something like C:\eclipse_ide\plugins\org.jboss.tools.common.projecttemplates_3.0.0.GA-R200903141626-H5\templates)
  4. And don't forget the \templates\pages\jsf\
  5. In other words, you need to go into each downloaded item and copy its contents over to the matching folder on your jboss installation.
If you don't see the RichFaces item in the Eclipse dropdown, then you didn't copy the items over correctly. Try again. Believe it or not, this step messed me up! I finally see that item in the dropdown box and can proceed with the tutorial!

Max Katz replied on Tue, 2009/05/05 - 12:13pm in response to: Davut Uysal

Do you reRender the email component?

Max Katz replied on Tue, 2009/05/05 - 12:15pm in response to: Nghia Le

This is an IDE error. Did you include the Jar files? Do you get it after restart of the editor or Eclipse?

Max Katz replied on Tue, 2009/05/05 - 12:18pm in response to: Nick Thomson

Nick - what do you mean by highlighted row? In any case, can you send me all the details via email?

Max Katz replied on Tue, 2009/05/05 - 12:20pm

Sorry for the dealy in replying to comments. Dzone has stopped notifying me when new comments are posted after they upgraded their site.

Davut Uysal replied on Wed, 2009/05/06 - 12:57pm in response to: Max Katz

Ok. I coded the sample from the beginning and it works! Thanks!

Debraj Ganguly replied on Sat, 2009/05/09 - 7:56am

I am stuck with a problem with rich:modalPanel.Please read through the problem statement.
I have a page which has a link to open a modal panel (BasePage.jsp)
h:form
..............
..............
a href="#" onclick="#{rich:component(modal_panel)}.show()">#{msg.ShowPanel}/a
...........
.........
/h:form
I am including the modal panel page in the base page after this in a separate form
h:form
ui:include src="MyModalPanel.jsp" /
h:form
MyModalPanel.jsp
----------------------
In this page I have a tab containing a number of and elements.
I also have a a4j:commandButton at the end. I have an action defined for the button.
a4j:commandButton id="save_form" value="Save" image="../../images/Save_bttn.jpg"
action="#{baseBean.save}" reRender="validation_messages_add" ajaxSingle="false" /

I am reRendering the validation message.

My problem
--------------
on clicking the save button the baseBean.save() method is called correctly but the bean is not getting reflected with the user entered value. It still hold the initialized values that i had in the base bean attrib definition.
I changed the a4j:commandButton to h:commandButton and also added the onclick function to hide the modal. I had no problem then but this closed the modal panel and the validation messages on the panle could not be viewed by the user.(page refreshed.)
Can you please guide me why the a4j:commandButton thing is unable to get the form values.
waiting for your reply,
thanks in advance
(I have purposefully ommited the '<' and '>' tags

Annie Cheng replied on Thu, 2009/05/14 - 11:20am

Thanks for the tutorial! For some reason, my pop-up box is not showing the selected user. It looks like setPropertyActionListener isn't working properly. Any suggestions? Thanks!

Max Katz replied on Tue, 2009/05/19 - 5:45pm in response to: Debraj Ganguly

Sorry, I don't understand the problem. Where is the input field? I'm also surpised that this works, that's JSP with Facelets...:

<ui:include src="MyModalPanel.jsp" /> 

Max Katz replied on Tue, 2009/05/19 - 5:46pm in response to: Annie Cheng

Can't really say.. make sure the your code exacly matches mine. Make sure the bean property exists.

hookfi john replied on Sun, 2009/05/31 - 7:48am

jame jack replied on Mon, 2009/06/29 - 4:23pm

تحميل برامج برامج جوالات العاب بنات برامج تكنولوجيا كتب تعليم UltraSurf العاب برامج نت Internet Download Manager ProgDVB برامج مجانية أفضل المواقع العربية دليل مواقع مشاهدة محطات مشفرة Online TV Player 3.0.0.940 Internet Download Manager 5.17 Build 4 رقص شرقي anyTV Pro 4.32 OnLineLive 7.1.1 هزي يانواعم ProgDVB 6.06.2 SopCast 3.0.3 منتدى برامج نت Falco Image Studio 3.6 لعبة تزلج على الجليد UltraSurf 9.4 كاثرين هيغل Katherine Heigl محطة غنوة FreeZ Online TV 1.0 Free Video to Mp3 Converter 3.1.3.51 Advanced MP3 Converter 2.10 Xilisoft Video to Audio Converter 5.1.23.0515 Blaze Media Pro 8.02 AKRAM Media Creator 1.11 DVD Audio Extractor 4.5.4 Free WMA to MP3 Converter 1.16 لعبة نينجا المتقدم لعبة قذف كرة لعبة دراجات البهلوانية لعبة اعداء الغابة تحميل برامج Download DivX Subtitles 2.0 BullGuard 8.5 Google Chrome 2.0.181.1 Dev Dell Studio XPS Desktop 435T Intel Matrix Storage Manager A00 Gigabyte GA-EP45-UD3P Bios F9 Ambush HDConvertToX 1.1.229.1764 MSI Wind Nettop CS 120 Realtek Audio Driver 5.10.0.5618 Biostar T41-A7 6.x Realtek On-Board Audio Driver 5.10.0.5735 for 2000/2003/XP TweakNow RegCleaner 4.1.1 SpeedItup Free 4.97 برامج العاب - Internet Download Manager - برامج جوالات - العاب - محطة غنوة - قنوات فضائية - بنات - تكنولوجيا - كتب تعليم - UltraSurf - ق ذ -0

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.