JSF Best Practices: Custom Components and JavaScript

Question

I am developing a custom JSF component using the information I found in the next book by Pro JSF and HTML5 from Apress .

So far, I have successfully developed:

• java class to get the data that will be displayed in the component
• java component class
• java rendering class
• taglib file
• example page for displaying taglib

Everything works fine, the component completed successfully.

Now I would like to add javascript events and behavior to the rendered elements, more specifically, the goal of my custom component is to display the menu on the web page, and I would like to declare a dropdown effect to enter the menu, I know how to encode all this in JavaScript what i don't know:

What is the best practice for adding javascript events and behavior to an element displayed in a custom component?

Where should the JS files be located? How to associate events with elements? Is this done in the rendering class or after it on web pages?

Thank you, I am ready to provide more specific information about my code, if necessary.

---

Java Component Class

Note. The CosmoMenu class is just a bean. It basically saves the menu tree (label, identifier, and a set of child elements, 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

, , . Servlet 3.0, -, META-INF/resources. faces-config.xml, JSF :

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)

, , JSF . JS-:

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

CSS JS.

, : , -, , -, .

. :

• jar - (Tomcat7)
• JSF beans, JAR ?
• JSF, Javascript

Answer 2

facelets, javascript , :

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

, XHTML, Id , .

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

yourjs.js

    $(document).ready(function() {

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