How to let JSF pass through HTML attributes

JSF by design ignores all custom attributes when rendering HTML.

If you're already on JSF 2.2+, simply specify it as passthrough attribute:

<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<p:autoComplete a:x-webkit-speech="x-webkit-speech" ... />

If you're not on JSF 2.2 yet, then you need a custom renderer. This is in case of PrimeFaces <p:autoComplete> (and all other components) fortunately relatively simple. It's sufficient to override just the renderPassThruAttributes() method wherein you add the new attribute which you'd like to render to the attrs argument and finally delegate to the super method.

E.g.

package com.example;

import java.io.IOException;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;

import org.primefaces.component.autocomplete.AutoCompleteRenderer;

public class MyAutoCompleteRenderer extends AutoCompleteRenderer {

    @Override
    protected void renderPassThruAttributes(FacesContext facesContext, UIComponent component, String[] attrs) throws IOException {
        String[] newAttrs = new String[attrs.length + 1];
        System.arraycopy(attrs, 0, newAttrs, 0, attrs.length);
        newAttrs[attrs.length] = "x-webkit-speech";
        super.renderPassThruAttributes(facesContext, component, newAttrs);
    }

}

To get it to run, register it as follows in your webapp's faces-config.xml:

<render-kit>
    <renderer>
        <component-family>org.primefaces.component</component-family>
        <renderer-type>org.primefaces.component.AutoCompleteRenderer</renderer-type>
        <renderer-class>com.example.MyAutoCompleteRenderer</renderer-class>
    </renderer>
</render-kit>

(you can find out the component family and renderer type by looking at the source code of AutoComplete class, they're specified as COMPONENT_FAMILY and RENDERER_TYPE constants in there)

No, the @FacesRenderer annotation simply won't work when the purpose is to override custom renderers which are by itselves already registered in a faces-config.xml.

Tags:

Html

Jsf

Jsf 2

Primefaces

Servlet 3.0

Recent Posts