[RichFaces] Modal Panel , gestion des erreurs

Version imprimable

16/09/2008, 15h10
Jexou

[RichFaces] Modal Panel , gestion des erreurs

Bonjour,

Voilà je viens de passer sur RichFaces et le composant ModalPanel m'interesse. Je voulais m'en servir afin d'afficher des erreur personalisée au client.

Par exemple : "Formulaire incorrect blablabla"

J'ai cherché sur le net pour voir si quelqu'un avait déjà proposé une telle solution, mais rien du tout :s

Est-ce réellement possible? Et si oui, si l'on pouvait m'aiguiller.

Merci
16/09/2008, 15h51
ng.phung

salut,

j'ai eu le même type de problème que toi,
j'ai trouvé la réponse sur le forum, voici le lien du post:

http://www.developpez.net/forums/d60...l/#post3597667

bon courage
16/09/2008, 15h53
supermanu

Tu trouveras un exemple ainsi que les sources sur ce lien : http://livedemo.exadel.com/richfaces...anel&tab=usage ;)
16/09/2008, 15h58
Jexou

Merci ng.phung, je vais allez voir ce lien.

supermanu, j'ai déjà été vori ce lien avant de venir içi ;) D'ailleur ca marche très bien lorsque je click sur un lien.

Mais j'aimerais que ça s'affiche "automatiquement" lorsqu'il y a une erreur.
16/09/2008, 15h59
Sniper37

tu peux utiliser le parametre showWhenRendered, pour des erreurs de validations ou de conversion:

Code:

showWhenRendered="#{facesContext.maximumSeverity !=null}"

et

Code:

<rich:messages/> ou <h:messages />

dans le modalPanel
16/09/2008, 16h20
Jexou

J'aime bien ton astuce Sniper37, malheureusement, pas le temps d'essayer ça aujourd'hui. Je verrai ça demain.

(je mettrai alors en résolu si tout se passe bien ;))
17/09/2008, 09h48
Jexou

Voilà je viens d'essayer ta solution, et ça ne marche pas :(

J'ai mis un champ required=true , et lorsque je valide mon formulaire, la modalPanel ne s'affiche pas (pareil si je génère moi même une erreur). Par contre, après avoir valider le formulaire, si je click sur le lien qui me permet d'afficher ma modalPanel, elle s'affiche bien, avec le bon message d'erreur.
17/09/2008, 10h16
Sniper37

quand tu valide le formulaire, il faut ouvrir le modalPanel sur l'événement onComplete,
si il la validationéchoue le modalPanel s'ouvre.
17/09/2008, 10h32
Jexou

Ah oui du coup ça marche beaucoup mieux :)

Merci c'est exactement ce que je recherchais.

Et hop, problème résolu.

Edit : je me posais une question sur ce fameux showWhenRendered, je viens de l'enlever, de redémarrer mon serveur, et tout marche. D'après la doc, cet attribut sert a indiquer si il faut afficher la modalPanel juste après le chargement de la page. D'ailleur si on le met à true, c'est exactement ce qu'il se passe.
17/09/2008, 10h42
Sniper37

Citation:

Envoyé par Jexou

Edit : je me posais une question sur ce fameux showWhenRendered, je viens de l'enlever, de redémarrer mon serveur, et tout marche. D'après la doc, cet attribut sert a indiquer si il faut afficher la modalPanel juste après le chargement de la page. D'ailleur si on le met à true, c'est exactement ce qu'il se passe.

mais il faut éviter que le modalPanel s'affiche si la page est rechargée alors qu'il n'ya pas d'erreur..
17/09/2008, 10h47
Jexou

Oui je viens de comprendre, je me suis un peu précipité dans mon edit ;)

Edit : qu'il soit la ou pas, le showWhenRendered ne change rien :

->J'ai un champ en required=true
->je valide la page sans le remplir -> la ModalPanel s'affiche -> Normal

->Je le rempli, je valide -> La ModalPanel s'affiche avec aucun message d'erreur :s

Je ne sais pas ce que j'ai mal fait
17/09/2008, 14h04
Sniper37

est ce que tu as mis la condition donnée ci-dessus.?

la condition vérifie s'il n'y a pas de message.peu etre tu as d'autres messages de validations ou de conversion..

Oui j'ai bien mis la condition showWhenRendered.

Voici le code de ma modalPanel

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
		<rich:modalPanel id="panel" width="350" height="100" showWhenRendered="#{facesContext.maximumSeverity !=null}">
        <f:facet name="header">
            <h:panelGroup>
                <h:outputText value="Modal Panel"></h:outputText>
            </h:panelGroup>
        </f:facet>
        <f:facet name="controls">
            <h:panelGroup>
                <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" id="hidelink"/>
                <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
            </h:panelGroup>
        </f:facet>
        <rich:messages/>
        <h:messages/>
    </rich:modalPanel>

