JSF Best Practice: Custom Components and JavaScript

Question

I am developing a JSF Custom Component, using the information I found on the following book Pro JSF and HTML5 by Apress.

So far, I successfully developed:

Answer 1

If you want your components to be reusable, I encourage you to pack everything in an independent jar. If using Servlet 3.0, you'll be able to easily access the web resources putting them in META-INF/resources. Provide the jar a faces-config.xml and you'll make it JSF annotation scannable:

components
    \-(Your cource code)
META-INF 
    \-faces-config.xml
    \-resources (This ends up in docroot)
        \-resources
            \-js (Here they go your js files)
            \-comp (Here your composite components)
            \-css (Here your css)

Later on, you'll have to take care of avoiding the specific ids in your composites, as JSF modifies them while rendering. Your best is to pass the current component reference to your JS functions:

<h:inputText styleClass="myInputStyle" onclick="showInputText(this)" />

Just refer to included CSS styles and JS functions.

Last but not least, be careful when including the jar as a web resource, if the file paths remain in conflict with the ones in your web app, they won't be included.

See also:

• Exposing resources from jar files in web applications (Tomcat7)
• How to reference JSF managed beans which are provided in a JAR file?
• How can I know the id of a JSF component so I can use in Javascript

Answer 2

You can include into the facelets wich uses your component an external javascript file by adding the following code:

    <script src="#{request.contextPath}/jspath/yourjs.js"></script>

Within the component when you generate the XHTML output give an Id to your menu entries e.g.

    <h:outputText id="myid" value="#{bean.value}"/>

and in yourjs.js

    $(document).ready(function() {

    $("#myid").click(function(){
    // dostuff
    });
    });