The input component spinner provides a numerical input via increment and decrement buttons.
A basic definition of the component would be as follows:
<p:spinner value="#{spinnerBean.intValue}" />This will render an input textbox on the page, with controls to increase and decrease the value as shown in the following screenshot:
The stepFactor attribute defines the stepping factor that will be applied for each increment and decrement with the default value 1. The following definition will increase or decrease the value by 0.5:
<p:spinner value="#{spinnerBean.doubleValue}" stepFactor="0.5" />The prefix and suffix attributes provide the ability to place fixed strings on the input field as a prefix or suffix to the input respectively. The first definition will render the $ sign as a prefix, and the second one will render the % sign as a suffix with the value of the input field:
<p:spinner value="#{spinnerBean.intValue}" prefix="$" />
<p:spinner value="#{spinnerBean.intValue}" suffix="%" />The spinner component also provides attributes to set boundary values on the input value. The min attribute defines the minimum boundary value with the minimum value of java.lang.Double as default. The max attribute defines the maximum boundary value with the maximum value of java.lang.Double as default.
The minimum and maximum control on the input field will only get applied on the increment and decrement buttons, and not on manual input done with the keyboard. In order to disable manual input, we need to specify JSF 2.2 pass-through attributes with the name onkeydown:
<p:spinner value="#{spinnerBean.intValue}" suffix="%"
min="0" max="100">
<f:passThroughAttribute name="onkeydown"
value="return false;" />
</p:spinner>This will result in rendering the spinner component with the restriction from 0 to 100, suffixed with the % sign, and disabled with the keyboard input.
One misleading approach towards setting the width of the spinner component is defining the style attribute with the width value. For example, style="width:50px;", will increase the width of the spinner component by having a fixed width for the input part. We can easily resize the field with the size attribute, which defines the number of characters used to determine the width of the input element:
<p:spinner value="#{spinnerBean.intValue}" size="3" />It is also possible to update an output field for each click on the spinner, with the <p:ajax> component:
<p:spinner id="ajaxSpinner" value="#{spinnerBean.intValue2}">
<p:ajax update="output" process="@this" />
</p:spinner>
<h:outputText id="output" value="#{spinnerBean.intValue2}" />Referring the ID of the outputText component with the update attribute does the actual update.
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on every Servlet 3.x compatible application server, such as JBoss WildFly or Apache TomEE.
The showcase for the recipe is available under http://localhost:8080/pf-cookbook/views/chapter3/spinner.jsf.