JSF 2.1 Tip of the Day: Progressive Update, or Graceful Degradation with <f:ajax/>

When designing a web application, you should always consider how the application should perform if JavaScript is disabled. There are some JSF frameworks which will not work at all if JavaScript is disabled. Mojarra, the reference implementation, is designed to work even if JavaScript is disabled.

The design is generally called progressive enhancement. This means that the application will work with basic components, but its functionality is further enhanced using JavaScript and CSS. The same side of the coin is also called graceful degradation. To follow the designs, you must take advantage of the component semantics, for example alt attribute on <img /> tag.

The code below shows you two different ways to use <f:ajax /> to enhance a standard <h:selectBooleanCheckbox />. The second example is not as common. There is also a <h:commandButton /> which can be used just in case JavaScript is disabled.

A best practice when considering your design is to make sure that the form will perform the expected behavior prior to adding AJAX. Once the AJAX is enabled, check to make sure that the behavior is still as expected.

Code

---