Affichez vos messages flash CakePhp dans d'élégantes alertes à la Growl
Posé ici le mardi 23 septembre 2008 à 00:00 par
Sous ce titre un peu barbare se cache une petite astuce que j'ai utilisé sur l'un de nos nouveaux projets chez Kuantic et dont je suis très satisfait. CakePhp permet la gestion simple de message flash. C'est à dire un message passé entre deux pages et réinitialisé une fois affiché. Ça marche très bien mais ce n'est pas très sexy. Je voulais quelque chose de plus élégant.
C'est là qu'entre en jeu le plugin jQuery nommé jGrowl. Il permet l'ouverture d'alerte à la Growl justement (petit soft bien connu des utilisateurs de Mac). Voyons comment coupler les deux en respectant l'esprit du framework.
Si une image vaut mille mots, un film en vaut un million. Voici donc un screencast que j'ai réalisé pour monter le résultat en ligne. Une petite explication s'impose : la première partie montre les alertes Growl dans leur utilisation "normale" intégrées à nos requêtes Ajax. La seconde partie montre ces mêmes alertes utilisées dans les messages flash standards pour garder une certaine unité d'interface.
Voyons maintenant comment ajouter ça le plus simplement possible à CakePhp.
Téléchargement et installation
Une fois jGrowl et jQuery téléchargés, posez les éléments aux bons endroits :
- Mettre
jquery.jsdans/webroot/js/ - Mettre
jquery.jgrowl.jsdans/webroot/js/ - Mettre
jquery.jgrowl.cssdans/webroot/css/
Editez /views/layouts/default.ctp pour y mettre les liens adéquats. Le head devrait ressembler à quelque chose comme ça :
/views/layouts/default.ctp
<head>
<?php echo $html->charset(); ?>
<title><?php echo $title_for_layout; ?></title>
<?php echo $html->meta('icon'); ?>
<?php echo $html->css('styles'); ?>
<?php echo $html->css('jquery.jgrowl'); ?>
<?php echo $javascript->link('jquery', true); ?>
<?php echo $javascript->link('jquery.jgrowl', true); ?>
<?php echo $scripts_for_layout; ?>
</head>
Dans la partie Body maintenant, placez l'apparition du message Flash traditionnel là où vous le souhaitez dans votre page. Voici une version simplifiée de ce à quoi peut ressembler le Body.
<body>
<?php $session->flash(); ?>
<?php echo $content_for_layout; ?>
</body>
Intégration
Par défaut, les messages flash se gèrent comme suit dans les contrôlleurs :
$this->Session->setFlash('Mon alerte ici');
$this->redirect(array('action'=>'index'));
Ce qui produira un message formaté avec le HTML suivant :
<div id="flashMessage" class="message">Mon alerte ici</div>
Si l'on jette un coup d'œil à l'API, on voit que setFlash permet de passer un layout précis, voire des paramètres, à notre message flash.
$this->Session->setFlash ($message, $layout='default', $params=array(), $key='flash');
C'est précisément ce que nous allons utiliser. Créons un fichier /views/layouts/growl.ctp dont le contenu sera celui ci :
/views/layouts/growl.ctp
<script type="text/javascript">
<?php if (isset($type) && $type == 'important') : ?>
var settings = { header:"Important :", glue:'before' };
<?php elseif (isset($type) && $type == 'error') : ?>
var settings = { header:"Erreur :", sticky:true };
<?php else : ?>
var settings = {};
<?php endif ?>
jQuery.jGrowl("<?php echo $content_for_layout; ?>", settings);
</script>
<!-- si vous désirez garder le message d'origine en plus de l'alerte Growl -->
<div id="flashMessage" class="message"><?php echo $content_for_layout; ?></div>
Ici, nous affichons le message passé en flash directement dans jGrowl dont nous changeons éventuellement quelques options selon les paramètres passés (par exemple important ou error).
Notez l'utilisation de la forme jQuery.jGrowl() et non pas $.jGrowl() pour ne pas avoir de conflits avec une éventuelle utilisation de Prototype.
Usage
L'utilisation est des plus simples. Il suffit d'ajouter "growl" en second paramètre de $this->Session->setFlash() et optionnellement un type en troisième paramètre.
$this->Session->setFlash('Mon alerte ici', 'growl');
$this->Session->setFlash('Mon alerte ici', 'growl', array('type'=>'error') );
$this->Session->setFlash('Mon alerte ici', 'growl', array('type'=>'important') );
Les liens
CakePhp
jGrowl
http://stanlemon.net/projects/jgrowl.html
Ce contenu est mis à disposition selon les termes de la licence Creative Commons 2.0 France : Paternité, Pas d'Utilisation Commerciale, Partage des Conditions Initiales à l'Identique.
Context
Thématiques :
Trackbacks
0 trackback
Commentaires
22 commentaires
Très intéressant tout ça !
Personnellement, j'avais jamais penser à utiliser des alertes Growl pour indiquer le traitement de la méthode $_POST.
Merci pour cette idée et le screencast !
1. Par Catar4x le mardi 23 septembre 2008 à 17:14
Bonsoir,
Extra le screencast! Tu l'as fait avec quel soft?
L'idée des bulles growl dans cake est une tres bonne idée.
2. Par Clément O. le mardi 23 septembre 2008 à 19:20
Bonjour Clément.
Le screencast est fait avec Screenflow (Mac seulement). Excellent programme de Screencast.
3. Par Jay Salvat le jeudi 25 septembre 2008 à 09:46
Salut,
Vraiment sympa ce petit tuto, ça donne vraiment un trés bon effet.
Est-ce que tu pourrais m'expliquer rapidement le principe que tu utilises pour afficher tes messages flash sur des requetes ajax? Tu utilise la fonction remoteTimer, observeForm ou autre chose comme ça?
4. Par Bambou le lundi 13 octobre 2008 à 15:58
Bonjour Bambou,
J'ai fait une fonction intermédiaire que j'ai mis dans app_controller.php.
Cette fonction est celle-ci :
public function message($string, $redirect = false) {
if($this->RequestHandler->isAjax()) {
echo $string;
exit;
} else {
$this->Session->setFlash($string, 'growl');
$this->redirect(is_array($redirect) ? $redirect : array('action' => $redirect));
}
}
Et dans chacun de mes controlleurs, j'utilise cette méthode :
$this->message("La Note a bien été ajoutée");
A la place du traditionnel :
$this->Session->setFlash"La Note a bien été ajoutée");
5. Par Jay Salvat le lundi 13 octobre 2008 à 16:10
ah oui tout simplement en fait!! merci beaucoup et encore bravo pour ce petit tuto bien utile
6. Par Bambou le mardi 14 octobre 2008 à 00:55
Super ca, mais moi j'ai pas la petite fenêtre qui s'affiche avec le message d'erreur
7. Par Christophe le mercredi 25 février 2009 à 15:24
Excellent !
Par contre pour le fichier /views/layouts/growl.ctp, il faudrait remplacer les balises php ouvrantes courtes (< ?) par des longues (< ? php) plus correctes et assurant une meilleure compatibilité. En effet, avec "shot_open_tags" sur Off dans php.ini, le code ne s'exécute plus !
Merci pour ces très bon tutoriels :)
8. Par Olivier le mardi 03 mars 2009 à 18:25
@ Olivier
Oui c'est plus correct, c'est corrigé.
9. Par Jay Salvat le mardi 03 mars 2009 à 19:04
bonjour,
a quoi correspond le fichier 'style' dans <?php echo $html->css('styles'); ?> ??
10. Par Christophe le vendredi 06 mars 2009 à 11:10
Bonjour Christophe, j'avais répondu à ton email, mais il m'est revenu. Tu avais du mal le saisir.
<?php echo $html->css('styles'); ?>
C'est juste le lien vers la feuille de styles de l'application que j'utilise.
11. Par Jay Salvat le vendredi 06 mars 2009 à 12:12
ok merci pour le renseignement
12. Par Christophe le vendredi 06 mars 2009 à 13:35
Bonjour,
très bien le petit tuto, bien expliqué et belle mise en forme.
Je voulais simplement savoir s'il y a besoin qu'une certaine configuration soit faite sur cake, car, quand j'essaie avec la méthode, rien ne se passe. Cependant, j'ai testé avec le code du bouton que tu as placé pour l'exemple et ça marche.
Alors je voulais te demander les paramètres à configurer dans cake ou wamp (pour les services bdd et php).
Merci pour le tuto en tout cas,
13. Par Christophe F. le mardi 31 mars 2009 à 09:01
Bonjour Christophe.
J'ai ajouté quelques lignes à l'article. Tu ne dois pas oublier de placer le message flash dans ton Body, généralement au dessus du contenu de la page.
<?php $session->flash(); ?>
<?php echo $content_for_layout; ?>
14. Par Jay Salvat le mardi 31 mars 2009 à 10:38
nickel, je te remercie beaucoup.
c'est vrai j'ai zappé cette étape, maintenant ça va mieux.
Pas super facile à prendre en main le cake quand même, surtout quand tu ne fais pas bcp de développement web. Tu saurais ou je peux trouver une documentation vraiment complète? J'ai déjà utilisé le cookbook et une intro newbies mais du mal à trouver des réponses.
Merci pour tout et bonne continuation à toi,
15. Par Christophe F. le mardi 31 mars 2009 à 11:25
Si tu parles anglais il y a quelques bouquins mais pas tellement plus facile que le cookbook que je trouve bien foutu.
As-tu suivi le tutorial sur le blog ?
Book.cakephp.or…du-blog-CakePHP
Tu trouveras pas plus simple pour débuter.
Sinon Formation-CakePhp :
Formation-cakephp.com
16. Par Jay Salvat le mardi 31 mars 2009 à 11:39
Oui j'ai déjà fait l'exemple sur le blog. Le souci que j'ai c'est surtout au niveau configuration de cake, un peu de mal à tout comprendre du fait que je suis pas un super développeur web (que quelques connaissances de bases...). mais à force de recherches et de petits conseils de pros comme toi ça va le faire...
Merci pour les adresses, je m'y rend de suite.
Et encore bravo pour le tuto,
bonne continuation.
17. Par Christophe F. le mardi 31 mars 2009 à 12:27
Bonjour Jay,
As-tu déjà constaté un disfonctionnement sous Chrome et sous IE6 ?
18. Par Fred le vendredi 01 mai 2009 à 17:47
Bonsoir Fred,
Je ne me souviens pas avoir constaté de dysfonctionnements particuliers. Mais si il y en a, c'est donc du côté du script jGrowl.
Jettes un coup d'oeil ici :
Stanlemon.net/p…cts/jgrowl.html
19. Par Jay Salvat le vendredi 01 mai 2009 à 20:56
Toujours sympa de retrouver le tuto entre 2 projets ! ;)
Merci beaucoup, et bonne continuation !!
Cordialement,
Thecanea
20. Par Thecanea le mardi 22 septembre 2009 à 16:07
j'étais à la recherche d'une méthode pour la mise en forme des messages de la fonction setFash(),je suis sur la votre ,elle est vraiment intéressante,j'ai suivi les étapes que vous avez décri mais ça marche pas:(
est ce que c normal?
21. Par Gacem le jeudi 19 novembre 2009 à 14:18
Bonsoir Gacem,
Vu que ça marche pour moi et que ça marche pour les autres, il n'y a pas de raison que ça ne marche pas pour vous :)
Relisez bien l'article et peut-être les commentaires.
Bonne chance.
22. Par Jay Salvat le jeudi 19 novembre 2009 à 15:51