Clever focus management in forms

Focus is a component that makes it easy to manage the focus setting on a JSF page. By default, the focus component finds the first enabled (editable) and visible input component on the page and applies focus. Typically, input components are associated with HTML elements, such as input, textarea, and select.

In this recipe, we will learn about the default and advanced behaviors of the Focus component. We will develop two h:panelGrid components with several input components in order to demonstrate the behavior of p:focus in detail.

How to do it…

The XHTML code snippet contains a total of three p:inputText components:

<p:messages/>

<p:focus context="secondGrid"/>

<h:panelGrid columns="2" style="margin-bottom:10px;">
  <h:outputLabel value="Dummy"/>
  <p:inputText/>
</h:panelGrid>

<h:panelGrid id="secondGrid" columns="2">
  <h:outputLabel for="firstname" value="Firstname *"/>
  <p:inputText id="firstname" required="true" label="Firstname"/>

  <h:outputLabel for="surname" value="Surname *"/>
  <p:inputText id="surname" required="true" label="Surname"/>
</h:panelGrid>

<br/>

<p:commandButton value="Submit" update="@form"/>

The following screenshot shows a focus set for the Surname field after a form is submitted. We entered something in the Firstname field but left the Surname field empty.

How to do it…

How it works…

The default behavior of the focus component can be restricted by the context attribute. This attribute defines a search expression for the root component from which the Focus component starts to search for input components.

Tip

Chapter 1, Getting Started with PrimeFaces, provides more details on search expressions.

In the example, context points to the ID of the second h:panelGrid component. That means although we have two h:panelGrid components, only the second will be considered for p:focus. The content of the first h:panelGrid component gets ignored. If there are no validation errors, the focus is set implicitly on the first editable and visible input field within the second h:panelGrid component. This is the Firstname field. If there are any validation errors, the first invalid input component will receive the focus. This is the Surname field in the preceding screenshot.

Tip

To get this feature working on AJAX requests, you need to update the p:focus component as well.

There's more…

If we want to set focus explicitly on an input component, we can use the for attribute that specifies exactly this input component.

Another feature is the minSeverity attribute. It specifies the message's minimum severity level to be used when finding the first invalid component. The default value is error. If you set it, for example, to info, the focus will not be normally set on the first invalid component due to the higher severity level of the created validation message matching this threshold. In this case, the default behavior is applied—the focus is set on the first enabled and visible input component.

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/focusManagement.jsf.

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

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