In JSF, what would be the "right" and "clean" way to integrate JavaScript i.e. into a posite-penent? I am a fan of Unobtrusive JavaScript, and separating HTML from JS from CSS. What would be a good way to have as little quirks as possible? This is what I like the best so far:

<posite:interface>
  // ...
</posite:interface>

<posite:implementation>
  // ...
  <script> initSomething('#{cc.clientId}'); </script>
</posite:implementation>    

What I don't like is, to use language A to generate language B. Basically the same goes for event handlers and stuff. My favorite would be to attach those handlers via <insert favorite DOM JavaScript library here>. Is this possible? How do you do this kind of integration?

In JSF, what would be the "right" and "clean" way to integrate JavaScript i.e. into a posite-penent? I am a fan of Unobtrusive JavaScript, and separating HTML from JS from CSS. What would be a good way to have as little quirks as possible? This is what I like the best so far:

<posite:interface>
  // ...
</posite:interface>

<posite:implementation>
  // ...
  <script> initSomething('#{cc.clientId}'); </script>
</posite:implementation>    

What I don't like is, to use language A to generate language B. Basically the same goes for event handlers and stuff. My favorite would be to attach those handlers via <insert favorite DOM JavaScript library here>. Is this possible? How do you do this kind of integration?

• javascript
• jsf
• integration
• posite-ponent

• I'm not sure if I understand your concrete problem/question. You can just use for example jQuery. Popular JSF ponent libraries such as PrimeFaces and RichFaces also use jQuery under the covers. – BalusC Commented Sep 27, 2012 at 10:47
• 1 Yes, of course. But somehow I have to retrieve a reference to that DOM element. Using an ID would be the only way to make sure it is unique (thats what an ID is for, after all). Now I don't want to generate some piece of JavaScript, but how do I get a DOM node then? – Bruno Schäpper Commented Sep 27, 2012 at 17:22

1 Answer 1

I'd say that what you've there is the best you can get, provided that you're absolutely positive that the HTML element's nature is so unique that you absolutely need to select it by an ID, every time again.

If the HTML representation is not that unique (I can imagine that a Facelets template or include file might contain application-wide unique HTML elements like header, menu, footer, etc, but a posite ponent which can be reused multiple times in a single view? I can't for life imagine that), then you could also consider using an unique classname and hook initialization on it.

E.g. /resources/posites/yourComposite.xhtml

<cc:implementation>
    <h:outputScript library="posites" name="yourComposite.js" target="head" />
    <div id="#{cc.clientId}" class="your-posite">
        ...
    </div>
</cc:implementation>

with in the /resources/posites/yourComposite.js (assuming that you're using jQuery)

var $yourComposites = $(".your-posite");
// ...

You can if necessary extract the autogenerated HTML element ID for each of them in a jQuery.each():

$yourComposites.each(function(index, yourComposite) {
    var id = yourComposite.id;
    // ...
});