My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns
JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

miercuri, 11 martie 2015

[JSF Page Author Beginner's Guide] JSF <message> component / HTML5 <span> element

The <h:message> is used in JSF to display a single 
info/warn/error/fatal message for a specific component
(depending on how is used, it produces a <span> tag or no extra HTML markup)
Common/basic usage in JSF:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"     
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title>JSF message examples</title>        
 </h:head>
 <h:body>
  <h:form>
   <h:outputLabel value="Age:" for="ageId"/>
   <h:inputText id="ageId" value="#{playerBean.age}" label="age">
    <f:validateLongRange for="ageId" minimum="18" maximum="45" />
   </h:inputText>
   <h:commandButton value="Send"/>
   <h:message for="ageId"/>
   <h:message id="ageMsgId" for="ageId"/>
  </h:form>
 </h:body>
</html>

For an invalid value (e.g. empty string), the <h:message> will be rendered in HTML as:

·         <h:message id="ageMsgId" for="ageId"/> as:
<span id="j_idt6:ageMsgId">age: Validation Error: Value is not of the correct type.</span>

·         <h:message for="ageId"/> as:
age: Validation Error: Value is not of the correct type.

For an invalid value (e.g. 10), the <h:message> will be rendered in HTML as:

·         <h:message id="ageMsgId" for="ageId"/> as:
<span id="j_idt6:ageMsgId">age: Validation Error: Specified attribute is not between the expected values of 18 and 45.</span>

·         <h:message for="ageId"/> as:
age: Validation Error: Specified attribute is not between the expected values of 18 and 45.

The PlayerBean will be:

package beans;

import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

@Named
@SessionScoped
public class PlayerBean implements Serializable {

 private String age; 

 public String getAge() {
  return age;
 }

 public void setAge(String age) {
  this.age = age;
 }   
}

Data flow in image:
More examples:

Styling messages with inner CSS code

<h:form>
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">
  <f:validateLongRange for="ageId" minimum="18" maximum="45" />
 </h:inputText>
 <h:commandButton value="Send"/>
 <h:message for="ageId" style="color: red;"/>
</h:form>

Styling messages with CSS class

<h:form>
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">
  <f:validateLongRange for="ageId" minimum="18" maximum="45" />
 </h:inputText>
 <h:commandButton value="Send"/>
 <h:message for="ageId" styleClass="messagecss"/>
</h:form>

The infoStyle/infoClass - Styling an info message with inner style / CSS class (only FacesMessage.SEVERITY_INFO will have this style)

<h:form id="IformId">
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">               
  <f:validateLongRange for="ageId" minimum="18" maximum="45" />
 </h:inputText>
 <h:commandButton value="Send" action="#{playerBean.info()}"/>
 <!-- infoStyle -->
 <h:message for="ageId" infoStyle="color:green;font-size:20px;"/> 
 <!-- infoClass -->
 <h:message for="ageId" infoClass="infocss"/>         
</h:form>
In the first case, the inserted value, 10, is not valid, so the applications "stops" in the Process Validations phase, and a message of type error is returned. This message doesn't benefit of a custom CSS, so is  displayed via JSF default style. When a valid value is provided, the application flow reaches a dummy PlayerBean method, named info(). This method simply put in messages queue an message of type info, which will be styled via infoStyle/infoClass (the presence of these tags, will force the messages to be rendered in a <span> element):

public void info() {
 FacesContext context = FacesContext.getCurrentInstance();
 // add an info message
 context.addMessage("IformId:ageId", new FacesMessage(FacesMessage.SEVERITY_INFO, "This is an info message !", "This message is just a dummy info message to see how it works !"));
}

The warnStyle/warnClass - Styling an warning message with inner style / CSS class (only FacesMessage.SEVERITY_WARN will have this style)

<h:form id="WformId">
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">                
  <f:validateLongRange for="ageId" minimum="18" maximum="45" />
 </h:inputText>
 <h:commandButton value="Send" action="#{playerBean.warn()}"/>
 <!-- warnStyle -->
 <h:message for="ageId" warnStyle="color:orange;font-size:20px;"/> 
 <!-- warnClass -->
 <h:message for="ageId" warnClass="warncss"/>
 </h:form>
In the first case, the inserted value, 10, is not valid, so the applications "stops" in the Process Validations phase, and a message of type error is returned. This message doesn't benefit of a custom CSS, so is  displayed via JSF default style. When a valid value is provided, the application flow reaches a dummy PlayerBean method, named warn(). This method simply put in messages queue an message of type warning, which will be styled via warnStyle/warnClass (the presence of these tags, will force the messages to be rendered in a <span> element):

public void warn() {
 FacesContext context = FacesContext.getCurrentInstance();
 // add an warning message
 context.addMessage("WformId:ageId", new FacesMessage(FacesMessage.SEVERITY_WARN, "This is an warning message !", "This message is just a dummy warning message to see how it works !"));
}

The errorStyle/errorClass - Styling an error message with inner style / CSS class (only FacesMessage.SEVERITY_ERROR will have this style)

<h:form id="EformId">
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">               
  <f:validateLongRange for="ageId" minimum="18" maximum="45" />
 </h:inputText>
 <h:commandButton value="Send" action="#{playerBean.error()}"/>
 <!-- errorStyle -->
 <h:message for="ageId" errorStyle="color:red;font-size:20px;"/>          
 <!-- errorClass -->
 <h:message for="ageId" errorClass="errorcss"/>
</h:form>
In the first case, the inserted value, 10, is not valid, so the applications "stops" in the Process Validations phase, and a message of type error is returned. This message is styled via errorStyle/errorClass. When a valid value is provided, the application flow reaches a dummy PlayerBean method, named error(). This method simply put in messages queue an message of type error, which will be styled via warnStyle/warnClass (the presence of these tags, will force the messages to be rendered in a <span> element):

public void error() {
 FacesContext context = FacesContext.getCurrentInstance();
 // add an error message
 context.addMessage("EformId:ageId", new FacesMessage(FacesMessage.SEVERITY_ERROR, "This is an error message !", "This message is just a dummy error message to see how it works !"));
}

The fatalStyle/fatalClass - Styling a fatal error message with inner style / CSS class (only FacesMessage.SEVERITY_FATAL will have this style)

<h:form id="FformId">
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">               
  <f:validateLongRange for="ageId" minimum="18" maximum="45" />
 </h:inputText>
 <h:commandButton value="Send" action="#{playerBean.fatal()}"/>
 <!-- fatalStyle -->
 <h:message for="ageId" fatalStyle="color:magenta;font-size:20px;"/>          
 <!-- fatalClass -->
 <h:message for="ageId" fatalClass="fatalcss"/>
 </h:form>
In the first case, the inserted value, 10, is not valid, so the applications "stops" in the Process Validations phase, and a message of type error is returned. This message doesn't benefit of a custom CSS, so is  displayed via JSF default style. When a valid value is provided, the application flow reaches a dummy PlayerBean method, named fatal(). This method simply put in messages queue an message of type fatal, which will be styled via fatalStyle/fatalClass (the presence of these tags, will force the messages to be rendered in a <span> element):

public void fatal() {
 FacesContext context = FacesContext.getCurrentInstance();
 // add an error message
 context.addMessage("FformId:ageId", new FacesMessage(FacesMessage.SEVERITY_FATAL, "This is an fatal message !", "This message is just a dummy fatal message to see how it works !"));
}

The xxxStyle/xxxClass - Styling an info/warn/error/fatal message with inner style / CSS class

<h:form id="ALLformId">
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">               
  <f:validateLongRange for="ageId" minimum="18" maximum="45" />
 </h:inputText>
 <h:commandButton value="Send" action="#{playerBean.randomMessage()}"/>                       
 <!-- xxxStyle -->
 <h:message for="ageId" infoStyle="color:green;font-size:20px;" warnStyle="color:orange;font-size:20px;" errorStyle="color:red;font-size:20px;" fatalStyle="color:magenta;font-size:20px;"/>
 <!-- xxxClass -->
 <h:message for="ageId" infoClass="infocss" warnClass="warncss" errorClass="errorcss" fatalClass="fatalcss"/>
</h:form>

In this case, a message will be styled depending on its type. For testing purposes, we have used a method capable to generate a random type message, so submit the form several times to see how each message type is styled:

public void randomMessage() {
 FacesContext context = FacesContext.getCurrentInstance();
 Random rnd = new Random();
 int msgtype = 1+rnd.nextInt(4);

 switch (msgtype) {
  case 1:
   context.addMessage("ALLformId:ageId", new FacesMessage(FacesMessage.SEVERITY_INFO, "This is an info message !", "This message is just a dummy info message to see how it works !"));
   break;
  case 2:
   context.addMessage("ALLformId:ageId", new FacesMessage(FacesMessage.SEVERITY_WARN, "This is an warning message !", "This message is just a dummy warning message to see how it works !"));
   break;
  case 3:
   context.addMessage("ALLformId:ageId", new FacesMessage(FacesMessage.SEVERITY_ERROR, "This is an error message !", "This message is just a dummy error message to see how it works !"));
   break;
  case 4:
   context.addMessage("ALLformId:ageId", new FacesMessage(FacesMessage.SEVERITY_FATAL, "This is an fatal message !", "This message is just a dummy fatal message to see how it works !"));
   break;
 }
}

The next examples takes use of a custom validator that always return a invalid message containing summary and detail:

package beans;

import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.validator.FacesValidator;
import javax.faces.validator.Validator;
import javax.faces.validator.ValidatorException;

@FacesValidator(value = "myValidator")
public class MyValidator implements Validator {

 @Override
 public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {

  FacesMessage message = new FacesMessage();
  message.setDetail("Detail: I'm a dummy detail section.");
  message.setSummary("Summary: Dummy!");
  message.setSeverity(FacesMessage.SEVERITY_ERROR);
  throw new ValidatorException(message);
 }
}

Show message details, don't show summary - this is default

<h:form>
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">
  <f:validator validatorId="myValidator"/>
 </h:inputText>
 <h:commandButton value="Send"/>
  <h:message for="ageId" showSummary="false" showDetail="true" errorClass="errorcss"/>
</h:form>

Show message summary, don't show detail

<h:form>
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">
  <f:validator validatorId="myValidator"/>
 </h:inputText>
 <h:commandButton value="Send"/>
 <h:message for="ageId" showSummary="true" showDetail="false" errorClass="errorcss"/>
</h:form>

Show message summary and detail

<h:form>
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">
  <f:validator validatorId="myValidator"/>
 </h:inputText>
 <h:commandButton value="Send"/>
 <h:message for="ageId" showSummary="true" showDetail="true" errorClass="errorcss"/>
</h:form>

Show message summary, and detail via tooltip attribute

<h:form>
 <h:outputLabel value="Age:" for="ageId"/>
 <h:inputText id="ageId" value="#{playerBean.age}" label="age">
  <f:validator validatorId="myValidator"/>
 </h:inputText>
 <h:commandButton value="Send"/>
 <h:message for="ageId" tooltip="true" showSummary="true" showDetail="false" errorClass="errorcss"/>
</h:form>

Complete source code on GitHub.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
Message in JSF Extension on JSF ShowCase ZEEF page.

Niciun comentariu :

Trimiteți un comentariu

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors