Unobstrusive JSF

In general, standard JSF components and third party component libraries do not follow the unobstrusive  javascript pattern and embed dom events within the event attributes. So for a simple component like;

 <h:commandbutton id="btn" value=”Submit” onclick=”alert(‘Barca’)” />

The rendered html would be something like this;

<input type=”submit” name=”btn” id="btn" onclick=”alert(‘Barca’)”  value=”Submit”/>

I’m really a fan unobstrusive javascript way which enables clean seperation of markup from the behavior.

If you check out PrimeFaces, you’ll see that most of the components have seperate markup and seperate script, so it leads to a clean design since output is not bloated.

Similary for a PrimeFaces button;

<p:button id="btn" value=”Submit” onclick=”alert(‘Barca’)” />

PrimeFaces generates;


<button type=”submit” value=”Submit” id=”btn” name=”btn”/>
<script type="text/javascript">
 PrimeFaces.util.addListener(“btn”,”click”, function(e) { alert(‘Barca’); });
</script>

Unobstrusive javascript rendering is one of the design principles of PrimeFaces to keep things clean. Actually being simple and clean is the main idea of PrimeFaces, that’s why PrimeFaces has no extended filter, viewhandler, statemanager, viewroot and other extended JSF artifacts. Just one simple phaselistener.

7 Responses to Unobstrusive JSF

  1. Using a sorta registry for all these kind of things makes sense. Now I wonder if you library is that smart that all the JS calls are chained at the very on of the page ? Or if there are several script-tags overall within the page. in ADF Faces we have all the init callbacks for our client-side-components at the very end of the page

  2. I hope the the registry you mentioned is not something like the ibm’s hx:scriptCollector component which is a bad idea. Registry sounds fine actually but the problem is after a partial updating the markup, related scripts need to be re-evaluated. If you also handle that, then registry sounds fine actually but not sure if it’ll cause compatibility problems with PrimeFaces and other libs.

  3. Adrian Mitev says:

    BTW what will happen if you try to refresh the button by id using ajax? How do you know which to refresh?

  4. Adrian Mitev says:

    I mean “how do you know which script tag to refresh.

  5. If the partially updated response contains script tags we evaluate them as well. Otherwise we’ll lose the behavior as you may guess.

  6. matthiaswessendorf says:

    regarding registry: I meant your thing:
    PrimeFaces.util.addListener(

    we render a “big” JS script at the end to “inject” the required JS to the client-components.

    on ajax-response, we send all the JS (that is needed) in a script-tag, which is executed by the user_agent (browser), via our client-library;

  7. Chris says:

    Agreed, the sometimes pretty retarded use of Javascript is one of the things that annoys me most in JSF.

    I just hope stuff like that will finally be fixed in v2.

%d bloggers like this: