Primeface inputNumber component’s styleClass on the input element


Making Primefaces inputNumber component set the attribute styleClass on the input element


Currently, in Primefaces extensions (version 4.0.0), the component inputNumber does not set the styleClass on the input element it generates. Instead, it seems to put that on the wrapping span. For some projects I have been working on, that was a problem because the CSS we had needed the specification of the classes on the input. This recipe will create a new renderer that extends from the original one to make sure that the style class is is put on the input element.

How to

First, we create the renderer class, overriding the method encodeOutput(), as follows (the encodeMarkup() was also overridden to remove the styleClass specified on the wrapping span):

package com.linkare.myproject.web.renderer;


import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;

import org.apache.commons.lang3.StringUtils;
import org.primefaces.component.inputtext.InputText;
import org.primefaces.extensions.component.inputnumber.InputNumber;
import org.primefaces.extensions.component.inputnumber.InputNumberRenderer;
import org.primefaces.util.HTML;

 * @author Paulo Zenida - Linkare TI
public class MyInputNumberRenderer extends InputNumberRenderer {

protected void encodeMarkup(final FacesContext context, final InputNumber inputNumber) throws IOException {
	ResponseWriter writer = context.getResponseWriter();
	String clientId = inputNumber.getClientId(context);

	// Linkare - do not set style class on the wrapping span
	String styleClass = InputNumber.INPUTNUMBER_CLASS;

	writer.startElement("span", null);
	writer.writeAttribute("id", clientId, null);
	writer.writeAttribute("class", styleClass, "styleClass");

	if (inputNumber.getStyle() != null) {
	    writer.writeAttribute("style", inputNumber.getStyle(), "style");

	encodeOutput(context, inputNumber, clientId);
	encodeInput(context, inputNumber, clientId);


    protected void encodeOutput(final FacesContext context, final InputNumber inputNumber, final String clientId) throws IOException {
	ResponseWriter writer = context.getResponseWriter();
	String inputId = clientId + "_input";

	String defaultClass = InputText.STYLE_CLASS + " pe-inputNumber";
	// check if there are any style class in the inputNumber component and uses them, if that is so
	defaultClass = StringUtils.isBlank(inputNumber.getStyleClass()) ? defaultClass : defaultClass + " " + inputNumber.getStyleClass();
	defaultClass = inputNumber.isValid() ? defaultClass : defaultClass + " ui-state-error";
	defaultClass = !inputNumber.isDisabled() ? defaultClass : defaultClass + " ui-state-disabled";

	writer.startElement("input", null);
	writer.writeAttribute("id", inputId, null);
	writer.writeAttribute("name", inputId, null);
	writer.writeAttribute("type", inputNumber.getType(), null);

	renderPassThruAttributes(context, inputNumber, HTML.INPUT_TEXT_ATTRS_WITHOUT_EVENTS);
	renderDomEvents(context, inputNumber, HTML.INPUT_TEXT_EVENTS);

	if (inputNumber.isReadonly()) {
	    writer.writeAttribute("readonly", "readonly", "readonly");
	if (inputNumber.isDisabled()) {
	    writer.writeAttribute("disabled", "disabled", "disabled");

	writer.writeAttribute("class", defaultClass, "");


And next, we need to register the renderer in the render-kit section of the faces-config.xml file:



No further explanations seem necessary for this recipe.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s