Implementar plugin jQuery de advertencias tipo Growl en CakePHP
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 underave
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 entre otras cosas:
// /app/views/layout/default.ctp
<?= '<?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>
<?= $html->charset(); ?>
<title><?= $title_for_layout ?> | Ejemplos CakePHP | Racó Tècnic</title>
<?= $javascript->link(array('jquery-1.3.2.min','jquery.gritter.min')) ?>
<?= $javascript->codeBlock('var webroot="'.$this->webroot.'";') ?>
<?= $scripts_for_layout; ?>
<?= $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://racotecnic.underave.net'); ?></h1>
</div>
<div id="content">
<?php $session->flash(); ?>
<?= $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');
}
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
<?= $javascript->codeBlock('
$(function(){
$.gritter.add({
title: "' . __("Información",true) . '",
text: "' . $content_for_layout . '",
image: webroot + "img/info_48.png",
sticky: true
});
});') ?>
Notificaciones de error:
// /app/views/layouts/flash_error.ctp
<?= $javascript->codeBlock('
$(function(){
$.gritter.add({
title: "' . __("Error",true) . '",
text: "' . $content_for_layout . '",
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. 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:
Entrades relacionades:
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