Sistema de mensajes para Symfony, parte 1

Que es?

Este sistema de mensajes para symfony es simplemente una manera fácil y sencilla de tener mensajes como los de acá incorporados en tus acciones. Si más de una vez envidiaste el mensaje del “admin-generator” que dice en una linda cajita verde “Your modifications have been saved”, este post es para ti.

Que obtendré con esto?

Obtendrás mensajes de acciones exitosas, mensajes de errores, warnings y mensajes informativos con un diseño bastante decente (aunque lo puedes cambiar si quieres), faciles de usar y con un código de uso menor. Además evitarás tener que crear acciones nuevas o agregar mayor lógica a las acciones para mostrar mensajes.

Que necesito?

Solo un par de minutos para implementarlo y entenderlo…. nada más.

Bueno basta de blabla y vamos a lo que nos interesa.

En esta primera parte y para no tener un post muy largo, sólo pondre el código necesario para los mensajes de errores (errores de validación) y los mensajes de acciones exitosas.

Tal como había comentado tomé de esta página el diseño para los mensajes al que agregue sólo un cambio que mencionaré más adelante…. aquí necesitarás el código css y las imagenes para las cajas de mensajes. (Cuando publique la segunda parte habilito la descarga de todo el contenido… pero si estas ansioso, puedes descargar las imagenes de la página con el css).

El código css es el siguiente:

@CHARSET "UTF-8";

.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}

.info ul, .success ul, .warning ul, .error ul, .validation ul {
margin: 0px;
}

.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('/images/info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('/images/success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('/images/warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('/images/error.png');
}

.info img.close, .success img.close, .warning img.close, .error img.close, .validation img.closes {
float:right;
margin-right:-2px;
margin-top:-5px;
}

Este código php puede ir directamente en el layout, aunque prefiero ponerlo en un partial aparte e incluirlo en el layout.

Para que el script funcione debe incluirse jQuery.

<script type="text/javascript">
<!--
$(document).ready(function(){
  // mensaje de exito, si clickean en la cruz se saca
  $('.success .close').click(function(){
    $(this).parent().fadeOut('slow', function(){
      $(this).remove(); 
    });
  });

  // descomentar esto para activar el auto-quitado del mensaje en 5 segundos
  // si el usuario no lo a quitado primero =)
  //setTimeout('$(".success .close").trigger("click")', 5000);
});
//-->
</script>

<?php //se muestran los errores ?>
<?php if ($sf_request->hasErrors()): ?>
<div class="error">
  <ul>
    <?php foreach ($sf_request->getErrors() as $error): ?>
      <li><?php echo $error ?></li>
    <?php endforeach; ?>
  </ul>
</div>
<?php endif; ?>

<?php // se muestra el mensaje de acción exitosa, si es que lo hay ?>
<?php if ($sf_flash->has('success')): ?>
  <div class="success">
    <?php // imagen usada para cerrar el mensaje de exito ?>
    <img src="/images/close.png" class="close"/>
    <ul>
      <li><?php echo $sf_flash->get('success') ?></li>
    </ul>
  </div>
<?php // lo quito manualmente de la sesion porque si se hizo un forward no se sale ?>
<?php $sf_flash->remove('success') ?>
<?php endif; ?>
<?php $sf_flash->clear() ?>

Finalmente con este código fuente puedes tener tus errores de validación en una caja bastante presentable.

Para agregar un mensaje de acción exitosa sólo debes agregar a la acción el siguiente código:
$this->setFlash(‘success’, ‘Mensaje de acción exitosa’);
En la segunda parte subiré el código fuente, explicaré como implementar un sistema para mostrar información de ayuda a los usuarios en el cual los mensajes no vuelven a aparecer si el usuario ha cerrado el mensaje y mencionaré como usar los mensajes de warning.

Saludos