Nitin has posted 391 posts at DZone. View Full User Profile

Using JBoss RichFaces with JBoss Developer Studio

  • submit to reddit

JBoss RichFaces is a rich component library for JSF. RichFaces components come with AJAX support out-of-the-box and thus enable organizations to build Rich Internet Applications quickly and efficiently. The AJAX support encapsulated within RichFaces components allows developers to concentrate on user interface development instead of tedious JavaScript coding and debugging. In this session, presented at JavaOne 2008, Max Katz demonstrates how to use various RichFaces components to quickly build a rich and sophisticated user interface backed by JBoss Seam.

The complete transcript of this presentation has been provided below.

My name is Max Katz. I am a senior systems engineer from Exadel. And we are the company behind RichFaces, actually, in JBoss Developer Studio. So I'm going to go through a number of slides and then actually dive into two examples, actually build a small application.

But first, for those of you who've maybe not worked with JSF, just a quick introduction. So, what is JSF? First of all, it's a framework for building Java-based applications. But the real key is that you build the application out of UI components. And the component can be as simple as a button or an input field that all you know how to use, to a complicated, like a table, a panel, a tree. So, basically, anything you can imagine in a web browser can be a component. Now, the component is pre-built, tested, and it works. And also important that it is a standard technology today in the Java five stacks.

Now, not to just bore you with a list of features--again, I'm going to just concentrate on the most important ones, and these are the components. I'm going to show you how it starts in development and goes all the way to the browser.

So, where you see number one there, that's the development. So we use tags or a declarative approach to develop the UI. Looks very similar to JSP. But that's where the similarities end is that when the page is processed on the server. The server basically builds, or the framework builds, a componentry. That's where you see number two. So, whatever the UI you have expressed via the tags, the same tree is being built.

Now, the tree goes through a number of phases--actually, six of them. But at the end, because we are running a web application in the browser, we need to get HTML. So the tree is being rendered, and we simply get HTML. So, for a simple button, we get HTML for a button. For a super-fancy table, we get a lot more HTML. But again, it's all built and tested prefabricated.

So, let's assume that JSF is this wonderful framework; we all like to use it. But of course, today, what we want is more interactive applications, or Web 2.0 or Ajax applications, however you want to call it.

So one technique for delivering these rich Internet applications is actually Ajax. Right? So Ajax allows us to deliver a rich application inside a browser. You don't need anything. We all have browsers. Right? All you need is that.

So the basic idea of Ajax is that you only can update a part of a page. That's the basic idea, right? There is no need to update the whole page. Just update a part of it. And again, it just delivers a much more interactive, faster experience than just a full-page refresh.

But, true LC guys now that hand-coded Ajax development is not easy. Now, it's possible, but it's not easy. Right? A lot of time is spent on actually battling different browsers. If you add different operating systems, the number of environments you need to test is rather large.

But what's even more important is that this manual Ajax coding doesn't fit the JSF model. We get these components that generate HTML, and then suddenly we have to write manual JavaScript. It simply doesn't work, right? Maybe for somewhere else, it works fine. But again, specifically in JSF, it just doesn't fit. All right?

So, what we can do is we can take Java Server Faces, just a standard framework, and we can add Ajax to it. And that's where we get JBoss RichFaces. Basically, it's a rich component library for JSF. It's not replacing the standard JSF. You can still use either the reference implementation from Sun or you can use MyFaces. It's simply extra components on top of the core.

And there are two tag libraries, one called A4J, and rich. And I'm going to talk in a second about the differences. But again, the basic idea is that they're ready-to-use Ajax components.

So the first one is what we call a page-level Ajax support, or like foundation-type components, where you decide how the request is sent to the server, and you decide what to update on the server. Right? So it gives you more control, more flexibility.

The other, the rich-component tag library, what we call the component-level approach. You basically get a component that does something very specific out of the box. You don't need to worry how to send the request, what to update. It does everything. Right?

Now, it's not to say that one is better than the other. It's that you want to have both of them in your applications so; again, you have the flexibility, the power, to do anything you want.

All right? In this section some images of the components available. You can see right here, there are buttons. There is a status component, right? You all probably see, like Gmail, there is a little status component that appears when it's doing something. There is a polling component. So, again, foundation-type components, or framework-level components.

This is the A4J tag library. And then the rich tag library are these pre-built, out-of-the-box components. And this is just actually just a very small list. There are, again, 80-plus components. And you can see there are tables, calendars, menus, trees. There is also drag-and-drop. Again, anything you can basically imagine, you can see in a browser, we have. All right?

That's all, basically, for the slides. I'm may actually build something and show you how you can use it.

