JSF最佳实践：自定义组件和JavaScript [英] JSF Best Practice: Custom Components and JavaScript
问题描述
我正在开发一个JSF自定义组件，使用我在以下书中找到的信息 Apress的Pro JSF和HTML5 。
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:
- java class以获取要在组件中呈现的数据
- java组件类
- java渲染器类
- taglib文件
- 呈现taglib的示例页面
- 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.
现在我想将javascript事件和行为添加到呈现的元素，更具体地说，目的是我的自定义组件是在网页上呈现菜单，我想在菜单条目中添加下拉效果。我知道如何编写整个代码，在JavaScript中，我不知道的是：
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:
添加javascript事件和行为的最佳做法是什么在自定义组件中呈现的元素？
JS文件应该放在哪里？如何将事件绑定到元素？是在渲染类中完成，还是在网页上完成？
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组件类
注意： 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;
}
}
推荐答案
如果你希望你的组件可以重复使用，我鼓励你把所有东西都装在一个独立的罐子里。如果使用Servlet 3.0，您将能够轻松访问将它们放入 META-INF / resources 的Web资源。为jar提供一个 faces-config.xml ，你将使JSF注释可扫描：
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)
稍后，你必须注意避免特定的id你的复合，因为JSF在渲染时修改它们。最好的方法是将当前组件引用传递给JS函数：
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)" />
只需参考包含的CSS样式和JS函数。
Just refer to included CSS styles and JS functions.
最后但并非最不重要的一点是，将jar包含为Web资源时要小心，如果文件路径与Web应用程序中的文件路径保持冲突，则不会包含它们。
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.
另见：
- 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
这篇关于JSF最佳实践：自定义组件和JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
