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