Je ne fais qu'une seule vérification : un required=true sur un champs.

tu log les phases JSF..?

ajoute
Code:

1 2 <rich:messages showDetail="true" showSummary="true"></rich:messages>

Non je n'avais pas de Listener, mais je viens d'en mettre un :

Le cas où j'envo ides données correctes (mais le modalPanel s'affiche)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
BeforePhase: RESTORE_VIEW 1
AfterPhase: RESTORE_VIEW 1
BeforePhase: RENDER_RESPONSE 6
AfterPhase: RENDER_RESPONSE 6
BeforePhase: RESTORE_VIEW 1
AfterPhase: RESTORE_VIEW 1
BeforePhase: RENDER_RESPONSE 6
AfterPhase: RENDER_RESPONSE 6
BeforePhase: RESTORE_VIEW 1
AfterPhase: RESTORE_VIEW 1
BeforePhase: RENDER_RESPONSE 6
AfterPhase: RENDER_RESPONSE 6
BeforePhase: RESTORE_VIEW 1
AfterPhase: RESTORE_VIEW 1
BeforePhase: RENDER_RESPONSE 6
AfterPhase: RENDER_RESPONSE 6
BeforePhase: RESTORE_VIEW 1
AfterPhase: RESTORE_VIEW 1
BeforePhase: RENDER_RESPONSE 6
AfterPhase: RENDER_RESPONSE 6
BeforePhase: RESTORE_VIEW 1
AfterPhase: RESTORE_VIEW 1
BeforePhase: RENDER_RESPONSE 6
AfterPhase: RENDER_RESPONSE 6
BeforePhase: RESTORE_VIEW 1
AfterPhase: RESTORE_VIEW 1
BeforePhase: RENDER_RESPONSE 6
AfterPhase: RENDER_RESPONSE 6
BeforePhase: RESTORE_VIEW 1
AfterPhase: RESTORE_VIEW 1
BeforePhase: APPLY_REQUEST_VALUES 2
AfterPhase: APPLY_REQUEST_VALUES 2
BeforePhase: PROCESS_VALIDATIONS 3
AfterPhase: PROCESS_VALIDATIONS 3
BeforePhase: UPDATE_MODEL_VALUES 4
AfterPhase: UPDATE_MODEL_VALUES 4
BeforePhase: INVOKE_APPLICATION 5
Save book
User has saved a new book
Hibernate: select book_.ISBN, book_.Titre as Titre0_, book_.Auteur as Auteur0_, book_.Prix as Prix0_ from BOOKMANAGER.BOOK book_ where book_.ISBN=?
AfterPhase: INVOKE_APPLICATION 5
BeforePhase: RENDER_RESPONSE 6
AfterPhase: RENDER_RESPONSE 6

Save Book s'affiche dès qu'on appuye sur le bouton de validation. Ensuite viens mon Logger puis le code sql executé.

Maintenant lorsque la donnée est manquante :

Code:

1
2
3
4
5
6
7
8
BeforePhase: RESTORE_VIEW 1
AfterPhase: RESTORE_VIEW 1
BeforePhase: APPLY_REQUEST_VALUES 2
AfterPhase: APPLY_REQUEST_VALUES 2
BeforePhase: PROCESS_VALIDATIONS 3
AfterPhase: PROCESS_VALIDATIONS 3
BeforePhase: RENDER_RESPONSE 6
AfterPhase: RENDER_RESPONSE 6

Le code erreur étant : myForm:isbn: Erreur de validation: Valeur requise.myForm:isbn: Erreur de validation: Valeur requise.

17/09/2008, 16h24
Sniper37

et le code où tu envoies le formulaire?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
package view;
 
 
import database.dao.classes.Book;
import database.dao.interfaces.BookDAO;
 
public class ManageBook
{
	private Book book ; 
	private BookDAO bookDAO ; 
 
	public BookDAO getBookDAO() {
		return bookDAO;
	}
 
	public void setBookDAO(BookDAO bookDAO) {
		this.bookDAO = bookDAO;
	}
 
	public ManageBook()
	{
		book = new Book();
	}
 
	public String saveBook()
	{
		System.out.println("Save book");
		bookDAO.saveBook(book);
		return "";
	}
 
	public Book getBook() {
		return book;
	}
 
	public void setBook(Book book) {
		this.book = book;
	}
 
}

BookDAO étant une interface, voici le code de l'implémentation

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
package database.dao.classes;
 
import java.util.List;
 
import org.springframework.dao.DataAccessException;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;
 
import database.dao.interfaces.BookDAO;
 
public class BookDAOHibernateImpl extends HibernateDaoSupport implements BookDAO
{
	public BookDAOHibernateImpl()
	{
 
	}
 
	public List findAll()
	{
		return null;
	} 
 
	public Book getBookById(String id)
	{
		Book book = (Book)this.getHibernateTemplate().load(Book.class, id);
		return book;
	}
 
	public void saveBook(Book book) 
	{
		try
		{
			this.getHibernateTemplate().saveOrUpdate(book);
		}
		catch(DataAccessException ex)
		{
			ex.printStackTrace();
		}
	}
}

17/09/2008, 16h37
Sniper37

je parlais du code du button dans la jsp.;)
17/09/2008, 16h40
Jexou

Aaah :p

Le voici :)

<a4j:commandButton value="Validate" action="#{manageBook.saveBook}" oncomplete="Richfaces.showModalPanel('modalPanel:mp');" />

modalPanel -> la form qui contient mon modalPanel et mp mon modalPanel
17/09/2008, 16h55
Sniper37

J'ai exactement le même et elle ne se lance jamais le modalPanel si il n'y a pas de message d'erreur..
sinon ce que tu peux faire, ajouter une fonction boolean qui teste s'il n'y a pas de message dans le context.
ton modalPanel n'est pas inclus dans le formulaire de ta page..?

Voici le code complet de ma jsp :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<f:view>
	<html>
	<head>
	<title>Save a new book</title>
 
	</head>
	<body>
	<rich:tabPanel>
		<rich:tab label="Save Book">
			<h:form id="myForm">
				<rich:modalPanel id="mp" width="350" height="100"
					showWhenRendered="#{facesContext.maximumSeverity!=null}">
					<f:facet name="header">
						<h:panelGroup>
							<h:outputText value="Modal Panel"></h:outputText>
						</h:panelGroup>
					</f:facet>
					<f:facet name="controls">
						<h:panelGroup>
							<h:graphicImage value="/images/modal/close.png"
								style="cursor:pointer" id="hidelink" />
							<rich:componentControl for="mp" attachTo="hidelink"
								operation="hide" event="onclick" />
						</h:panelGroup>
					</f:facet>
					<rich:messages />
				</rich:modalPanel>
				<rich:panel style="width=50%">
					<f:facet name="header">
						<h:outputText value="Save a new book"></h:outputText>
					</f:facet>
					<h:panelGrid columns="2">
						<h:outputText value="ISBN:" />
						<h:inputText id="isbn" required="true"
							value="#{manageBook.book.isbn}">
						</h:inputText>
						<h:outputText value="Title:" />
						<h:inputText id="title" value="#{manageBook.book.titre}">
						</h:inputText>
						<h:outputText value="Author:" />
						<h:inputText id="auteur" value="#{manageBook.book.auteur}">
						</h:inputText>
						<h:outputText value="Price:" />
						<h:inputText id="prix" value="#{manageBook.book.prix}">
						</h:inputText>
						<a4j:commandButton value="Validate"
							action="#{manageBook.saveBook}"
							oncomplete="Richfaces.showModalPanel('myForm:mp');" />
					</h:panelGrid>
					<rich:comboBox defaultLabel="Enter some value">
						<f:selectItem itemValue="suggestion 1" />
						<f:selectItem itemValue="suggestion 2" />
						<f:selectItem itemValue="suggestion 3" />
						<f:selectItem itemValue="suggestion 4" />
						<f:selectItem itemValue="suggestion 5" />
					</rich:comboBox>
				</rich:panel>
			</h:form>
		</rich:tab>
		<rich:tab label="Save User">
		</rich:tab>
		<rich:tab label="Third" disabled="true">
		</rich:tab>
	</rich:tabPanel>
	</body>
	</html>
</f:view>

Y'a surement une bétise quelque part, une form mal placée ou que sais-je que je vois pas.

J'ai essayé une fonction qui me retourne si il y a des erreurs dans le FacesContext. Lorsque j'arrive dans ma méthode saveBook() (et que donc pas d'erreur avec le required=true) il m'indique qu'il n'y a aucune autre erreur dans le context.

18/09/2008, 09h29
Sniper37

le modalPanel il fa ut le mettre en dehors du formulaire, juste après le <body>
par exemple.
et le rich:message ajoute showDetails et showSummary..
18/09/2008, 09h38
Jexou

J'ai bien mis mon modalPanel en dehors du form, après le body.

J'ai rajouté le showSummary et le showDetail.

Ce qui me donne lorsque je ne remplis pas le champs isbn : myForm:isbn: Erreur de validation: Valeur requise.myForm:isbn: Erreur de validation: Valeur requise.

Mais lorsque je le rempli, comme toujours : une modalPanel vide

Quoiqu'il arrive, dès que j'appuye sur le bouton validate, il affiche la modalPanel sans tenir compte du fait de la présence ou non de messages d'erreurs.
18/09/2008, 09h53
Sniper37

- quelle est ta version de richfaces?
-ça donne quoi

Code:

<h:outputText value="#{facesContext.maximumSeverity}" />

-tu peux utiliser un biding et faire une fonction dans ton bean vérifier s'il n'ya pas de message et retourner true ou false.

- showWhenRendered="false" elle ne s'ouvre pas la popup ..j'espere.:lol:.

- essaye de mettre <h:commandButton/> au lieu de a4j avec un a4j:support sur l'evenement onclick..
18/09/2008, 10h25
Jexou
:yaisse2::yaisse2:

Bon, après ton messages, je me suis dis "si ça marche pas, je laisse tomber"

Pour répondre à tes questions, je suis sur RichFaces 3.2.2 (et c'est peut-être ça le problème, après je vais essayer avec 3.2.0)

Concernant le output du maximumSeverity, figure toi que ça n'affichait rien :s

Le binding avec une fonction, j'avais déjà utilisé ce procédé, et ça n'avait rien donné. J'ai donc réessayé avec ma modal en dehors de mon formulaire et comme tu peux t'en douter...ça marchait toujours pas.

Pire !!!

Code:

- showWhenRendered="false" elle ne s'ouvre pas la popup ..j'espere..

Et bien non ! Elle s'ouvrait quand même !! Donc ta dernière solution me semblait logique : c'est le a4j:commandButton qui merde un peu. Je ne connaissais pas le a4j:support (je débute avec richfaces), mais j'ai vite changé mon bouton en :
Code:

1 2 3 <h:commandButton value="Validate" action="#{manageBook.saveBook}"> <a4j:support oncomplete="Richfaces.showModalPanel('mp');"/> </h:commandButton>
Hop, un restart du serveur et que vois-je :

mon output maximumSeverity marche (bizarre car après cette 1er modification j'ai bien tout rechargé pour être sur). Mais en plus...mon modalPanel réagit correctement :) :yaisse2:

Ce fut fastidieux :aie:

En tout cas, un grand merci à toi, je n'aurais jamais pensé a utiliser le a4j:support. Je vais quand même sauvegarder cette page, et essayer avec les RichFaces 3.2.0 pour voir. J'éditerai ce message pour le résultat avec cette version.

Edit :

Test avec version 3.2.1 , 3.2.0 et 3.1.6 -> même bug.

Quelle est ta version de RichFace que j'essaye? (pour voir si c'est un bug de version, ou alors chez moi (et il est très bien caché xD)
18/09/2008, 10h58
Sniper37

je suis avec la 3.2.2.GA, la dernière release et je n'ai pas constaté de régression du modalPanel.

il faut faire attention avec le <a4j:commandButton/> je ne sais pas si tu fais la navigation avec, mais il est censé faire que la mise à jour partiel ou total de la page..
la navigation ne se fait pas avec les composants de control a4j.

tu peux enfin remettre le post :resolu: ;)
18/09/2008, 11h26
Jexou

Je ferai attention les prochaines fois en tout cas ^^

Allez hop, résolu :)
30/04/2009, 10h55
davidovitch

Pour ajouter une pierre à l'édifice, j'ai eu EXACTEMENT le même soucis ce matin !
Sauf que moi, c'étai sur un a4j:commandLink qui commandait une suppresion. Je l'ai remplacé par un h:commandlink et son a4j:support et ça fonctionne.

Merci :)
07/01/2010, 10h15
djalouk

Dans mon appli, j'ai des modal panel avec des formulaires où il y a du contrôle de surface, des champs obligatoires etc... Pour que les messages d'erreur s'affichent correctement, j'utilise un <h:commandButton /> pour la validation et la technique suggérée ci-dessous :

Citation:

Envoyé par Sniper37

tu peux utiliser le parametre showWhenRendered, pour des erreurs de validations ou de conversion:

Code:

showWhenRendered="#{facesContext.maximumSeverity !=null}"

et

Code:

<rich:messages/> ou <h:messages />

dans le modalPanel

Le souci est que dans certaines vues, j'inclus plusieurs modal panel et donc lorsque j'ai une erreur, cela affiche les autres modal panel inclus dans ma page, forcément, elles ont toutes la même condition - #{facesContext.maximumSeverity !=null}.

J'ai donc ajouté un booléen pour chacune de ces modal afin d'avoir des conditions uniques, mais c'est lourd car il faut gérer n booléens, positionner les autres à false quand on ouvre une modal etc...

Je cherche donc une meilleure solution pour bien rafraichir mon formulaire afin que les messages s'affichent sans fermer la modal. Il me semble avoir essayé un <a4j:commandButton /> et un reRender mais ça ne fonctionne pas...

A vos idées. Merci !