Javascript in JSF 2

DZone 's Guide to

Javascript in JSF 2

· Java Zone ·
Free Resource

In a lot of ways, working with JSF 2 is dreamy. It feels even better than RichFaces. I like the way, especially, the basic event/rerendering stuff is implemented. On the negative side, as usual, the documentation is anemic at best and a joke at worst. Which is really hard to excuse, given the fact that this release was in utero for something like half a decade. The only real explanation is that programming now, in the JEE world, is just done with Google. The hipsters think documentation is passé.

Frankly, this is a really good example of why this approach is such a poor one. Go do some searches on JSF 2 Ajax Javascript. What emerges, after a LOT of rooting around, is a fly‘s eye view of something that should be capable of being summarized in half a page. Actually, turning in one N/A after another would not be so bad if the things themselves were more intuitive. This is where a lot of the blame just cannot fall on the framework makers. It‘s not the JSF guys‘ fault that the web is still a patchwork of half-baked crap, from HTML to Javascript, http, etc. A lot of the JSF improvements make dealing with this stuff easier, but they don‘t do so through the introduction of abstractions or new framework extensions. Maybe there just are not ways to do that.

That said, if you are after the most basic ajax scenarios, there is a lot of good news in JSF. If you have any work to do in the Javascript (other than just ping ponging input in one control into updates of others, then the new is not quite so rosey.

Updating Bound Controls with Ajax

The simplest possible example here is an inputText component, and a label that shows how many letters have been typed. This is covered well here. Literally, just add the ajax tag, the event you want to hook (keyup for this one) and the fields to update and you are done.

There are a lot of variants here. You can move the tag up to a containing component and have it apply to the children, for instance.

Super simple, no complaints about this.

Manipulations in Javascript

This is where the picture becomes a bit more murky. Imagine you want to take each keystroke and get its keycode. The scenarios I imagined for this were the following:

  1. hook the event, but add a listener, then the listener could manipulate the event on the server side
  2. write some javascript and then submit that using an ajax call from Javascript

On the first option, the problem is that the event that is sent to the listener is not actually the event you are interested in, with the timestamps, keycode, etc. Instead, it‘s a Behavior event that JSF has that provides no real information.

The second option you can find a lot of super trivial examples and then you can keep returning to the documentation, which isn‘t merely flaccid, turgid, insipid.. it would make a fine entry either in an Obfuscation Jousting Competition, or if someone were willing to award a prize for a page of text the would convince anyone, even a mutli-decade Tibetan monk, that he/she was ADHD (see this here (the whole document is insane, but I linked to the request section, which is really special.. after about the fourth time, I had a beavis flashback: ‘Words, words, words… let‘s go break something..‘)).

Ultimately, for my case, I ended up just putting a hidden input in the form, doing my manipulations in Javascript, updating the field and fetching the results on submit. That was all I needed.

Again, sound like a broken record, but Glassfish was a total pleasure in doing this: publish cycles are a second or two and the Javascript refreshed properly every time, never had to restart the server. I could go back to Tomcat, but the preceding conditions at this point would include nuclear winter.


From http://www.jroller.com/robwilliams/entry/javascript_in_jsf_2


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}