Skip to Content

Notificaciones growl en cakephp 1.2

Growl es un sitema de notificacion no intrusivo y visual que interactua con los mensajes de sistema, avisandonos de cualquier evento que ocurra con la mayoria de nuestros programas favoritos.

Tambien existen implementaciones web para nuestras aplicaciones como el plugin en jquery llamado proyecto jgrowl:

Podemos usar jgrow dentro de cackephp de la siguiente forma: Descargamos el plugin jgrowl http://stanlemon.net/projects/jgrowl.html. Copiamos los archivos que vienen en el paquete en los siguientes directorios de nuestra aplicacion hecha en cakephp:

  • jquery.jgrowl.css --> [directorio raiz de la aplicacion]/app/webroot/css
  • jquery.jgrowl.js --> [directorio raiz de la aplicacion]/app/webroot/js
  • jquery-1.3.2.js --> [directorio raiz de la aplicacion]/app/webroot/js

Se modifican los headers de los layouts de nuestra aplicacion para usar estos archivos: [directorio raiz de la aplicacion]/app/views/layouts/default.ctp

1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2  <html xmlns="http://www.w3.org/1999/xhtml">
3  <head>
4       <title>
5            <?php __('Titulo'); ?>
6            <?php echo $title_for_layout;?>
7       </title>
8  
9       <?php echo $html->charset('utf-8');?>
10       <link rel="icon" href="<?php echo $this->webroot;?>favicon.ico" type="image/x-icon" />
11       <link rel="shortcut icon" href="<?php echo $this->webroot;?>favicon.ico" type="image/x-icon" />
12       <?php echo $html->css('site');?>
13          <?php echo $html->css('jquery.jgrowl');?>
14          <?php echo $javascript->link(array('jquery-1.3.2.js','jquery.jgrowl.js')); ?>
15       <?php echo $scripts_for_layout;?>
16       <!-- Javascript includes-->
17  </head>
18  <body>
19       <div id="container">
20            <div id="header">
21                 <?php echo $this->element('header'); ?>
22            </div>
23            <div id="content-left">
24                          <div id='message'>
25                 <?php
26                      if ($session->check('Message.flash')):
27                                $session->flash();
28                      endif;
29                 ?>
30                          </div>
31  
32                 <?php echo $content_for_layout;?>
33  
34            </div>
35            <div id="footer">
36                 <?php echo $this->element('footer'); ?>
37            </div>
38       </div>
39  </body>
40  </html>

Tambien añadimos el archivo growl.ctp como una plantilla en el mismo directorio. [directorio raiz de la aplicacion]/app/views/layouts/growl.ctp Con el siguiente contenido:

1  <script type="text/javascript">
2  <?php if (isset($type) && $type == 'important') : ?>
3      var settings = {header:"Importante :", glue:'before' };
4  <?php elseif (isset($type) && $type == 'error') : ?>
5      var settings = {header:"Error :",sticky:true };
6  <?php else : ?>
7      var settings = {};
8  <?php endif ?>
9      jQuery.jGrowl("<?php echo $content_for_layout; ?>", settings);
10  </script>

Que es la plantilla para cada tipo de notificacion, si es del tipo error o del tipo important, estos parametros de configuracion se pueden cambiar de acuerdo a la documentacion de jgrowl.

Es necesario hacer la llamada a Javascrit dentro los helpers y asi poder usar ajax en todos los controladores. [directorio raiz de la aplicacion]/app/app_controller.php

1  <?php
2  class AppController extends Controller {
3      
4      var $helpers = array('Html','Form','Javascript');
5      ....
6  
7  }
8  ?>

Ahora como ejemplo se usa el jgrowl dentro de el metodo logout dentro de un user controller en los setFlash habituales de cakephp agregando el argumento growl que es el la plantilla ya mencionada.

1  <?php
2  class UsersController extends AppController {
3  
4    ...
5  
6    /**
7     * Metodo que usa el logout del Auth component
8     * */
9    function logout() {
10        $this->Session->setFlash('Se ha desconectado correctamente', 'growl'); 
11        $this->redirect($this->Auth->logout());
12    }
13    ...
14  }
15  ?>

En este ejemplo se uso los mensajes de autenticacion de logueo y deslogueo del componmente Auth de Cakephp 1.2, si terminamos sesion usando el metodo logout de user controller finalmente tendremos el mensaje de notifiacion al igual que growl: