An Introduction To JBoss RichFaces

One thing you probably noticed is that you have a blue color schema while my screen shots have red color schema. I'm using a different skin. If you would like to change the skin, that's very easy to do. Open WEB-INF/web.xml file and change the skin parameter to ruby:

<context-param>
  <param-name>org.richfaces.SKIN</param-name>
  <param-value>ruby</param-value>
 </context-param>

Save and restart the server.

One thing that's still different is the font size. If you also want to change that, check out this blog entry.

Adding a modal panel

We will first create the modal panel. The modal panel has to be placed outside the original form, because it must have its own form:

<rich:modalPanel id="useredit">

   <f:facet name="header">

   User

  </f:facet>

  <h:form>

  <h:panelGrid id="userinfo">

   <h:outputLabel for="nameInput" value="Name:"/>

 <h:inputText id="nameInput" value="#{userBean.selectedUser.name}"/>

   <h:outputLabel for="emailInput" value="Email:"/>

 <h:inputText id="emailInput" value="#{userBean.selectedUser.email}"/>

 <h:panelGrid columns="2">

  <a href="#" onclick="#{rich:component('useredit')}.hide();return false">

   Close

  </a>

  <a4j:commandLink oncomplete="#{rich:component('useredit')}.hide();return false">

   Save

  </a4j:commandLink>

 </h:panelGrid>

  </h:panelGrid>

  </h:form>

</rich:modalPanel>

The code is rather simple, I will talk about the Close and Save links shortly.

Next, we need to open the popup. To do that, we are going to add another column to the table. The column will contain a button to open the popup. We will make this column first. The coding looks like this:

...
<h:column>
    <a4j:commandButton value="Edit"
     oncomplete="#{rich:component('useredit')}.show()"
     reRender="userinfo">
       <f:setPropertyActionListener value="#{user}" 
      target="#{userBean.selectedUser}" />
    </a4j:commandButton>
                    </h:column>
...

For both showing and hiding the modal panel, we use the RichFaces client-side function called #{rich:component('id')} to get a reference to the component (in our case, it’s the modal panel). Once we have a reference, we call the JavaScript API on that component. In our case, it is show() to open and hide() to close the modal panel. Later, we will be calling a save method when the Save button is clicked in the modal panel.

How do we know which row was selected which corresponds to the user we would like to edit. To accomplish that we use a standard JSF tag called f:setPropertyActionListener. It's basically a listener that will take the object in the current row and assign it to userBean.selectedUser property inside the managed bean. We don't yet have this property, so let's add it.

private User selectedUser;

public User getSelectedUser() {
 return selectedUser;
}
public void setSelectedUser(User selectedUser) {
 this.selectedUser = selectedUser;
}

 

Before we test this, there is one more thing to mention. Notice that the Edit button’s definition has a reRender attribute set to "userinfo". This is needed in order to rerender the selected user information. We first pass the selected user to the server. When the page is rendered back to the browser, we would like to rerender that property (userSelected) in order to display the selected user.

Go ahead and run the application as we did before. Before you run, make sure everything is saved and all the changes have been deployed. Your page should look like this:

We are now able to click on a particular row and display the user information in the modal panel. What we ultimately want to do is be able to edit user information, but only update the particular row for that user, instead of updating the whole table.

Legacy

Article Resources: 

richfaces-template.zip