Jordan Boesch has an excellent jQuery plugin for showing Growl-like messages in your web applications. This immediately seemed perfect for showing the flash messages on my CakePHP application, and Jordan even links to a blog post explaining how to integrate these together.
This post is in Spanish, and even though it’s easy enough to follow, I thought I’d sum it up for the English-speaking crowd as well.

Set Gritter up with CakePHP

1. Download Gritter
2. Download jQuery
3. Add the *.js files you downloaded to your webroot js folder (/app/webroot/js)
4. Add gritter’s css and images to the correct place in your file structure. For example – to your /app/webroot/css and app/webroot/img folders.

Configure your cake’s page template

(This is usually /app/views/layouts/default.ctp)
Load Gritter and jQuery javascript files, and Gritter’s css file. (The code below assumes you put the css file in /app/webroot/css).
[cc lang="php"]

…


…

$session->flash();
//The line below is your regular Cake’s displaying of the view.
echo $content_for_layout;
?>
[/cc]
I usually use absolute positioning (Gritter’s default) for Gritter’s message. If you do so as well – it doesn’t really matter where you put the $session->flash() line inside your template.

Create layouts for the flash messages

The real trick (and gem) in underave’s post is using specific layouts for the flash messages. It’s quite simple, really. Suppose you have two types of messages you need to display to your users: an informational message (e.g. ‘New photo added’) and an error message (e.g. ‘Wrong user/password combination’).
Suppose these two types are different – they show a different message icon. While it is easy enough to do this with code – it is even easier to create two different layouts for the flash messages.

Under /app/views/layouts/ create two new files: flash_normal.ctp and flash_error.ctp.
[cc lang="js"]
//flash_normal.ctp

[/cc]
[cc lang="js"]
//flash_error.ctp

[/cc]
The code above applies Gritter’s functions to $content_for_layout. The $content_for_layout is actually the flash message you write in your controller.

(Of course, you may add as many as you want, and play with Gritter’s options to suit your needs. (E.g. uncomment the sticky:true option, to ensure the message remains on the screen).

All that’s left is hooking up the flash layout templates and the flash messages themselves. This is perfomed in your controllers, where you set the flash messages to display. For example:
[cc lang="php"]
//The silly code below tests whether the user calculated 2+2 correctly.
if ($userAnswer == 4) {
$this->Session->setFlash(‘You are right! You deserve a golden trophy.’,'flash_normal’);
} else {
$this->Session->setFlash(‘No. Sorry.’,'flash_error’);
}
[/cc]

That’s really all there is to it – all the rest is playing around with Gritter’s options.

Important note for IE7:

In flash_error.ctp and flash_regular.ctp, do not leave a trailing comma at the end of gritter’s configuration. While this is perfectly legal and works like a charm with FF and Chrome – IE will fail the entire charade, and you’ll never see your flash message on the screen.
I believe the same will happen with IE6. In IE8 it’s all good!