if you are this kind of person worried about the loading time, optimizing everything, you would find this script very useful and you’ll love it.

i’ve improved the style of this script and the last one for make it more presentable and useful, so enjoy it

(again) this script with a css compressor like this or this are a complet and useful tools for make your css files lighter

put this code in your html to try the script, you will see a box with the list of unused css in the right bottom

greetings

Es con una imagen de 16×16, se ve bastante bien.

Incluso si quieres te puedes robar los estilos de la wikipedia que me imagino deben estar bajo licencia CC.

Si quieres sólo jugar un rato quizás este o este te sirva. Si eres vago, dejalo así no más … es menos trabajo que hacer y si eres diseñador haz el tuyo propio y compartelo =)

Ya habia comentado como hacer mensajes de acciones exitosa y mensajes de error de validaciones pues me quedan los warnings y los mensajes informativos.

Con respecto a los warnings, no son nada muy dificil, sólo un div que advierta al usuario sobre X cosa. Las razones para mostrar un warning pueden ser variadas. Desde que una tarea no se puede ejecutar por X motivos, una tarea que fue ejecutada pero con ciertos problemas menores, una advertencia para ser precavido en lo que haga el usuario, etc.

El código para mostrar un warning es este:

<div class="warning">
  <ul>
    <li>Oh no! hemos encontrado un problema acerca de xxYYzz solucionalo, e intentalo de nuevo</li>
  </ul>
</div>

Finalmente con los mensajes informativos la cosa se pone un poco más entretenida.

La idea detrás de los mensajes informativos es que cierta información se muestre a los usuarios cuando esta se crea, pero a medida que los usuarios vayan cerrando estos mensajes/información, no les aparezcan más a ellos.

Esto sirve principalmente para un usuario que conoce un sitio nuevo y se le da la información necesaria para que aprenda a usar las funcionalidades básicas, o para mostrar noticias o cosas similares.

Un buen ejemplo es el que me tope hoy en facebook, cuando me conecte salia este mensaje:

Curiosamente aprete en cerrar y no apareció más =)

La implementación que use en el demo es bastante sencilla, la verdad no quise complicarme mucho para hacerlo, pero si necesitan algo un poco más serio en la descarga hay un schema.yml tentativo que podrás usar y también deberás reescribir los metodos del myUser.class.php.

Para obtener mensajes como estos, se necesitan 2 cosas, 1.- poner los mensajes en donde se quiere que aparezcan y 2.- gestionar que mensajes le aparecen a que usuarios.

Para poner un mensaje informativo como el anterior se puede hacer lo siguiente:

<?php if($sf_user->hasInfo(2)): ?>
  <div class="info" id="2">
    <img src="/images/close.png" class="close"/>
    <ul>
      <li>Vamos a hacer cambios en la página de inicio muy pronto.</li>
      <li>Familiarizate con las nuevas funciones. Estos cambios van a producirse muy ponto ... bla bla ...</li>
    </ul>
  </div>
<?php endif; ?>

Y estos metodos en el myUser.class.php:

public function init($force = false)
{
  if($force || !$this->hasAttribute(1)){
    $this->setAttribute(1, true);
    $this->setAttribute(2, true);
  }
}

public function hasInfo($info_id)
{
  return $this->getAttribute($info_id);
}

public function delInfo($info_id)
{
  $this->setAttribute($info_id, false);
}

También para quitar los info se necesita el siguiente código jQuery en el partial _messages.php:

$('.info .close').click(function(){
  var id = $(this).parent().attr('id');
  $(this).parent().fadeOut('slow', function(){
    $.ajax({
      type:'POST',
      dataType:'html',
      url:'/id/'+id
    });
    $(this).remove();
  });
});

Todo esto lo puedes encontrar en la descarga y para verlo funcionar acá el demo.

Les recuerdo que la descarga y el demo estan con  SYMFONY 1.0 (obviamente es completamente migrable) …… y esta sin freeze, las funcionalidades para que desaparezcan los mensajes estan escritas en jQuery por lo que si alguien las puede hacer en prototype u otro se agradecerá.

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