11.1. Helpers básicos de JavaScript

JavaScript siempre se había considerado como poco útil en el desarrollo de aplicaciones web profesionales debido a sus problemas de incompatibilidad entre distintos navegadores. Hoy en día, se han resuelto la mayoría de incompatibilidades y se han creado librerías muy completas que permiten programar interacciones complejas de JavaScript sin necesidad de programar cientos de líneas de código y sin perder cientos de horas corrigiendo problemas. El avance más popular se llama Ajax, como se explica más adelante en la sección "Helpers de Ajax".

Sorprendentemente, en este capítulo casi no se incluye código JavaScript. La razón es que Symfony permite la programación de scripts del lado del cliente de forma diferente: encapsula y abstrae toda la lógica JavaScript en helpers, por lo que las plantillas no incluyen código JavaScript. Para el programador, añadir cierta lógica a un elemento de la página solo requiere de una línea de código PHP, pero la llamada a este helper produce código JavaScript, cuya complejidad se puede comprobar al ver el código fuente de la página generada como respuesta. Los helpers se encargan de resolver los problemas de incompatibilidades entre navegadores por lo que la cantidad de código JavaScript que generan puede ser muy importante. Por tanto, en este capítulo se muestra como realizar los efectos que normalmente se programan manualmente con JavaScript sin necesidad de utilizar JavaScript.

Todos los helpers descritos se encuentran disponibles en las plantillas siempre que se declare de forma explícita el uso del helper llamado Javascript.

<?php use_helper('Javascript') ?>

Algunos de estos helpers generan código HTML y otros generan directamente código JavaScript.

11.1.1. JavaScript en las plantillas

En XHTML, los bloques de código JavaScript deben encerrarse en secciones CDATA. Por eso es tedioso crear páginas que tienen muchos bloques de código JavaScript. Symfony incluye un helper llamado javascript_tag() y que transforma una cadena de texto en una etiqueta <script> válida según los estándares XHTML. El listado 11-1 muestra el uso de este helper.

Listado 11-1 - Incluyendo JavaScript con el helper javascript_tag()

<?php echo javascript_tag("
  function mifuncion()
  {
  ...
  }
") ?>
 => <script type="text/javascript">
    //<![CDATA[
      function mifuncion()
      {
        ...
      }
    //]]>
    </script>

El uso habitual de JavaScript, más que sus bloques de código, es la definición de enlaces que ejecutan un determinado script cuando se pincha en ellos. El helper link_to_function() se encarga exactamente de eso, como muestra el listado 11-2.

Listado 11-2 - Ejecutando JavaScript mediante un enlace con el helper link_to_function()

<?php echo link_to_function('¡Pínchame!', "alert('Me has pinchado')") ?>
 => <a href="#" onClick="alert('Me has pinchado'); return none;">¡Pínchame!</a>

Como sucede con el helper link_to(), se pueden añadir opciones a la etiqueta <a> generada mediante un tercer argumento de la función.

11.1.2. Actualizando un elemento DOM

Una de las tareas habituales de las interfaces dinámicas es la actualización de algunos elementos de la página. Normalmente se realiza como se muestra en el listado 11-3.

Listado 11-3 - Actualizando un elemento con JavaScript

<div id="indicador">Comienza el procesamiento de datos</div>
<?php echo javascript_tag("
  document.getElementById("indicador").innerHTML =
    "<strong>El procesamiento de datos ha concluido</strong>";
") ?>

Symfony incluye un helper que realiza esta tarea y que genera código JavaScript (no HTML). El helper se denomina update_element_function() y el listado 11-4 muestra su uso.

Listado 11-4 - Actualizar un elemento mediante JavaScript con el helper update_element_function()

<div id="indicador">Comienza el procesamiento de datos</div>
<?php echo javascript_tag(
  update_element_function('indicador', array(
    'content'  => "<strong>El procesamiento de datos ha concluido</strong>",
  ))
) ?>

A primera vista parece que este helper no es muy útil, ya que el código necesario es tan largo como el código JavaScript original. En realidad su ventaja es la facilidad de lectura del código. Si lo que se necesita es insertar el contenido antes o después de un elemento, eliminarlo en vez de actualizarlo o no hacer nada si no se cumple una condición, el código JavaScript resultante es muy complicado. Sin embargo, el helper update_element_function() permite mantener la facilidad de lectura del código de la plantilla, tal y como se muestra en el listado 11-5.

Listado 11-5 - Opciones del helper update_element_function()

// Insertar el contenido después del elemento 'indicador'
update_element_function('indicador', array(
  'position' => 'after',
  'content'  => "<strong>El procesamiento de datos ha concluido</strong>",
));

// Eliminar el elemento anterior a 'indicador', solo si $condicion vale true
update_element_function('indicador', array(
  'action'   => $condicion ? 'remove' : 'empty',
  'position' => 'before',
))

El helper permite que el código de las plantillas sea más fácil de entender que el código JavaScript, además de proporcionar una sintaxis unificada para efectos similares. También esa es la razón por la que el nombre del helper es tan largo: su nombre es tan explícito que no hace falta añadir comentarios que lo expliquen.

11.1.3. Aplicaciones que se degradan correctamente

La etiqueta <noscript> permite especificar cierto código HTML que muestran los navegadores que no tienen soporte de JavaScript. Symfony complementa esta etiqueta con un helper que funciona de forma inversa: asegura que cierto código solo se ejecuta en los navegadores que soportan JavaScript. Los helpers if_javascript() y end_if_javascript() permiten crear aplicaciones que se degradan correctamente en los navegadores que no soportan JavaScript, como muestra el listado 11-6.

Listado 11-6 - Uso del helper if_javascript() para que la aplicación se degrade correctamente

<?php if_javascript(); ?>
  <p>Tienes activado JavaScript.</p>
<?php end_if_javascript(); ?>

<noscript>
  <p>No tienes activado JavaScript.</p>
</noscript>