So, I switched to JBoss Developer Studio. It's a set of plug-ins for Eclipse, based on, obviously, Eclipse and UTP. But it provides a lot of visual tools, drag-and-drop tools, source tools, to help you with RichFaces JSF development, also Seam development.

All right. So, what I have here is a pretty basic JSF application. I'm going to run it in a second. Let me start the server. So, first, I'm going to show you the page-level Ajax support, where we're going to decide what to send to the server and what to update.

So, again, these are the tags, right? But then, on the application and the server, we're going to get a componentry. It's going to go through phases.

To run this, I can just right-click, select "run on server." Very simple. We're just going to type "Java 1." Right? And when I click this "submit," the line will be echoed on the other line. And also, the count will actually show me, what's the length of the string. Pretty simple.

Now, the count here is actually being calculated on the server. And I'll tell you in a second why it's done like that. So, if we switch back to the page--let me show you right here--I've got a listener, right here, that counts. Right?

Now, but again, we did a full-page refresh. In reality, what we need to update is this area, right? In this area. Let's just pretend that we have a lot of other components on the page. Right? So let's see how we can only update those areas on the page.

If you saw from the slide, there is the command button. It works exactly the same, almost, as the standard component. The main difference is that it allows you to initiate an Ajax request. And it also allows me to specify which parts of the page I would like to update, which areas in the browser.

So, we can do is we can also use the palette. The palette has various components that you can use in your application. And we can go to Ajax4JSF and find command button and just drag and drop it. Right? Every time you drag and drop it, it gives you this dialog, so you can set attributes if you want and so on. I can click "finish."

Also, I can switch to this split-screen, right? Source and visual. So I've got the button. OK? I also get code assist, so we can do Ajax.

Now, I still want to invoke the same server-side function, right? Again, Ajax is a user interface technique, right? In most cases, your back end stays basically the same. So, what I can do is... So I don't need to type.

And the other thing is I need to specify which areas of the page to update. Now, I'm running a JSF application and working with components, so there's no such thing as area, but I specify which components to re-render. So I specify a re-render. And if I scroll up a little bit, I need to update "count" and I need to update "text." Those are the IDs of the components. So all I do is I select here, "text."

Again, this component will render all necessary JavaScript to send the request. And then, when the response comes back, there is a JavaScript client, obviously, that will update only the parts of the DOM that I specify.

All right. So let me just run on server. Let me kill this.

Now, you probably think this looks not much different than the other one. Which, yes. I mean, it's pretty fast. Now, the way you can actually check if it was actually an Ajax request, that I'm not making this up, is if we get a scrollbar, right? If we get a full-page refresh, this will jump up, because it's a full-page refresh.

So let me enter "Java 1" and click on the "submit." This jumped up. So this is a full-page refresh. Right? With the other one, "Ajax submit," it's not a full-page refresh, so the scrollbar will not jump. Right? [laughs] So this is one part.

Now, the other thing is, also, one way we can do it is as we type. As we type, we would like to see the echo printed right away. So let me quickly show you how to do it. So, right here, we've got our input component.

The component that I'm going to use is called a4j support. What it does, it allows you to add Ajax functionality to any other standard component. So, first, we need to specify an event, right? When they type, the standard HTML event is onKeyUp. I just have to spell it correctly.

All right. The action is still the same.

Oh. I just need to get this.

And finally, the re-render, same thing. Right? So let me just check. Looks fine. Let me run this.

What this means is that it's going to be attached to the onKeyUp event, to the parent component, when the HTML is rendered.

Now, again, I mentioned that the string length is being calculated on the server, right? So that's the reason I am doing it because, I mean, I could do this on the client, right? But I'm actually going back to the server because, again, Java Server Faces is a server technology. So it's actually the application is basically running on the server. But again, calling this method proves you that I'm not just playing with you and doing this on the client. All right?

And you can, again, add validation and so on. But the same approach is that you simply use controls, right? No JavaScript here to enable this kind of functionality.

This is the page level. Right? You decide how to send, what to update. So let me quickly show you the component-level approach. Let me un-deploy this project and deploy this one. Let me stop the server first.

What I have is, actually, I'm using Seam. The back end is Seam in this case. And I have just one table of cars. My goal is to display the list of cars that I have, and then make changes to it.

So my project is right here, so I need to create a new page. So, XHTML page. All right. This is coming from the template.

So the first thing I need is I need a form. So I'm going to go to the HTML, just a standard component, take the form, just drag and drop it, click "finish." Next, I want to get a panel where I'm going to put other components inside. So I can go to RichFaces. There is a panel component. Panel, drag and drop. I also want to put a header for my panel, so I'm going to go to JSF Core, take a facet, drag and drop--this is called a header--and call this just "cool cars." Right?

