Tagged: RichFaces

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.

Presenting RichFaces 4, and mobile development choices at JAX 2011

In two weeks I will be at JAX 2011 in Mainz, Germany talking about the newRichFaces 4 and mobile development choices (Native Apps vs. Web Apps).

May 4, 17:30 – 18:30
Mobile Development Choices: Native Apps vs Web Apps

May 5, 10:15 – 11:15
Ajax Applications with JSF 2 and the New RichFaces 4

Say hello if you are there!

Learn RichFaces 4 in new webinar series

Now that RichFaces 4 has been released, Exadel will be hosting a 3-part webinar series on RichFaces 4.

RichFaces is a JSF framework offering over 100 rich components, skins, client-side validation, and a Component Development Kit (CDK). Although JSF 2 now offers basic AJAX functionality, a broader framework is still required to build real-world JSF AJAX applications.

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!

Webinar 1: RichFaces 4 — Everything You Need to Know

This we­binar will briefly cover JSF 2 AJAX fea­tures and then the extra value the new RichFaces 4 adds on top of JSF 2 through its ad­vanced fea­tures, tags, cus­tomiza­tion, and flex­i­bility. We will cover a4j:* and rich:* tag li­braries, ad­vanced ren­dering op­tions, AJAX client queue, par­tial table up­dates, client-side validation, skins, and more. This is a great we­binar for anyone who wants to learn what RichFaces 4 offers.

Webinar 2: RichFaces 3 to RichFaces 4 — A Class in Moving Up

In this second we­binar, we will cover every­thing you need to know in order to up­grade your ap­pli­ca­tion from RichFaces ver­sion 3 to RichFaces ver­sion 4. We will offer tips, ad­vice, and a mi­gra­tion path for your application.

Webinar 3: RichFaces 4 — New and Advanced Features

In the third we­binar, we will cover the newer and more ad­vanced fea­tures now avail­able in RichFaces 4. We will cover fea­tures such as client-??side val­i­da­tion, AJAX client queue, com­po­nent JavaScript API, par­tial table up­dates, cre­ating custom skins, and much more.