Integrating Spring & JavaServer Faces : Improved Templating

With the release of version 2.0 Facelet templating became a core part of the JSF specification. Using <ui:composition> and <ui:decorate> tags it becomes pretty easy to build up complicated pages whilst still keeping your mark-up clean. Templates are particularly useful when creating HTML forms but, unfortunately, do tend to cause repetition in your xhtml files, breaking the DRY (Don’t Repeat Yourself) principal of good software design. As part of a project to provide deeper integration between JSF and Spring I have developed a couple of new components that aim to make templating easier. Before diving into the new components, lets look at how a typical form might be built up using standard JSF templates.

Often the initial starting point with form templates is to add some boiler plate surround to each input. Often you need extra <div> or <span> tags for your css to use. Here is a typical example:

<!-- /WEB-INF/pages/entername.xhtml -->
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="firstName" label="First Name" value="#{bean.firstName}"/>
  <ui:param name="label" value="First Name"/>
  <ui:param name="for" value="firstName"/>
</ui:decorate>
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="lastName" label="Last Name" value="#{bean.lastName}"/>
  <ui:param name="label" value="Last Name"/>
  <ui:param name="for" value="lastName"/>
</ui:decorate>
<!-- Many additional form elements -->
<!-- /WEB-INF/layout/form.xhtml -->
<ui:composition>
  <div class="formElement">
    <span class="formLabel">
      <h:outputLabel for="#{for}" label="#{label}">
    </span>
    <ui:insert/>
  </div>
</ui:composition>

Here we can see that each item on the form is contained within a <div> and form labels are wrapped in an additional <span>. There is already some repetition in the mark-up, with the “for” parameter mirroring the component ID. I have also given each <h:inputText> element a label attribute
for better validation error messages, this is repeated in the “label” <ui:param>. Things start getting worse if we want to mark required fields with an asterisk:

<!-- /WEB-INF/pages/entername.xhtml -->
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="firstName" label="First Name" value="#{bean.firstName}" required="false"/>
  <ui:param name="label" value="First Name"/>
  <ui:param name="for" value="firstName"/>
  <ui:param name="showAsterisk" value="false"/>
</ui:decorate>
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="lastName" label="Last Name" value="#{bean.lastName}" required="true"/>
  <ui:param name="label" value="Last Name"/>
  <ui:param name="for" value="lastName"/>
  <ui:param name="showAsterisk" value="true"/>
</ui:decorate>
<!-- Many additional form elements -->
<!-- /WEB-INF/layout/form.xhtml -->
<ui:composition>
  <div class="formElement">
    <span class="formLabel">
      <h:outputLabel for="#{for}" label="#{label}#{showAsterisk ? ' *' : ''}">
    </span>
    <ui:insert/>
  </div>
</ui:composition>

It’s pretty frustrating that we need to pass <ui:param> items that duplicate attributes already specified on the <h:inputText>. It is easy to see how, even for relatively small forms, we are going to end up with a lot of duplication in our mark-up. What we need is a way to get information about the inserted component inside the template, even though we don’t know what type of component it will be. What we need is <s:componentInfo>.

The <s:componentInfo> component exposes a variable containing information about the inserted component. This information includes the label, the component clientID and if the component is required. By inspecting the inserted item we can remove a lot of duplication:

<!-- /WEB-INF/pages/entername.xhtml -->
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="firstName" label="First Name" value="#{bean.firstName}" required="false"/>
</ui:decorate>
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="lastName" label="Last Name" value="#{bean.lastName}" required="true"/>
</ui:decorate>
<!-- Many additional form elements -->
<!-- /WEB-INF/layout/form.xhtml -->
<ui:composition>
  <s:componentInfo var="info">
    <div class="formElement">
      <span class="#{info.valid ? 'formLabel' : 'formErrorLabel'}">
        <h:outputLabel for="#{info.for}" label="#{info.label}#{info.required ? ' *' : ''}">
      </span>
      <ui:insert/>
    </div>
  </s:componentInfo>
</ui:composition>

Something else that we can now do is tell if the inserted component has failed validation. Notice that the example above will pick the “formErrorLabel” CSS class for components that are not valid.

One interesting feature of having the new <s:componentInfo> component is that all the <ui:decorate> tags become identical. We have removed all the repetition inside the tag, but the tag itself is still repeated many times. Here we have one more trick that can help by introducing a new <s:decorateAll> tag. Using <s:decorateAll> allows use to apply a template once for every child component. Here is the updated form mark-up:

<!-- /WEB-INF/pages/entername.xhtml -->
<s:decoreateAll template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="firstName" label="First Name" value="#{bean.firstName}" required="false"/>
  <h:inputText id="lastName" label="Last Name" value="#{bean.lastName}" required="true"/>
  <!-- Many additional form elements -->
</s:decorateAll>
<!-- /WEB-INF/layout/form.xhtml -->
<ui:composition>
  <s:componentInfo var="info">
    <div class="formElement">
      <span class="#{info.valid ? 'formLabel' : 'formErrorLabel'}">
        <h:outputLabel for="#{info.for}" label="#{info.label}#{info.required ? ' *' : ''}">
      </span>
      <ui:insert/>
    </div>
  </s:componentInfo>
</ui:composition>

If you want to look at the source code for these components check out the org.springframework.springfaces.template.ui package on springfaces GitHub project.

Reference: Integrating Spring & JavaServer Faces : Improved Templating from our JCG partner Phillip Webb at the Phil Webb’s blog.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

Leave a Reply


9 + nine =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close