Symfony integra los efectos visuales de la librería script.aculo.us, para poder incluir efectos más avanzados que simplemente mostrar y ocultar elementos <div> en las páginas. La mejor documentación sobre la sintaxis que se puede emplear en los efectos se encuentra en el wiki de la librería en http://script.aculo.us/. Básicamente, la librería se encarga de proporcionar objetos y funciones JavaScript que manipulan el DOM de la página para conseguir efectos visuales complejos. El listado 11-23 incluye algunos ejemplos. Como el resultado es una animación o efecto visual de ciertas partes de la página, es recomendable que pruebes los efectos para entender bien en qué consiste cada efecto. El sitio web de script.aculo.us incluye una galería donde se pueden ver sus efectos visuales.
Listado 11-23 - Efectos visuales en JavaScript con Script.aculo.us
// Resalta el elemento 'mi_elemento'
Effect.Highlight('mi_elemento', { startcolor:'#ff99ff', endcolor:'#999999' })
// Oculta un elemento
Effect.BlindDown('mi_elemento');
// Hace desaparecer un elemento
Effect.Fade('mi_elemento', { transition: Effect.Transitions.wobble })Symfony encapsula el objeto Effect de JavaScript en un helper llamado visual_effect(), que forma parte del helper Javascript. El código generado es JavaScript y puede utilizarse en un enlace normal, como muestra el listado 11-24.
Listado 11-24 - Efectos visuales en las plantillas con el helper visual_effect()
<div id="div_oculto" style="display:none">¡Aquí estaba!</div>
<?php echo link_to_function(
'Mostrar el DIV oculto',
visual_effect('appear', 'div_oculto')
) ?>
// Equivalente a llamar a Effect.Appear('div_oculto')El helper visual_effects() también se puede utilizar en los callbacks de Ajax, como en el listado 11-22, que muestra un indicador de actividad de forma más elegante que en el listado 11-22. El elemento indicador aparece de forma progresiva cuando comienza la petición Ajax y se desaparece también progresivamente cuando se recibe la respuesta del servidor. Además, el elemento respuesta se resalta después de ser actualizado por la petición remota, de forma que esa parte de la página capte la atención del usuario.
Listado 11-25 - Efectos visuales en los callbacks de Ajax
<div id="respuesta"></div>
<div id="indicador" style="display: none">Cargando...</div>
<?php echo link_to_remote('Borrar este artículo', array(
'update' => 'respuesta',
'url' => 'articulo/borrar?id='.$articulo->getId(),
'loading' => visual_effect('appear', 'indicator'),
'complete' => visual_effect('fade', 'indicator').
visual_effect('highlight', 'feedback'),
)) ?>Los efectos visuales se pueden combinar de forma muy sencilla concatenando sus llamadas (mediante el .) dentro de un callback.