Using bootstrap related tags inside JSF2 h:inputText component

前端未结

关注

 1  1030

Is there anyway to use bootstrap related tags in JSF2 components? For example I\'m interested in using the bootstrap typeahead feature which requires something like

相关标签:

1条回答

情话喂你

2020-12-12 03:46

Depends on JSF version you're using.

In JSF 2.0/2.1, it's not possible to specify additional attributes. The JSF HTML renderers will only render predefined attributes. You'd need to create a custom renderer to achieve the desired job. To minimize boilerplate code, you're forced to extend the implementation-specific renderer. It's unclear which one you're using, so here's just a Mojarra targeted example:

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

}

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

In JSF 2.2, it's possible by the new passthrough namespace or the <f:passThroughAttribute> tag. See also What's new in JSF 2.2? - HTML5 Pass-through attributes.

Thus, so:

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

(note that the type attribute defaults to text already)

Or:

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

Using bootstrap related tags inside JSF2 h:inputText component

See also: