Controlling form submission using defaultCommand

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.

How to do it…

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:

How to do it…

How it works…

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.

Note

To perform form submission on a key press, an input field must be focused due to the browser's nature.

There's more…

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.

PrimeFaces Cookbook Showcase application

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.137.59