Question

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

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

用于获取要在组件中呈现的数据的java类
java组件类
java渲染器类
taglib文件
呈现taglib的示例页面

一切正常，组件成功呈现。

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

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

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

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

Java组件类

注意： 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;      
  }
}

Answer 1

如果您希望您的组件可以重复使用，我建议您将所有组件包装在一个独立的罐子里。如果使用Servlet 3.0，您将能够轻松访问将它们放入 META-INF / resources 的Web资源。为jar提供一个 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)

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

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

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

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

另见：

Answer 2

您可以通过添加以下代码，将包含外部javascript文件的组件包含在facelets中：

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

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

2 个答案: