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

我正在使用下一本书中的信息开发一个JSF自定义组件

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

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

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

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

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

JS文件应该放在哪里？如何将事件绑定到元素？它是在render类中完成的，还是在web页面上完成的

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

---

Java组件类

注意：CosmoMenu类只是一个bean。它基本上存储一个菜单树（一个标签、一个id和一组子菜单，如果有的话）

---

如果您希望您的组件是可重用的，我建议您将所有内容打包在一个独立的jar中。如果使用Servlet3.0，您将能够轻松访问web资源，并将其放入META-INF/resources中。为jar提供一个faces-config.xml，您将使其JSF注释可扫描：

组件
\-（您的密码）
META-INF
\-faces-config.xml
\-资源（最终在docroot中）
\-资源
\-js（这里是您的js文件）
\-comp（这里是您的复合组件）
\-css（这里是您的css）

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

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

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

另请参见：

---

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

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

---

你可以发布你的组件吗？：）只需要了解如何生成示例。如果您也需要渲染器或其他任何东西，请告诉我。@Biker我使用的是自定义组件，而不是复合组件，我认为我不应该创建“comp”目录，对吗？关于JS事件：HTML的呈现是由java类执行的，而不是由xhtml页面（如在复合组件中）执行的。将JS事件附加到java呈现器类中的元素（由JS文件中的函数处理）是常见的（还是很好的做法？@INLEUTTABLE，此布局允许您决定如何实现组件。复合组件只是为它们的声明添加了一个xhtml视图层，所以如果您只想使用java代码，您可以这样做，因为使用复合组件可以实现的所有事情也可以使用自定义组件来完成。我推断您是在玩这个框架，因为使用自定义组件来实现这种行为对我来说是一种过火的行为，而且当JSF2.x可用时。这里有一些相关链接：@Biker谢谢你的帮助！如果可以的话，我希望你能在你的答案中添加另一个重要的（IMHO）细节。我知道我需要的每个JS资源都必须包含在我的页面中才能使用。我使用的是一个Java渲染器类，我想我必须在这个类中包含js资源，才能使用它。对吗？在renderer类（包括我的js资源）中执行写操作是否正确，比如“responseWriter.write”（@ineuttable you're welcome；-）我对自定义渲染器几乎没有经验，基本上我从来没有自己实现过。但是，是的，我认为你使用

responseWriter

的方式是正确的。关于你与动态菜单相关的语句，没有必要使用自定义渲染器+无facelet。这太过分了。使用复合，它们也可以是由自定义组件支持，可能有关联的facelet（视图）。您可以实现您想要的功能，只需在组件中为菜单设置一个结构，然后在视图中使用

ui:repeat

。顺便说一句，您想要做的事情已经完成。您是否想要DIY是另一回事；-）

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

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

    $(document).ready(function() {

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