JSF - h: messages

La balise h: messages affiche tous les messages à un endroit correspondant aux éléments de l'interface utilisateur.

Balise JSF

<h:messages style = "color:red;margin:8px;" />

Sortie rendue

Cas: le nom d'utilisateur saisi comporte plus de 20 caractères et le mot de passe saisi est inférieur à 5 caractères.

<ul style = "color:red;margin:8px;"> 
   <li> UserName: Validation Error:  
      Length is greater than allowable maximum of '20' </li> 
   <li> Password: Validation Error:  
      Length is less than allowable minimum of '5' </li> 
</ul>

Attributs de balise

S. Non Attribut et description
1

id

Identifiant d'un composant
2

binding

Référence au composant qui peut être utilisé dans un backing bean
3

rendered

Un booléen; false supprime le rendu
4

styleClass

Nom de classe de feuille de style en cascade (CSS)
5

for

L'ID du composant dont le message est affiché, applicable uniquement à h: message
6

errorClass

Classe CSS appliquée aux messages d'erreur
sept

errorStyle

Style CSS appliqué aux messages d'erreur
8

fatalClass

Classe CSS appliquée aux messages fatals
9

fatalStyle

Style CSS appliqué aux messages fatals
dix

globalOnly

Instruction pour afficher uniquement les messages globaux, applicable uniquement aux messages h:. Valeur par défaut: faux
11

infoClass

Classe CSS appliquée aux messages d'information
12

infoStyle

Style CSS appliqué aux messages d'information
13

layout

Spécification pour la mise en page des messages: tableau ou liste, applicable uniquement à h: messages
14

showDetail

Un booléen qui détermine si les détails du message sont affichés. Les valeurs par défaut sont fausses pour h: messages, true pour h: message
15

showSummary

Un booléen qui détermine si les résumés des messages sont affichés. Les valeurs par défaut sont true pour h: messages, false pour h: message
16

tooltip

Un booléen qui détermine si les détails du message sont rendus dans une info-bulle; l'info-bulle n'est rendue que si showDetail et showSummary sont true
17

warnClass

Classe CSS pour les messages d'avertissement
18

warnStyle

Style CSS pour les messages d'avertissement
19

style

Informations de style en ligne
20

title

Un titre, utilisé pour l'accessibilité, qui décrit un élément. Les navigateurs visuels créent généralement des info-bulles pour la valeur du titre

Exemple d'application

Créons une application JSF de test pour tester la balise ci-dessus.

Étape La description
1 Créez un projet avec un nom helloworld sous un package com.tutorialspoint.test comme expliqué dans le chapitre JSF - Première application .
2 Modifiez home.xhtml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.
4 Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver.
5 Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape.

home.xhtml

<!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"> 
   <head> 
      <title>JSF Tutorial!</title> 
   </head>
   
   <body> 
      <h2>h:messages example</h2> 
      <hr /> 
      
      <h:form> 
         <h:panelGrid id = "panel" columns = "2" border = "0" cellpadding = "10"  
         cellspacing = "1">   
            <h:outputLabel value = "Enter Username" /> 
            
            <h:inputText  id = "username"  size = "20" label = "UserName"  
               required = "true"> 
               <f:validateLength for = "username" minimum = "5" maximum = "20" />    
            </h:inputText>         
            <h:outputLabel value = "Enter Password" /> 
            
            <h:inputSecret id = "password" size = "20" label = "Password"  
               required = "true" redisplay = "true" > 
               <f:validateLength for = "password" minimum = "5" maximum = "10" />  
            </h:inputSecret>         
            <h:commandButton id = "submit" value = "Submit" action = "result"/> 
         </h:panelGrid> 
         <h:messages style = "color:red;margin:8px;" /> 
      </h:form> 
   
   </body> 
</html>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application comme nous l'avons fait dans le chapitre JSF - Première application. Si tout va bien avec votre application, cela produira le résultat suivant: