Tagged: RichFaces-howto

JAX/JSF Summit

Learn RichFaces 4 at JAX/JSF Summit in San Jose, CA June 20-23

The RichFaces 4 conference road trip continues. It started with TheServerSide Java Symposium in Las Vegan in March. Then it was CONFESS_2011 in Vienna in April and JAX 2011 in Mainz in May. Now RichFaces 4 comes to JAX and JSF Summit in San Jose, CA June 20-23. I will be doing a general RichFaces 4 session as well as a full day RichFaces 4 workshop. Jay Balunas from Red Hat is doing another RichFaces session called: RichFaces 4.0 Component Deep Dive . If you are in the Bay Area, you don’t want to miss this conference.

Ajax Applications with JSF 2 and New RichFaces 4
Monday, June 21, 2011
RichFaces is a JSF framework with Ajax components, client-side validation, cloud deployment, skins, and a component development kit (CDK). This session will briefly cover JSF2 Ajax features and then the extra value the new RichFaces adds on top of JSF2 through its advanced features. Examples will include partial table updates, Ajax queues, client-side validation, GAE deployment, and skins.

RichFaces 4 workshop
Sunday, June 20, 2011
Attendees will learn everything they need to begin developing applications with JSF 2 and RichFaces. We will first start with basic Ajax features in JSF 2 such as sending an AJAX request, partial view rendering, partial view processing using the f:ajax tag. We will then move to the new RichFaces 4 and demonstrate advanced features, tags, customization and richness it adds on top of JSF 2. You will learn how the a4j:ajax extends the standard f:ajax tag as well as how to use other a4j: tags, rich: tags and skins in RichFaces. Hands-on example will be used to demonstrate most concepts and features. Workshop will cover: standard JSF 2 Ajax features (f:ajax), a4j: tags, rich: tags, client-side validation, cloud deployment, Skins.

How to hightlight a field in JSF when validation fails

Highlighting an input field that failed validation (or conversation) is a common UI practice today. This sort of functionality is not available in JSF (nor RichFaces) out of the box (Seam does have it). I got an email from RichFaces 4 workshop attendee from CONFESS_2011 conference asking how to do it and I thought it’s a good idea to make it blog post. It turns out, implementing such functionality is pretty simple. All we need to do is check if a particular field (component) is valid and then render or not render a style for the input field.

Let’s start with the Java bean:

@ManagedBean
@RequestScoped
public class Bean implements Serializable {
 
   private String text; // getter and setter
 
   public boolean isInputValid (){
      FacesContext context = FacesContext.getCurrentInstance();
      UIInput input = (UIInput)context.getViewRoot().findComponent(":form:input");
      return input.isValid();
   }
}

Inside isInputValid, we are searching for a particular component and checking whether it’s valid or not.

JSF page:

<h:head>
<style>
.inputInvalid {
   border: 2px solid red;
}
</style>
</h:head>
<h:body>
   <h:form id="form">
      <h:panelGrid columns="2">
         <h:outputText value="Text:" />
	 <h:panelGroup id="inputGroup">
	    <h:inputText id="input" value="#{bean.text}" 
               styleClass="#{bean.inputValid?'':'inputInvalid'}" 
               required="true" requiredMessage="Value required">
		<a4j:ajax event="blur" render="inputGroup"/>
	    </h:inputText>
	    <h:message for="input" style="padding: 0.5em"/>
	 </h:panelGroup>
      </h:panelGrid>
   </h:form>
</h:body>

Everything important happens here:

styleClass="#{bean.inputValid?'':'inputInvalid'}"

If the component is invalid (validation has failed), then we will render inputInvalid CSS class. Otherwise, nothing is rendered.

This is the result when running the page (before invoking validation):

After validation:

As you can see the solution is pretty simple.

RichFaces 4 webinar series starts April 20, 2011

We are starting RichFaces 4 webinar series and there is still time to register for the first webinar tomorrow.

In this 3-part series, you will learn everything you need to start using the new RichFaces 4. Individual webinars cover an introduction to RichFaces 4, migration from RichFaces 3 to RichFaces 4, and the newer and more advanced features in RichFaces 4.

Topic Time Register
RichFaces 4 — Everything You Need to Know April 20, 2011 (11am Pacific Time) Register Now!
RichFaces 3 to RichFaces 4 — A Class in Moving Up May 11, 2011 (11am Pacific Time) Register Now!
RichFaces 4 — New and Advanced Features June 15, 2011 (11am Pacific Time) Register Now!

Learn how to add/delete table row with RichFaces [in 5 minutes]

I have seen this question more than once now, how do you add/delete a row in a table? Turns out it’s pretty simple. Although you can’t do partial table update which RichFaces supports, when adding or deleting a row, jut render the entire table. This will also work with a standard JSF table. Also, a related post is How to delete a row in JSF. RichFaces 3.3.3 is used.

The page looks like this:

JSF page:

<h:form>
   <rich:panel>
      <h:panelGrid columns="2">
         <a4j:commandButton value="+" action="#{bean.add}" reRender="list" />
	 <a4j:commandButton value="-" action="#{bean.remove}" reRender="list" />
      </h:panelGrid>
      <rich:dataTable id="list" value="#{bean.list}" var="item" width="60px">
         <rich:column>
	    <h:outputText value="#{item}" />
	 </rich:column>
      </rich:dataTable>
   </rich:panel>
</h:form>

Managed bean:

@KeepAlive
public class Bean {
   private List<Integer> list;
 
   @PostConstruct
   public void init() {
      list = new ArrayList<Integer>();
      list.add(1);
      list.add(2);
      list.add(3);
   }
   public void remove() {
      // remove last
      if (!list.isEmpty()) {
         list.remove(list.size() - 1);
      }
   }
   public List<Integer> getList() {
      return list;
   }
   public void add() {
      list.add(list.size()+1);
   }
}

The only thing to mention is that @KeepAlive gives us view scope. This way we can keep the same bean between requests. More on view scope in RichFaces.

JSF configuration file:

<managed-bean>
  <managed-bean-name>bean</managed-bean-name>
  <managed-bean-class>org.richfaces.example.Bean</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

That’s it.

Plain JSF/RichFaces project on JBoss AS

A reader asked me to provide plain JSF and RichFaces template to run on JBoss AS. As JBoss AS already comes with JSF libraries, just delete the two JSF Jars (jsf-api.jar, jsf-impl.jar) and you will be ready to go. Or, follow the steps below to download and import the project. Again, this is just plain JSF/RichFaces project, no Seam, Hibernate, JPA. It’s a good starting point if you want to try RichFaces.

How to import
I tested this on Eclipse 3.5 with JBoss Tools. I will assume that you already have JBoss AS registered in Eclipse.

  1. Download the the template file
  2. In Eclipse, select File/Import
  3. Select General/Existing Project into Workspace, click Next
  4. Check ‘Select archive file:’ option
  5. Click Browser… and point to the downloaded file
  6. Click Finish
  7. Deploy the project to JBoss AS.
  8. Run the application, you should see “Hello, looks like it’s working” message (image below).

Creating “Please wait” with RichFaces modal panel

Showing user a modal “Please wait” or “Working” dialog is a good way to prevent him or her clicking a button more than once. It can be easily done in RichFaces by combining a4j:status and rich:modalPanel tags.

<h:form>
   <a4j:commandButton value="Do something" 
      action="#{bean.dosomething}"
      status="ajaxStatus"/>
</h:form>
 
<a4j:status id="ajaxStatus"
   onstart="#{rich:component('waitPanel')}
      .show('',{top:'40px', left:'80px',height:'100px', width:'200px'})"
   onstop="#{rich:component('waitPanel')}.hide()" />
 
<rich:modalPanel id="waitPanel" style="text-align:center">
   <h:outputText value="Please wait..."
      style="font-weight:bold;font-size:large" />
</rich:modalPanel>

When the button is clicked, a4j:status is executed. Instead of showing some text or animated image, we use onstart event to open a modal panel. While Ajax request is executing on the server, the modal panel is active and prevents clicking anything on the page. When the request is done, onstop event on status is called and hides the modal panel.

Short and neat, right?