Using Seam s:validateEquality to compare two fields for equality

I sometimes forget about some of the built in Seam Converters and Validators. While working on a project recently I had a requirement that had two password fields. This was to ensure that the password was spelled correctly. Pretty standard stuff when registering a new user. When I got to this requirement I started to roll my own validator and then remembered Seam had already done this for me. Here is the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<s:decorate id="passwordField" template="layout/new.xhtml">
  <ui:define name="label">Password:</ui:define>
  <h:inputSecret id="password" value="#{user.password}" required="true" immediate="true" redisplay="true">
    <a:support event="onblur" bypassUpdates="true" ajaxSingle="true" reRender="passwordField"/>
 </h:inputSecret>
</s:decorate>
 
<s:decorate id="verifyPasswordField" template="layout/new.xhtml">
  <ui:define name="label">Verify Password:</ui:define>
  <h:inputSecret id="verifyPassword" value="#{register.verifyPassword}" required="true" redisplay="true">
    <a:support event="onblur" bypassUpdates="true" ajaxSingle="true" reRender="verifyPasswordField"/>
    <s:validateEquality for=":#{rich:clientId('password')}" message="Passwords don't match." />
  </h:inputSecret>
</s:decorate>

That is all there is to it. Pretty slick. Now when the user tabs or clicks out of the Verify Password field the two fields are compared for equality and if they aren’t equal a validation error is displayed so the user can be made aware that there was a spelling mistake.

One thing to keep in mind is that there is a bug in this validator and the way it finds the id. In the Seam documentation example it shows the following.

1
<s:validateEquality for ="password"/>

When I tried this it didn’t work.

After some digging around in the Seam forums I found a post explaining that this was a bug and needed to be changed to the following.

1
<s:validateEquality for=":#{rich:clientId('password')}/>

.
The s:validateEquality can not only check for equality but it can also check for not equal, greater than, greater than or equal to, less than, and less than or equal to. Check out the Seam documentation for the complete listing of attributes.



a:mediaOutput is not compatible with a Seam long running conversation

Over the weekend I was working on a Seam project that required images to be uploaded so I took a look at the rich:fileUpload component. Looking at the RichFaces sample code it looked very straightforward and I assumed it would take just a couple of hours to implement. 2 days later I still couldn’t get it to work. I was so frustrated that I started questioning my intelligence. Fortunately I am stubborn, just ask my wife, and I refused to give up. This time it paid off. I finally found out via the Seam framework forums that the a:mediaOutput RichFaces component is not compatible with Seam long running conversations. The file was uploading fine and the listener method could see the object but when it came time for a:mediaOutput to paint the object to the screen it could not be found.

The solution was to simply add an s:conversationID component to a:mediaOutput so that Seam would know the conversation id. Once I added this everything worked fine. UGH! Below is an example.

1
2
3
4
5
6
<a4j:mediaOutput element="img" mimeType="#{file.mime}"
 createContent="#{fileUploadBean.paint}" value="#{row}"
 style="width:100px; height:100px;" cacheable="false">
  <f:param value="#{fileUploadBean.timeStamp}" name="time"/>  
  <s:conversationId value="#{conversation.id}"/>
</a4j:mediaOutput>

These are the kind of things that drive me crazy when programming. Things like this can totally blow a schedule out of the water.



Using jQuery with Seam

If you are using RichFaces with your Seam application then jQuery is already there and ready to use. The only thing to remember is to use jQuery() function to refer to jQuery rather than using $(). $() is used to refer to prototype.js functions which RichFaces uses heavily.

Below is an example you can use to test jQuery. This should pop up a box on your page.

1
2
3
4
5
<script type="text/javascript" >
  jQuery(document).ready(function() {
      alert("hello seam: " + jQuery(window).height());
  });
</script >

For more information on jQuery and RichFaces check out the RichFaces Live Demo page.



Next