Next, I want to get a table. Then I'm going to bind the table to my data source, or a Seam component, basically, and get the data. So I'm going to go to RichFaces. There are a lot of data integration components, but I'm going to select "data table." Right here is the value of the data source, where I get my... And because it's a Seam component, actually, the tool helps me resolve, right? It shows me all the components that I have.

It's going to take a second. But any component that you mark, any Seam component, the tool scans and understands what you have. The same thing with the JSF managed beans.

And one last thing is I can specify what the type of the object is. In this case, I see all the columns, all the properties in my entity, so I select make, mileage, and price. All right? You can select any number here, click, and then finish, and we get a table generated. All right?

So we are ready to run. Let me just start the server. [pause] And let's see. Right? So you get a table.

Of course, the next question is... this is fine, but you want to have a, just show ten records on the first page, right? You want to go next, previous and so on. So, there's also a component for that. I'm going to put it in the footer of the table. First, I'm going to get facet, drag and drop it. We call this footer.

And then going back to RichFaces, there is a data scroller component. You can configure it; you can see it in many, many different ways. But we'll just use it out of the box, click finish, and go like this.

The only thing is we need to specify how many rows we would like. Maybe five, maybe ten. So what we do is, we go up the table and we set rows, for example ten. All right?

We can run now. You can see... there it is, right? Again, this is an AJAX request. I'm only updating the table. Just to save time, I'm not going to type anymore, I'm just going to copy and paste really fast, to show you some other features. I have a file here.

So, another feature that people usually ask me is that when you move the mouse over the rows, you want to highlight the row that is currently being selected. That's also easy to do because the table has attributes... it's basically what color on mouse-over, and so on.

So saving this, running. All right. Other people usually ask that when you put the mouse over the record, you want to display a tool tip. Right? Maybe display more information. That is also very easy to do. There is a tool tip component. OK? I can, for example, put it into the first column. Let's say, only over the first column I want it to display a tool tip.

You just format... So there's a tool tip component. Running this... All right? Again, this can be customized in so many different ways. Obviously, there is no time.

Now, another thing people sometimes ask is that I want to click on a row, on an edit button, and open a model panel. And you can edit that object, delete the object, and do whatever you want to. There is a model panel component.

First, I'm going to create another column. I'm going to put it right here. This will be the new column, and then the actual model component is also right here. And I'm going to put it all the way outside the form. All right. But basically, this is a model that provides the functionality, and just whatever you want to display, any other components can go inside the model panel.

So saving this... Right, I get a link, and then I get a model panel. There we go. Obviously, you can't do anything with the parent window, right? That's the functionality. So, you can edit values here. This is basically just a regular window, but the parent is disabled.

One last thing that I want to show you is what's called skin ability. So let me quickly put this right here. Let me run this, and I'll show you. So, first of all, this is another component, what's called a toggle panel. So you can put anything inside the component, but I have standard, regular buttons.

So what I can do is I can change the look and feel of my application on the fly. So there is a feature called skin ability built in, that allows you to define a skin, right? Basically, it works on top of the standard CSS. It's not to replace CSS. You can define skin, and then change the look of your application on the fly.

Of course, you need to use sinkable components. RichFaces components. Right? Just to show you how a skin looks, it's actually just a property file. Oh, didn't want to do that. Which is right... So, we got a skin called New York. You specify various parts of the component, what color they want to be.

So for example, general text color, and so on. You can create as many as you want. So, I created this custom skin. And if I want to use it, what I can do is open my... let's see... skin action, and simply add a new skin that I created. So the user can... right? So this is the name of the skin, and let me restart the server.

So again, any number of skins you can create, and then you can allow the user to select the skin, or you can hard code one specific skin, and so on.

So now I got New York, and I get this green-like, bright color, almost like our shirts today. All right? I'm actually done. Let me see here, these are some of the new components in RichFaces 3.2. The version was released a month ago now. There is also a book about RichFaces that I'm writing. It will be available in a month or so.

You guys can check out a demo of all the components again, 80+ components, JBoss Developer Studio. Again, various tools on top of WPT to help you with visual source, drag-and-drop-type functionality. That's it, I'm done.

Published at DZone with permission of its author, Nitin Bharti.

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


Stephen Strenn replied on Wed, 2008/07/09 - 4:16pm

Excellent talk. I've been using RichFaces for a year now, but still learned a lot. In particular, the datatable wizard w/support for Seam Components and entities. Makes datatable creation much quicker than hand coding.

Dietmar Steger replied on Fri, 2009/06/12 - 12:18pm

But what should I do when the user create his own skin?

In this case i'm looking for a css generator to this and refer to this css file?

Or i need an jsf themes generator?

?? I have no idea

Comment viewing options

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