在 JSF2 h:inputText 组件中使用引导相关的标签答案

【问题标题】：Using bootstrap related tags inside JSF2 h:inputText component在 JSF2 h:inputText 组件中使用引导相关的标签
【发布时间】：2013-02-02 10:44:19
【问题描述】：

有没有在 JSF2 组件中使用 bootstrap 相关的标签？例如，我对使用需要类似

的 bootstrap typeahead 功能感兴趣

<h:inputText id="typeahead" type="text" data-provide="typeahead"></h:inputText>

但由于data-provide 不存在h:inputText，因此它被剥离，因此预输入功能显然不起作用。

【问题讨论】：

标签： jsf-2 twitter-bootstrap

【解决方案1】：

取决于您使用的 JSF 版本。

在 JSF 2.0/2.1 中，无法指定其他属性。 JSF HTML 渲染器只会渲染预定义的属性。您需要创建一个自定义渲染器来完成所需的工作。为了最大限度地减少样板代码，您必须扩展特定于实现的渲染器。目前还不清楚您使用的是哪一个，所以这里只是一个针对 Mojarra 的示例：

import com.sun.faces.renderkit.html_basic.TextRenderer;

public class MyTextRenderer extends TextRenderer {

    @Override
    protected void getEndTextToRender(FacesContext context, UIComponent component, String currentValue) throws IOException {
        Object dataProvide = component.getAttributes().get("data-provide");

        if (dataProvide != null) {
            context.getResponseWriter().writeAttribute("data-provide", dataProvide, null);
        }

        super.getEndTextToRender(context, component, currentValue);
    }

}

在faces-config.xml注册如下，让它运行：

<render-kit>
    <renderer>
        <component-family>javax.faces.Input</component-family>
        <renderer-type>javax.faces.Text</renderer-type>
        <renderer-class>com.example.MyTextRenderer</renderer-class>
    </renderer>
</render-kit>

在 JSF 2.2 中，可以通过新的 passthrough 命名空间或 <f:passThroughAttribute> 标记来实现。另见What's new in JSF 2.2? - HTML5 Pass-through attributes。

所以，所以：

<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputText id="typeahead" a:data-provide="typeahead" />

（注意type 属性已经默认为text）

或者：

<h:inputText id="typeahead">
    <f:passThroughAttribute name="data-provide" value="typeahead" />
</h:inputText>

另见：

Custom HTML tag attributes are not rendered by JSF

【讨论】：

我使用的是 mojarra 2.2.4，但它没有 <f:passThroughAttribute />。是我的 mojarra 库中的问题还是需要更多配置。谢谢。