JSF 最佳实践：自定义组件和 JavaScript

我正在开发一个 JSF 自定义组件，使用我在以下书中找到的信息Apress 的 Pro JSF 和 HTML5.

到目前为止，我成功开发了：

• java类获取组件中要渲染的数据
• java组件类
• java渲染器类
• 标签库文件
• 呈现 taglib 的示例页面

一切正常，组件已成功渲染。

Now 我想向渲染的元素添加 javascript 事件和行为更具体地说，我的自定义组件的目的是在网页上呈现菜单，我想向菜单条目添加下拉效果。我知道如何用 JavaScript 编写整个代码，但我不知道的是：

将 javascript 事件和行为添加到自定义组件中呈现的元素的最佳实践是什么？

JS文件应该放在哪里？如何将事件绑定到元素？它是在渲染类中完成的，还是之后在网页上完成的？

谢谢，如果需要，我愿意提供有关我的代码的更多具体信息。

Java组件类

Note: CosmoMenu 类只是一个 bean。它主要存储一个菜单树（一个标签、一个 ID 和一组子项，如果有的话）。

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

如果您希望您的组件可重用，我鼓励您将所有内容打包在一个独立的 jar 中。如果使用 Servlet 3.0，您将能够轻松访问将它们放入的 Web 资源META-INF/资源。提供罐子面孔配置.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)

稍后，您必须注意避免组合中的特定 id，因为 JSF 在渲染时会修改它们。最好的方法是将当前组件引用传递给 JS 函数：

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

只需参考包含的 CSS 样式和 JS 函数即可。

最后但并非最不重要的一点是，将 jar 包含为 Web 资源时要小心，如果文件路径与 Web 应用程序中的路径仍然冲突，则不会包含它们。

也可以看看：

• 在 Web 应用程序中公开 jar 文件中的资源 (Tomcat7)
• 如何引用 JAR 文件中提供的 JSF 托管 bean？
• 我怎样才能知道 JSF 组件的 id 以便在 Javascript 中使用