Implementar plugin jQuery de advertencias tipo Growl en CakePHP
Nota para usuarios de CakePHP 1.3: he puesto algunos comentarios y notas como esta en el código y en el tutorial.
Tened en cuenta también (por si no lo sabéis..) que el helper de JavaScript ya no se utiliza para incrustar y cargar código en la variable$scripts_for_layout. Así mismo no estaría de más que reemplazarais el modo en que se utilizan los helpers en las vistas (es decir, utilizar $this->Html en lugar de $html por ejemplo).
Voy a explicaros una forma sencilla reemplazar vuestras capas flashMessage por bonitos mensajes dinámicos creados con jQuery imitando el estilo de Growl.
Para los que no lo sepáis, Growl es un sistema de advertencias de Mac que nos unifica todas las advertencias (tanto de sistema como las del resto de aplicaciones) siguiendo el mismo estilo y mostrándose y ocultándose con efectos de entrada y salida.
Implementación de Gritter en
Hay varios plugins de jQuery que imitan Growl. En este enlace podéis encontrar los que probablemente sean los más conocidos y utilizados. Para el ejemplo que voy a hacer me he valido de Gritter, que es el plugin que, a mi parecer, más se asemeja a Growl.
¿Qué necesitáis para este tutorial?
(las versiones que he puesto entre paréntesis son las que he utilizado yo para el tutorial)
Descargad todo lo necesario y guardad todo donde más os plazca. En mi ejemplo lo he organizado así:
- jquery-1.3.2.min.js a la carpeta /app/webroot/js/
- jquery.gritter.min.js a la carpeta /app/webroot/js/
- gritter.png a la carpeta /app/webroot/img/
- gritter-close-ie6.gif a la carpeta /app/webroot/img/
- gritter-long.png a la carpeta /app/webroot/img/
- jquery.gritter.css renombrado y movido a /app/webroot/css/gritter.css
Fijaros que he renombrado el fichero CSS. Además de renombrarlo habrá que modificar las rutas de las imágenes hacia la ruta que toque. Si estáis siguiendo el tutorial al pie de la letra debéis reemplazar ../images/ por ../img/ en vuestro CSS.
Dado que queremos utilizar este sistema de notificaciones tipo Growl como sistema de notificaciones principal de CakePHP tenemos que modificar nuestro layout de HTML principal para cargar los JavaScripts en la cabecera:
// /app/views/layout/default.ctp
<?php echo '<?xml version="1.1" encoding="' . Configure::read('App.encoding') . '"?>' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php echo $html->charset(); ?>
<title><?php echo $title_for_layout ?> | Ejemplos CakePHP | Racó Tècnic</title>
<?php echo $javascript->link(array('jquery-1.3.2.min','jquery.gritter.min')) ?>
<?php echo $javascript->codeBlock('var webroot="'.$this->webroot.'";') ?>
<?php echo $scripts_for_layout; ?>
<?php echo $html->css(array('main','gritter')) ?>
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo $html->link(__('Ejemplos CakePHP, Racó Tècnic', true), 'http://www.racotecnic.com'); ?></h1>
</div>
<div id="content">
<?php $session->flash(); // Cake 1.2 ?>
<?php echo $this->Session->flash(); // Cake 1.3 ?>
<?php echo $content_for_layout; ?>
</div>
<div id="footer">
<?php echo $html->link(
$html->image('cake.power.gif', array('alt'=> __("CakePHP: the rapid development php framework", true), 'border'=>"0")),
'http://www.cakephp.org/',
array('target'=>'_blank'), null, false
);
?>
</div>
</div>
<?php echo $cakeDebug; ?>
<script src="http://static.woopra.com/js/woopra.js" type="text/javascript"></script>
</body>
</html>
Las líneas marcadas en azul son las que os interesan. El resto podéis ignorarlas perfectamente.
En la línea 9 he añadido las librerías jQuery y Gritter. Recordad que para poder utilizar el Helperde JavasCript desde cualquier parte deberéis haber añadido dicho Helper en vuestro AppController:
<?php // /app/app_controller.php
class AppController extends Controller {
var $helpers = array('Html','Javascript'); // Cake 1.2
var $helpers = array('Html'); // Cake 1.3
}
En la línea 10 creamos la variable de JavaScript “webroot” que nos servirá más adelante para las plantillas de gritter. Si habéis leído alguno de mis tutoriales sobre cómo subir múltiples imágenes con uploadify en CakePHP quizás ya hayáis añadido esta variable a vuestro layout.
En la línea 12 añadimos el fichero CSS de Gritter.
Y en la línea 20, si no la teníais ya en vuestro layout, debéis añadir el método $session->flash() que será el que mostrará las notificaciones de Gritter.
Ya solo nos queda una cosa por hacer: crear la plantilla para cada tipo de notificación.
Como no quiero alargar mucho el tutorial haré sólo un par de layouts, uno para los errores y otro para las notificaciones normales.
Notificaciones informativas:
// /app/views/layouts/flash_info.ctp (Cake 1.2)
// /app/views/elements/flash_info.ctp (Cake 1.3)
<?php echo $javascript->codeBlock('
// $this->Html->scriptBlock en Cake 1.3
$(function(){
$.gritter.add({
title: "' . __("Información",true) . '",
text: "' . $content_for_layout . '", // Cake 1.2. La variable es $message en la 1.3
image: webroot + "img/info_48.png",
sticky: true
});
});') ?>
Notificaciones de error:
// /app/views/layouts/flash_error.ctp (Cake 1.2)
// /app/views/elements/flash_info.ctp (Cake 1.3)
<?php echo $javascript->codeBlock('
// $this->Html->scriptBlock en Cake 1.3
$(function(){
$.gritter.add({
title: "' . __("Error",true) . '",
text: "' . $content_for_layout . '", // Cake 1.2. La variable es $message en la 1.3
image: webroot + "img/error_48.png",
sticky: true
});
});') ?>
Como podéis ver he utilizado la variable webroot para poder acceder fácilmente a nuestro directorio de imágenes. De todos modos, y dado que estamos insertando el JavaScript mediante PHP, podríamos haber hecho $this->webroot. También he activado la variable sticky de gritter para dejar la notificación mostrada en pantalla hasta que el usuario la cierre manualmente, ya que considero que los flashMessage deben comportarse así. Cuando trabajo con Ajax no utilizo la variable sticky.
En estos ejemplos he utilizado lo básico al configurar Growl. Id a su página si queréis informaros sobre los demás métodos y variables disponibles para configurarlo.
Pues con esto habríamos terminado. Ahora cada vez que queráis mostrar notificaciones simplemente tendréis que especificar la plantilla a utilizar como segundo parámetro del método $this->Session->setFlash():
// Notificación de error
$this->Session->setFlash("Esto es un mensaje de error", "flash_error");
// Notificación informativa
$this->Session->setFlash("Esto es un mensaje informativo", "flash_info");
Pues ya está, ya lo tenemos ^^
Si queréis podéis descargar los ficheros más importantes en el zip que he preparado del tutorial. También podéis ver el ejemplo que he hecho a medida que hacía esta pequeña guía.
Ejemplo:
Páginas de referencia:
El ejemplo de la imagen (la implementación de underave) está hecha a partir de una modificación que he hecho a gritter para poder personalizar las clases CSS. De ahí que salga el texto “Error” en otro color (mejora implementada en Gritter 1.6).
Hola excelente muchas gracias lo incorporare en la pagina que estoy haciendo
Hola oye una preguntilla para hacer que este funcione con
$this->Auth->authError = ‘Mensaje’;
esto lo pongo en la funcion
function isAuthorized()
?
Si no te he entendido mal lo que quieres es utilizar gritter al mostrar el error “authError”, no?
Como en este caso:
http://www.underave.net/barna23/audios/add
De ser así, sólo se me ocurren dos formas de hacerlo:
Creando una plantilla para mensajes flash con nombre “default.ctp”, ya que “default” es la plantilla por defecto utilizada por cake para mostrar los errores de Auth.
Modificando el método startup del componente Auth. Si haces esto, lo mejor que puedes hacer es copiarte íntegramente el componente Auth a tu carpeta de componentes y modificar ese en lugar del que hay en la carpeta /cake/libs/controllers/components/. El trozo a modificar son las líneas 335 y 340 aproximadamente:
// Línea 335 (aprox)
$this->Session->setFlash($this->loginError, ‘default’, array(), ‘auth’);
// Línea 340 (aprox)
$this->Session->setFlash($this->authError, ‘default’, array(), ‘auth’);
Simplemente debes cambiar “default” por “flash_error” o el nombre que le pusieras a la plantilla.
Espero que te refirieras a esto : )
Hola una pregunta es exactamente igual para cakephp 1.3 ? es que estoy migrando la aplicacion que estoy haciendo a la 1.3 y no me esta funcionando
Pues la verdad es que no tengo ni idea porque en Cake 1.3 no lo he probado.
Qué te está fallando exactamente? No te muestra los mensajes (mirando el código de la página)? No ves los mensajes con gritter?
Con más detalles quizás pueda echarte un cable 😉
Hola Booletaire,
Lo estoy aplicando a cakephp 1.3.
Hago todo lo que me dices. Pero me lanza un error. Me dice que la variable content_for_layout que esta en flash_info no esta definida.
Aunque hace ya mucho tiempo que explicaste esto, será que me puedes ayudar.
Gracias
En Cake 1.3 la variable se llama $message si no estoy equivocado. En el fondo no es más que una variable de vista, así que puedes poner la que quieras siempre que hagas antes $this->set(‘variable’, ‘valor’).
Sinó, lo que puedes hacer es abrir los ficheros responsables de los mensajes Auth y averiguar qué variable debes pasarle.
Éstos son el componente Auth junto con el de Sesión (en /cake/libs/controller/components/) y el helper de sesión (/cake/libs/view/helpers/session.php).
Salud
Hola Booletaire,
Muchas gracias por tu explicación. Revise los ficheros responsabes de los mensajes y efectivamente la variable a pasar se llama $message. Pero aun asi, no queria funcionar. Lo que hice fue lo siguiente:
codeBlock(‘
jQuery(document).ready( function($) {
$.gritter.add({
title: “‘ . __(‘Información’,true) . ‘”,
text: “‘ . $message . ‘”,
image: webroot + “img/info_48.png”,
sticky: true
});
});
‘) ?>
Como puedes notar, le puse un echo, le dicione jQuery(document).ready y organice las comillas en title. Las comillas de “Informacion” las cambie por comillas simples ‘Informacion’.
Emplee estos dos archivos: ‘jquery.gritter’,’jquery.gritter.min’.
La otra cosa importante, y me imagino que a alguin mas puede servirle, es que tu dices que la ubicacion para los elementos flash_error y falsh_info es esta /app/views/layouts, pero en esa ubicacion no me funciono, sino en app/views/elements/
Saludos!!!
El echo sí lo he puesto, lo que pasa es que estaba en shortcut (
<?=en lugar de<?php echo)En cuanto a lo de que cargue un elemento en lugar de un layout es un cambio de la versión 1.3. De todos modos muchas gracias por el apunte, ahora mismo modificaré el post para que abarque ambas versiones.
Ah! Y cuando dices que has utilizado los dos archivos jquery.gritter y jquery.gritter.min te refieres a ambos a la vez?? De ser así puedes quitar uno de ellos ya que el “.min” es la versión “minificada” (reducida).
Salud
Thanks for the article. I just wanted to point out that you can create a generic Element, and pass all parameters in the call.
I use View/Elements/gritter.ctp and it looks like this:
Html->scriptBlock(‘
$(function(){
$.gritter.add({
title: “‘.$title.'”,
text: “‘ . $message . ‘”,
image: “/img/’.$type.’_48.png”,
sticky: ‘.$sticky.’
});
});’) ?>
Then in my controller, I do this:
$this->Session->setFlash(‘The post has been saved’,’gritter’, array(
‘title’ => ‘test title’,
‘type’ => ‘error’,
‘sticky’ => ‘true’
));
This way, you can control the title, and whether it’s a sticky message from the controller.
Also, you only need one element
Buenas estaba probando este script, estoy trabajando en cake 1.2, lo que quiero hacer es desde un controller de un modelo especifico hacer que cuando se cargue unos datos se haga una redireccion a otro controller de otro modelo distinto, esto lo venia haciendo con $this->flash(mensaje,url,intervalo) es un metodo de la clase controller que te permite definir el mensaje, la url donde vas a ir y el intervalo de tiempo, cuando hago esto se abre una plantilla que esta en //app/views/layout/flash.ctp, lo que quiero hacer es que me redireccione a otro controlador pero que el mensaje que se crea con gritter se vea en este nuevo controlador con este nuevo mensaje, pero cuando hago con el metodo redirect del controlador no sale el mensaje y con el firebug me fije y dice que $.gritter is undefened, se entiende el problema? hay alguna solucion?