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:

• the java class to obtain the data to be rendered in the component
• the java component class
• the java renderer class
• the taglib file
• an example page to render the taglib

Everything is working fine, the component is successfully rendered.

Now I would like to add javascript events and behaviour to the rendered elements, more specifically, the purpose of my custom component is to render a menu on a web page, and I would like to ad a dropdown effects to the menu entry. I know how to code the whole thing, in JavaScript, what I don't know is:

What is the best practice to add javascript events and behaviour to the element rendered within a custom component?

Where should the JS files be placed? How do I bind the events to the elements? Is it done in the render class, or after, on the web pages?

Thanks, I'm willing to provide more specific information about my code, if required.

---

Java Component Class

Note: The CosmoMenu class is just a bean. It basically stores a menu tree (a label, an id and a set of children, if any).

package components;

import com.google.gson.Gson;
import com.google.gson.JsonElement;
import com.google.gson.JsonParser;
import domain.CosmoMenu;
import javax.faces.component.FacesComponent;
import javax.faces.component.UIComponentBase;


@FacesComponent(CosmoMenuComponent.COMPONENT_TYPE)
public class CosmoMenuComponent extends UIComponentBase{

  /** Component family of {@link CosmoMenuComponent}.        */
  public static final String COMPONENT_FAMILY = "CosmoMenu";

  /** Component type of {@link CosmoMenuComponent}.          */ 
  public static final String COMPONENT_TYPE = "CosmoMenu";    

  @Override
  public String getFamily(){
      return CosmoMenuComponent.COMPONENT_FAMILY;
  }


  private CosmoMenu theMenu;    

  public CosmoMenu getMenu(){

      Gson gson = new Gson();
      JsonParser jsonParser = new JsonParser();
      CosmoMenuAPI myApi = new CosmoMenuAPI();

      String strMenu = myApi.getMenu();
      JsonElement jEl = jsonParser.parse(strMenu);

      theMenu = gson.fromJson(jEl, CosmoMenu.class);
      return theMenu;      
  }
}

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
    });
    });