Primeface inputNumber component’s styleClass on the input element

Goal

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

Description

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 java.io.IOException;

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

	writer.endElement("span");
    }

    @Override
    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, "");

	writer.endElement("input");
    }
}

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

...
<render-kit>
  <renderer>
    <component-family>org.primefaces.extensions.component</component-family>
    <renderer-type>
      org.primefaces.extensions.component.InputNumberRenderer
    </renderer-type>
    <renderer-class>
      com.linkare.myproject.web.renderer.MyInputNumberRenderer
    </renderer-class>
  </renderer>
</render-kit>
...

Explanations

No further explanations seem necessary for this recipe.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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