Home arrow Java arrow Page 2 - Introducing JavaServer Faces
JAVA

Introducing JavaServer Faces


JavaServer Faces (JSF) simplifies the development of web application user interfaces, allowing Java programmers to develop the application backend without worrying about a lot of details. This article offers a brief introduction to the technology. It is excerpted from chapter one of the book JavaServer Faces, written by Hans Bergsten (O'Reilly, 2004; ISBN: 0596005393).

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
October 06, 2005
TABLE OF CONTENTS:
  1. · Introducing JavaServer Faces
  2. · How Does JSF Compare to Traditional Technologies?
  3. · More Modular User Interface Code
  4. · Where Does JSF Fit in the Big Picture?
  5. · What You Need to Get Started

print this article
SEARCH DEVARTICLES

Introducing JavaServer Faces - How Does JSF Compare to Traditional Technologies?
(Page 2 of 5 )

 

JSF brings a component-based model to web application development that is similar to the model that's been used in standalone GUI applications for years. Let's look at some of the advantages this gives you compared to more traditional web application technologies.

Less Code in the User Interface Templates

Java web applications user interfaces have typically been implemented as a set of JSP pages (or pages for similar template-engine technologies, such as Velocity or FreeMarker), where static content (e.g., text and HTML elements for layout) is mixed with elements that generate dynamic content when the page is processed. A problem with this approach is that the pages often end up with logic for maintaining the user interface state--for instance, code for marking checkboxes and list items as selected and for displaying current values in input fields.

When you use JSF with JSP as the presentation layer technology, special elements (JSP custom actions) represent the JSF components. Here's a snippet of a page with a form showing a users food preferences as a set of HTML checkboxes:

...
<h:form>
  <table>
  ...
    <tr>
      <td>Favorite Foods:</td>
      <td>
       <h:selectManyCheckbox value="#
          {cust.foodSelections}">
         <f:selectItem itemValue="z"
          itemLabel="Pizza" />
         <f:selectItem itemValue="p"
          itemLabel="Pasta" />
         <f:selectItem itemValue="c"
          itemLabel="Chinese" />
       </h:selectManyCheckbox>
      </td> 
 
    </tr>
  ...
  </table>
</h:form>
...

The details are not important at this stage, but note that there are no loops or conditional tests in the page. This logic is instead encapsulated in the JSF components represented by the<h:selectManyCheckbox>and<f:selectItem>elements. When the form is submitted, the JSF framework saves the list of current selections in an application object on the server (referenced by the#{cust.foodSelection}expression specified by thevalueattribute in this example). When the response is rendered, JSF uses the list to check off the corresponding boxes. Separating logic from the layout in this manner makes the page authors life easier.

With JSP as the presentation layer, the page author must still learn how to use the special JSF elements, and many standard page development tools don't know how to deal with them. As I mentioned earlier, JSF supports presentation layer technologies other than JSP. No alternative is fully described by the specification, but one can be implemented on top of the JSF API by third parties or in-house staff. Such a presentation layer may allow you to use just plain markup elements (e.g., HTML) in the templates instead. Anyone familiar with the markup language can then develop the user interface look and feel using standard tools, while Java programmers create JSF components that take care of the dynamic parts of the page:

...
<form action="validate_jstl.jsp"
method="post">
  <table>
  ...
    <tr>
      <td>Favorite Foods:</td>
      <td>
        <inputid="pizza"type="checkbox"
name="food" value="z">Pizza<br>
        <inputid="pasta"type="checkbox"
name="food" value="p">Pasta<br>

        <inputid="chinese"type="checkbox"
name="food" value="c">Chinese<br>
      </td>
    </tr>
    ...
  </table>
</form>
...

The only thing that's a bit out of the ordinary here is theidattribute for the elements representing dynamic content. An identifier like this is typically needed by the custom presentation layer to tie JSF components to the elements in the template, so the components know which element to modify. Well look at a custom presentation layer implementation that uses this approach at the end of this book.

Even for such a simple example (a page with a few checkboxes), both of these sample pages are a lot simpler to develop and maintain than a traditional JSP page with the same functionality. Here's a typical plain JSP page version of this example:

...
<form action="validate_jstl.jsp"
method="post">
  <table>
  ...
  <c:forEach
items="${paramValues.food}"
var="current">
    <c:choose>
      <c:when test="${current ==
'z'}">
        <c:set var="pizzaSelected"
value="true" /
>
      </c:when>
      <c:when test="${current ==
'p'}">
        <c:set var="pastaSelected"
value="true" />
      </c:when>
      <c:when test="${current ==
'c'}">
        <c:set var="chineseSelected"
value="true" />
        </c:when>
      </c:choose>
    </c:forEach>
     <tr>
       <td>Favorite Foods:</td>
       <td>
         <input type="checkbox"
name="food" value="z"
        
${pizzaSelected ?
'checked'
: ''}>Pizza<br>
         <input type="checkbox"
name="food" value="p"
         
${pastaSelected ?
'checked'
: ''}>Pasta<br>
         <input type="checkbox"
name="food" value="c"
         ${chineseSelected ?
'checked' : ''}>
Chinese
      </td>
    </tr>
    ...
  <
/table>
</form>
...
 

If youre not familiar with JSP and the JSP Standard Tag Library (JSTL), dont worry about the details. The main thing to note is that this page contains a lot of code (in the form of XML-like JSP action elements and Expression Language expressions, but its still code) in addition to the HTML elements. It first loops through all values received through a request parameter namedfoodand sets flags when it finds values it recognizes. It then uses these flags to decide whether to add acheckedattribute for the corresponding checkbox elements it generates. Thats quite a mouthful (pun intended) for something as simple as handling food choices. Imagine the amount of code needed in a page that displays all kinds of dynamic state, such as the one in Figure 1-1.


Figure 1-1.  A complex web application user interface

This is the main screen for the sample application we'll develop in this book. It contains numerous buttons that are enabled or disabled depending on who's logged in and the business object status, plus scrollable and sortable tables and input fields that keep their previous values between requests. The application must also distinguish between different types of requests, triggered by clicking different buttons and links. For an application like that, JSF really shines.


blog comments powered by Disqus
JAVA ARTICLES

- Java Too Insecure, Says Microsoft Researcher
- Google Beats Oracle in Java Ruling
- Deploying Multiple Java Applets as One
- Deploying Java Applets
- Understanding Deployment Frameworks
- Database Programming in Java Using JDBC
- Extension Interfaces and SAX
- Entities, Handlers and SAX
- Advanced SAX
- Conversions and Java Print Streams
- Formatters and Java Print Streams
- Java Print Streams
- Wildcards, Arrays, and Generics in Java
- Wildcards and Generic Methods in Java
- Finishing the Project: Java Web Development ...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials