Bootstrap3 with JSF error handling


JSF applications often get called ugly, or cookie cutter. The over use of the components and built in CSS creates the standardized look, but lacks flexibility. Using Bootstrap 3 CSS in combination with JSF attributes you can create a modern look. Take for example this salary sample salary calculator program which leverages JSF components.

Bootstrap 3 + JSF

The following code is used to create the amount input area.

<div class="form-group #{!amount.valid ? 'has-error' : 'none'}">
   <h:outputLabel value="Amount" for="amount" />
   <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
         <h:inputText id="amount" value="#{myBean.amount}" binding="#{amount}" styleClass="form-control" required="true" requiredMessage="Enter dollar amount"/>

This technique uses bindings to get the validation state of the inputText component. More information can about component bindings can be read on my other article “What is a JSF component binding? How can I use it?“. By intermixing both JSF + Bootstrap you can see how simple it is to give your app a modern look.