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.
Next: More Modular User Interface Code >>
More Java Articles
More By O'Reilly Media
|
 This article is excerpted from chapter one of the book JavaServer Faces, written by Hans Bergsten (O'Reilly, 2004; ISBN: 0596005393). Check it out at your favorite bookstore today. Buy this book now.
|
|
