Seam Recipes [Part 1]: s:decorate

Introduction

As a developer, forms are one of my biggest grievances whenever I am building a Web application. Why? Well, for one, there is nothing pretty about creating a form. Even the best Web designers, with all of their fancy CSS wizardy, struggle to build clean, consistent, and reusable form layers that can be used anywhere within an application. To complicate matters, nothing in the HTML 4 spec (though, this will change with HTML 5) provide any sort of functionality around form elements.

Enter Seam, or, more specifically, Seam’s extended decorate component. As I will show you in this first Seam recipe, Java Server Faces (JSF) and Seam Decorate can be used to provide a small, reusable, and extremely versatile component that makes building complicated Web forms a snap. Now, I won’t go into details about how to build a new Seam project. But I will show you how I have leveraged Seam’s functionality to suit my needs. Let’s begin.

Part 1 – Creating a Simple s:decorate Facelet

Out of the box, s:decorate provides JSF form validation and formatting for messages. It also creates a targetable area for reRenders, which are especially helpful when creating AJAX applications using RichFaces. Through EL, Seam Decorate also understands the “required” attribute on your input components and can render both a visual element to your form in addition to automatic binding to your “messages” component.

Here is an example of a simple s:decorate, as often used within Seam’s own documentation.
exit.xhtml

	
		*

myEditForm.xhtml

	Last Name:
	

Easy, right?

Part 2 – Extending the Facelet with Additional Layouts

As forms go, there is not just one mode to handle all situations. Some forms are mixtures of editable fields, disabled fields, and even just outputted text. To handle this problem, I created four distinct layouts (facelets) to handle different situations:

• edit.xhtml, as previously seen
• view.xhtml
• simpleEdit.xhtml
• simpleView.xhtml

Now, I can create a form quickly and easily for both modes. When I want to output text in the familiar form layout, I just use the “vew” layout versus the “edit” layout. The “view” layout removes the s:label component and remove messages for error validation.

“simpleView” differs from “view.xhtml” only in the layout of the form element; it suits my needs particularly well for textareas or other large components, where I want the label to appear above the input area.

view.xhtml

myViewForm.xhtml

	Last Name:
	

Part 3 – Adding Custom Functionality

Something a lot of users like to have, and clients like talk about, are tool tips. Let’s add tool tip support our s:decorate components using the wz_tooltip Javascript library. You can choose any tool tip library that you would like; the s:decorate example below will support just about anything you throw at it. Because not all form elements will need a tool tip, we will control its presentation based on UI parameters. For the tool tip, we will simply print a [?] next to the input label. But I’ve also used this layout to print images and use more advanced tool tip engines, like Prototip2.

edit.xhtml

	
		*



[?]

We’ll apply the tool tip, when needed, by specifying the “id” of the tool tip, the title, and body of the text, as below. Here I also use our application’s resource bundle to grab the title and body of the tool tip.

myForm.xhtml

SSN:
	
	
	
	

Step 4 – Further Enhancements

At this point, I hope you have gotten some good ideas for how you can use the Seam Decorate component to easily reuse a flexible form component. It is easy to see how one would extend the component by adding such parameters as “reRender”, or “disabled”, to further control the appearance and functionality of the elements on your form.