The selectOneMenu component is an extended version of JSF selectOneMenu. It provides custom content display along with skinning capabilities.
The simplest component declaration would be as follows:
<p:selectOneMenu> <f:selectItem itemLabel="English" itemValue="en"/> <f:selectItem itemLabel="Turkish" itemValue="tr"/> </p:selectOneMenu>
The output visual will be as follows:
Instead of working with primitive types or just string literals, most of the time we would be using the selectOneMenu component with domain objects. The basic definition of the component for listing the cars for a given brand would be as follows:
<p:selectOneMenu id="carPOJO"
value="#{selectOneMenuBean.selectedCar}" var="car">
<f:converter
converterId="org.primefaces.cookbook.converter.CarConverter" />
<f:selectItems value="#{selectOneMenuBean.cars}" var="c"
itemLabel="#{c.name}" itemValue="#{c}" />
<p:column>
<p:graphicImage
value="/resources/images/autocomplete/#{car.name}.png"
width="80" height="50"/>
</p:column>
<p:column>#{car.name}</p:column>
</p:selectOneMenu>Here, the component contains column definitions along with a converter declaration. The converter is responsible for converting the submitted value for each car, and with the help of the columns, we render images along with the name of each car.
Note
You can find the source code of the Car converter class available at http://bit.ly/CarConverter.
Also, with the editable attribute set to true, it becomes possible to choose from a given list or to input your own value.
The selectOneMenu component offers filtering of its contents when the filter attribute is set to true. When enabled, an input field gets rendered on the drop-down list as overlay and filtering is triggered on the onkeyup event of the input. The filterMatchMode attribute defines the matching mode for filtering the content. Its values could either be startsWith, which is the default value, contains, endsWith, and custom.
When set to custom, a JavaScript method name should be provided with the filterFunction attribute. The visual of the component, when filtering is enabled, will be similar to the following screenshot:
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/selectOneMenu.jsf.