JSF Under the Hood—Part 3 - JSF and HTML5 - page 113

Table 4-4. <f:event> Tag Attributes

Attribute Description

Type* Value expression that evaluates to a String which represents the name of the event for which to install

a listener. Valid values are preRenderComponent , preRenderView , postAddToView , preValidate , and
postValidate . In addition to the mentioned valid values, the fully qualified class name of any java class
that extends ComponentSystemEvent may be used as the value of the “type” attribute after annotating
the extending class with @NamedEvent annotation.

Method expression that must evaluate to a public method that takes a ComponentSystemEvent as a
parameter, with a return type of void , or to a public method that takes no arguments with a return type
of void .

Listener*

In order to change the style of input component, we can put an <f:event> tag inside it. Listing 4-22 shows how to
listen on the postValidate event in the user name input field.

Listing 4-22. Listening on the postValidate Event in the User Name Input Field
<h:inputText id="userName"
value="#{person.name}"
required="true"
requiredMessage="#{bundle['user.name.required']}">

<f:event type="postValidate" listener="#{person.checkName}"/>
<f:validateBean validationGroups="com.jsfprohtml5.subscriber.bean.validation.groups
.LengthGroup"/>
</h:inputText>

The JSF method expression #{person.checkName} checks if the user name input is valid. If user name is not valid,
a specific style class is added to the input field. Listing 4-23 shows the code of checkName method.

Listing 4-23. checkName Method Code

@ManagedBean
@RequestScoped
public class Person implements Serializable {

...

public void checkName(ComponentSystemEvent componentSystemEvent) {
UIComponent component = componentSystemEvent.getComponent();

if (component instanceof EditableValueHolder) {
EditableValueHolder editableValueHolder = (EditableValueHolder) component;
if (! editableValueHolder.isValid()) {
component.getAttributes().put("styleClass", "invalidInput");
} else {
component.getAttributes().put("styleClass", "");
}
}
}
}