The Enter key makes form submission so easy that users always tend to use it. The most intuitive way is that the user can enter some text or make some changes to the existing text and then hit the Enter key to submit the form. But what command component will submit the form if we have more than one of them? Browsers, especially Internet Explorer, behave differently here. The defaultCommand
component solves this problem by normalizing the command (for example, button
or link
) that submits the form when the Enter key is hit.
In this recipe, we will discuss p:defaultCommand
in detail. We will implement p:selectOneMenu
for dynamic selection of the command button used for form submission when the Enter key is hit.
We intend to save the chosen command button used for form submission in a backing bean. To achieve this, we need p:selectOneMenu
with listed command buttons (their IDs) and an attached p:ajax
behavior event. Such an AJAX-ified p:selectOneMenu
component should update p:defaultCommand
on a change event automatically so that the chosen command button will be used in p:defaultCommand
. A p:inputText
component should take input and a corresponding h:outputText
component should display the same input when the Enter key is hit. Furthermore, we want to display the pressed button as a growl notification. The following code captures this discussion:
<p:growl id="growl" autoUpdate="true"/> <h:panelGrid columns="2" cellpadding="5"> <h:outputLabel for="btnSelect" value="Select default button:"/> <p:selectOneMenu id="btnSelect" value="#{defaultCommandBean.btn}"> <p:ajax update="@form"/> <f:selectItem itemValue="btn1" itemLabel="Button 1"/> <f:selectItem itemValue="btn2" itemLabel="Button 2"/> <f:selectItem itemValue="btn3" itemLabel="Button 3"/> </p:selectOneMenu> </h:panelGrid> <h:panelGrid columns="3" cellpadding="5" style="margin:15px 0 15px 0;"> <h:outputLabel for="text" value="Text:"/> <p:inputText id="text" value="#{defaultCommandBean.text}"/> <h:outputText id="display" value="#{defaultCommandBean.text}"/> </h:panelGrid> <p:commandButton id="btn1" value="Button1" update="display" actionListener="#{defaultCommandBean.showMessage('Button1')}"/> <p:commandButton id="btn2" value="Button2" update="display" actionListener="#{defaultCommandBean.showMessage('Button2')}"/> <p:commandButton id="btn3" value="Button3" update="display" actionListener="#{defaultCommandBean.showMessage('Button3')}"/> <p:defaultCommand id="defCommand" target="#{defaultCommandBean.btn}"/>
The following screenshot shows what happens when the second button is chosen as default and the user enters
sometext
and hits the Enter key:
DefaultCommand
must be in a form in order to work, and the target
attribute is required to refer to an identifier of a clickable command component. The target
attribute in this example references such an identifier via the EL expression #{defaultCommandBean.btn}
. The possible identifiers are btn1
, btn2
, and btn3
. The button with the identifier in the target
attribute is used as default. That means it gets clicked and submits the form when the user enters something into the input field and presses the Enter key. In addition, the action listener showMessage
generates a message text for p:growl
.
Besides target
, there is also the scope
attribute, which is needed for multiple default commands on the same page. The scope
attribute restricts the area for handling the Enter key. It refers to the ancestor component of the input field considered by this p:defaultCommand
.
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 application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter11/defaultCommand.jsf
.